REACT_스트리밍영상에서 오디오만 녹음하기

최근 한것

1. 음성인식 과련 웹페이지 제작.
2. 스트리밍 서비스 실시간으로 음성인식하는 웹페이지 제작.

삽질한이유

1. 앱과 웹 녹음 인식 방법이 좀 다름.
2. 스트리밍 할때 사용하는 형식이 매우다름.

도움이된것

1. 자바스크립트에서 오디오파일을 변환하고 가공하는 방법
2. AudioContext 를 활용하는 방법.

기록용 URL

1. hls 에서 버퍼 받아오자마자 확인하는 방법
2. 플레이어에서 스트림 가져오는 방법

코드

스트리밍 시작하면 자동으로 녹음 시작함.

const PlayAudio=()=> {
        if(Hls.isSupported()){
            hls = new Hls();
            hls.attachMedia(playerRef.current);
            hls.on(Hls.Events.MEDIA_ATTACHED, () => {
                hls.loadSource(
                    '소스 URL'
                );
                playerRef.current.play().then(()=>{
                    console.log("play!")
                    audioContext = new AudioContext();
                    let source = audioContext.createMediaElementSource(playerRef.current);
                    let stream_dest = audioContext.createMediaStreamDestination();
                    source.connect(stream_dest);
                    analyser = audioContext.createScriptProcessor(0, 1, 1);
                    let captureStream = stream_dest.stream
                    const mediaRecorder = new MediaRecorder(captureStream);
                    console.log("mediaRecorder",mediaRecorder)
                    media = mediaRecorder;
                    media.start();
                    mediaStreamSource = audioContext.createMediaStreamSource(captureStream);
                    console.log("mediaStreamSource",mediaStreamSource)
                    mediaStream = playerRef.current.captureStream();
                    console.log("mediaStream",mediaStream)
                    meter = createAudioMeter(audioContext);
                    mediaStreamSource.connect(meter);
                    mediaStreamSource.connect(analyser);
                    analyser.connect(audioContext.destination);
                })

            });
        }
    }

끝내는 코드

const PauseAudio=()=> {
        playerRef.current.pause();
        hls = null
        media.ondataavailable = function (e) {
            let url = URL.createObjectURL(e.data)
            console.log(url);
        };
        mediaStream.getAudioTracks().forEach(function (track) {
            track.stop();
        });
        media.stop();
        analyser.disconnect();
        mediaStreamSource.disconnect();
    }

누군가에게 도움이 되었으면 좋겠다.