Diese Seite wurde von der Cloud Translation API übersetzt.

Bildschirm des Nutzers aufzeichnen

François Beaufort

Mit der Screen Capture API können Tabs, Fenster und Bildschirme auf der Webplattform geteilt werden. Mit der Methode getDisplayMedia() kann der Nutzer einen Bildschirm auswählen, der als Media-Stream erfasst werden soll. Dieser Stream kann dann mit der MediaRecorder API aufgezeichnet oder über das Netzwerk mit anderen geteilt werden. Die Aufnahme kann mit der Methode showOpenFilePicker() in einer lokalen Datei gespeichert werden.

Im folgenden Beispiel wird gezeigt, wie Sie den Bildschirm des Nutzers im WebM-Format aufzeichnen, lokal auf derselben Seite eine Vorschau anzeigen und die Aufzeichnung im Dateisystem des Nutzers speichern können.

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