Cette page a été traduite par l'API Cloud Translation.

Comment enregistrer l'écran de l'utilisateur

François Beaufort

Il est possible de partager des onglets, des fenêtres et des écrans sur la plate-forme Web avec l'API Screen Capture. La méthode getDisplayMedia() permet à l'utilisateur de sélectionner un écran à capturer en tant que flux multimédia. Ce flux peut ensuite être enregistré avec l'API MediaRecorder ou partagé avec d'autres utilisateurs sur le réseau. L'enregistrement peut être enregistré dans un fichier local à l'aide de la méthode showOpenFilePicker().

L'exemple ci-dessous montre comment enregistrer l'écran de l'utilisateur au format WebM, le prévisualiser localement sur la même page et enregistrer l'enregistrement dans le système de fichiers de l'utilisateur.

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