실시간으로 웹페이지 녹화하기 (1)

MDN에서 제공하는 예제 코드이다.

const canvas = document.querySelector("canvas");

// Optional frames per second argument.
const stream = canvas.captureStream(25);
const recordedChunks = [];

console.log(stream);
const options = { mimeType: "video/webm; codecs=vp9" };
const mediaRecorder = new MediaRecorder(stream, options);

mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();

function handleDataAvailable(event) {
  console.log("data-available");
  if (event.data.size > 0) {
    recordedChunks.push(event.data);
    console.log(recordedChunks);
    download();
  } else {
    // …
  }
}
function download() {
  const blob = new Blob(recordedChunks, {
    type: "video/webm",
  });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  document.body.appendChild(a);
  a.style = "display: none";
  a.href = url;
  a.download = "test.webm";
  a.click();
  window.URL.revokeObjectURL(url);
}

자바스크립트 변수는 stream 데이터를 저장할 수 있나?

JavaScript 변수는 텍스트, 숫자, 객체, 배열 등과 같은 일반적인 데이터를 저장하는 데 사용됩니다. 그러나 MediaStream과 같은 비동기 또는 스트리밍 형식의 데이터를 변수에 직접 저장하는 것은 적절하지 않습니다.

MediaStream은 오디오나 비디오와 같은 스트리밍 미디어 데이터를 나타내는 데 사용되는 인터페이스입니다. 이러한 데이터는 보통 웹캠, 마이크, 비디오 파일 등으로부터 비동기적으로 생성되기 때문에 일반적으로 스트리밍된 데이터를 변수에 직접 저장하는 것은 어렵습니다.

대신, MediaStream은 DOM 요소에 연결되거나 미디어 서비스에 전달되어 실시간으로 처리되거나 재생됩니다. 미디어 레코딩과 관련된 작업을 수행하려면 MediaRecorder와 같은 API를 사용하여 녹화를 시작하고 생성된 데이터를 처리해야 합니다.

MediaRecorder에 들어가는 stream 과recordedChunks.push(event.data)의 event.data는 어떻게 다른가?

1. MediaRecorder에 들어가는 stream:
   • 이것은 미디어 스트림입니다. 보통 웹캠이나 화면 공유 등의 미디어 소스를 나타냅니다. MediaRecorder는 이러한 미디어 스트림으로부터 데이터를 읽어와 녹화를 수행합니다.
2. recordedChunks.push(event.data)의 event.data:
   • MediaRecorder가 미디어 스트림에서 읽어온 데이터를 포함하는 객체입니다. 이 데이터는 미디어 레코더가 미디어 스트림에서 캡처한 작은 조각(chunk)으로, 주로 Blob 형태입니다. 이러한 Blob은 비디오의 일부를 나타내는 이진 데이터를 포함하고 있습니다.

간단히 말하면, stream은 미디어 소스를 가리키는 것이고, event.data는 해당 소스에서 얻은 녹화된 데이터 조각을 나타냅니다. MediaRecorder는 stream으로부터 데이터를 읽어와서 event.data로 이벤트를 발생시키고, 이 데이터를 recordedChunks 배열에 저장합니다.