Halaman ini diterjemahkan oleh Cloud Translation API.

Cara merekam layar pengguna

François Beaufort

Berbagi tab, jendela, dan layar dapat dilakukan di platform web dengan Screen Capture API. Metode getDisplayMedia() memungkinkan pengguna memilih layar yang akan direkam sebagai aliran media. Kemudian, streaming ini dapat direkam dengan MediaRecorder API atau dibagikan kepada orang lain melalui jaringan. Rekaman dapat disimpan ke file lokal melalui metode showOpenFilePicker().

Contoh di bawah menunjukkan cara merekam layar pengguna dalam format WebM, melihat pratinjau secara lokal di halaman yang sama, dan menyimpan rekaman ke sistem file pengguna.

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();
});