Se usó la API de Cloud Translation para traducir esta página.

Cómo grabar la pantalla del usuario

François Beaufort

Con la API de Screen Capture, es posible compartir pestañas, ventanas y pantallas en la plataforma web. El método getDisplayMedia() permite que el usuario seleccione una pantalla para capturar como una transmisión de medios. Luego, este flujo se puede grabar con la API de MediaRecorder o compartir con otras personas a través de la red. La grabación se puede guardar en un archivo local a través del método showOpenFilePicker().

En el siguiente ejemplo, se muestra cómo puedes grabar la pantalla del usuario en formato WebM, obtener una vista previa local en la misma página y guardar la grabación en el sistema de archivos del usuario.

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