이 페이지는 Cloud Translation API를 통해 번역되었습니다.

사용자의 화면을 녹화하는 방법

François Beaufort

Screen Capture API를 사용하면 웹 플랫폼에서 탭, 창, 화면을 공유할 수 있습니다. getDisplayMedia() 메서드를 사용하면 사용자가 미디어 스트림으로 캡처할 화면을 선택할 수 있습니다. 그런 다음 이 스트림을 MediaRecorder API로 녹화하거나 네트워크를 통해 다른 사용자와 공유할 수 있습니다. 녹음은 showOpenFilePicker() 메서드를 통해 로컬 파일에 저장할 수 있습니다.

아래 예에서는 WebM 형식으로 사용자의 화면을 녹화하고, 동일한 페이지에서 로컬로 미리 보고, 녹화 파일을 사용자의 파일 시스템에 저장하는 방법을 보여줍니다.

let stream;
let recorder;

shareScreenButton.addEventListener("click", async () => {
  // Prompt the user to share their screen.
  stream = await navigator.mediaDevices.getDisplayMedia();
  recorder = new MediaRecorder(stream);
  // Preview the screen locally.
  video.srcObject = stream;
});

stopShareScreenButton.addEventListener("click", () => {
  // Stop the stream.
  stream.getTracks().forEach(track => track.stop());
  video.srcObject = null;
});

startRecordButton.addEventListener("click", async () => {
  // For the sake of more legible code, this sample only uses the
  // `showSaveFilePicker()` method. In production, you need to
  // cater for browsers that don't support this method, as
  // outlined in https://web.dev/patterns/files/save-a-file/.

  // Prompt the user to choose where to save the recording file.
  const suggestedName = "screen-recording.webm";
  const handle = await window.showSaveFilePicker({ suggestedName });
  const writable = await handle.createWritable();

  // Start recording.
  recorder.start();
  recorder.addEventListener("dataavailable", async (event) => {
    // Write chunks to the file.
    await writable.write(event.data);
    if (recorder.state === "inactive") {
      // Close the file when the recording stops.
      await writable.close();
    }
  });
});

stopRecordButton.addEventListener("click", () => {
  // Stop the recording.
  recorder.stop();
});