[Web API] MediaStream Recording 업로드

출처 : https://melius.tistory.com/59

 

MediaStream Recording API

https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API

 

MediaStream 객체나 TMLMediaElement 객체에서 생성된 데이터를 capture하여 분석, 가공, 저장을 가능하게 해준다.

 

Recording Process

1. media data의 source 생성 (MediaStream or HTMLMediaElement)

2. MediaRecorder 객체 생성 (source와 option 인수 전달)

3. MediaRecorder.ondataavailable 이벤트 핸들러 등록

4. source에서 데이터가 생성되면, MediaRecorder.start() 메소드를 호출하여 Recording 시작

5. 매번 데이터가 준비될 때 마다 dataavailable 이벤트가 발생

6. MediaRecorder.stop() 메소드를 호출하여 Recording 중지

 

* dataavailable 이벤트 핸들러의 인자로 전달되는 the event 객체에는 data 속성이 있으며, source에서 생성되는 Blob 형의 데이터를 참조하고 있다.

* source가 데이터 생성을 중지하면, 자동으로 Recording이 중지된다.

 

 

Using the MediaStream Recording API

https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API

 

media data의 source 생성

MediaDevices.getUserMedia() 메소드를 이용하여 media data의 source 생성한다.

navigator.mediaDevices.getUserMedia({ audio: true, video: false }).then(recorder);

 

MediaRecorder 객체 생성 및 이벤트 핸들러 등록

MediaDevices.getUserMedia() 메소드는 Promise 객체를 반환하고, fulfilled 시 호출되는 콜백함수의 인자로 MediaStream 객체를 전달한다. 또한, 메모리에 저장된 데이터를 DOM의 audio 요소에서 읽어들여 재생이 가능하다.

function recorder(stream) {
    // if (MediaRecorder.isTypeSupported('audio/webm;codecs=opus') == true)
    const options = {
        audioBitsPerSecond: 128000,
        mimeType: 'audio/webm;codecs=opus'
    };
    const mediaRecorder = new MediaRecorder(stream, options);

    const recordedChunks = [];
    mediaRecorder.addEventListener('dataavailable', function (e) {
        if (e.data.size > 0) { recordedChunks.push(e.data); }
    });

    mediaRecorder.addEventListener('stop', function () {
        let blob = new Blob(recordedChunks);
        let audio = document.querySelector('audio');
        audio.src = window.URL.createObjectURL(blob);
        
        // if video data 
        // let blob = new Blob(chunks, { 'type': 'video/mp4' });
        // let video = document.querySelector('video');
        // video.src = window.URL.createObjectURL(blob);
    });

    btnRec.onclick = () => { mediaRecorder.start(); };
    btnStop.onclick = () => { mediaRecorder.stop(); };
}

DOM의 a 요소를 이용하여 파일로 다운로드가 가능하다.

mediaRecorder.addEventListener('stop', function () {
    let blob = new Blob(recordedChunks);

    // download file
    let aElm = document.createElement('a');
    aElm.href = URL.createObjectURL(blob);
    aElm.download = 'audio.webm';
    aElm.click();
});

FormData 객체를 이용하여 서버로 업로드하는 Script는 아래와 같다.

mediaRecorder.addEventListener('stop', function () {
    let blob = new Blob(recordedChunks);

    // upload file
    let formdata = new FormData();
    formdata.append("fname", "audio.webm");
    formdata.append("data", blob);

    let xhr = new XMLHttpRequest();
    xhr.open("POST", "/upload", false);
    xhr.send(formdata);
});

 

 

MediaRecorder

MediaRecorder.start()

MediaRecorder.stop()

MediaRecorder.isTypeSupported()

MediaRecorder.state