Ta strona została przetłumaczona przez Cloud Translation API.

Jak nagrywać ekran użytkownika

François Beaufort

Udostępnianie kart, okien i ekranów jest możliwe na platformie internetowej dzięki interfejsowi Screen Capture API. Metoda getDisplayMedia() umożliwia użytkownikowi wybranie ekranu do przechwycenia jako strumienia multimediów. Strumień można następnie nagrać za pomocą interfejsu MediaRecorder API lub udostępnić innym osobom w sieci. Nagranie można zapisać w pliku lokalnym za pomocą metody showOpenFilePicker().

W przykładzie poniżej pokazujemy, jak nagrać ekran użytkownika w formacie WebM, wyświetlić podgląd lokalny na tej samej stronie i zapisać nagranie w systemie plików użytkownika.

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