MediaRecorder: 웹 녹화 API와 MediaStream 정리

The MediaRecorder interface of the MediaStream Recording API provides functionality to easily record media. It is created using the MediaRecorder() constructor. MediaRecoreder 함수를 사용하면 웹에서 바로 표시가 된다.

비디오 플레이어: 레코더API로 html에서 비디오 나타내기

//video.pug

mixin videoPlayer(video = {})
    .videoPlayer#jsVideoPlayer
        video(src=video.src)
        .videoPlayer__controls
            .videoPlayer__column
                span#jsVolumeBtn
                    i.fas.fa-volume-up
                span
                    span#currentTime 00:00:00
                    span  /
                    span#totalTime
                input.videoPlayer__volume#jsVolume(type="range", min="0" max="1" value="0.5" step="0.1")
            .videoPlayer__column
                span#jsPlayButton
                    i.fas.fa-play
            .videoPlayer__column
                span#jsFullScreen

const getVideo = async () => {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: true,
      video: { width: 1280, height: 720 },
    });
    videoPreview.srcObject = stream;
    videoPreview.muted = true;
    videoPreview.play();
    streamObject = stream;
    startRecording();
  } catch (error) {
    recordBtn.innerHTML = "Cant record";
  } finally {
    recordBtn.removeEventListener("click", getVideo);
  }
};

getUserMedia(녹화장치 가져오기)

stream을 카메라(레코딩)로부터 얻어서 video에 넣어 녹화되고 있는 모습을 html에 보여준다.

await하는 이유: user가 우리한테 media에 접근할건지 대답할 때까지기다려야 하기 때문이다.

getUserMdeia함수를 통해 stream은 'MediaStream'객체를 얻는다.

'MediaStream'을 넣을 때 소스는 src.object에 넣는다.

videoPreview.src VS videoPreview.srcObject

src는 파일이라 videoPlayer를 못주지만srcObject는 옵젝이라 받을 수 있다.

finally: try나 catch 둘 중 하나가 실행되면 실행하는 함수다.

MediaRecorder(진짜 녹화하기)

const videoRecorder = new MediaRecorder(streamObject)

streamObject가 파라메터로 받는다.

videoRecorder.start()

console.log에서 state: recording으로 나온다.

녹화가 완료됐는지 확인하는 이벤트

1. addEventListener("dataavailable,

2. ondataavilable

videoRecorder.start()

start(1000)으로 해서 1초 단위로 녹화할수도 있다.

videoRecorder.stop()

stop이 되면 BlobEvent를 받는다.

BlobEvent.data

const handleVideoData = (event) => {
  const { data: videoFile } = event;
  const link = document.createElement("a");
  link.href = URL.createObjectURL(videoFile);
  link.download = "recorded.webm";
  document.body.appendChild(link);
  link.click();
};

event.data의 형태는 Blob : 0과1 의 모음

데이터는 레코딩이 다 끝나야 한번에 저장하는 것이 디폴트로 되어있다.

web에 최적화된 오픈소스 포맷 webm을 이용한다.

.click 페이크 클릭: 클릭을 명령어로 받아서 처리함