דף זה תורגם על ידי Cloud Translation API.

איך מקליטים את המסך של המשתמש

François Beaufort

אפשר לשתף כרטיסיות, חלונות ומסכים בפלטפורמת האינטרנט באמצעות Screen Capture API. השיטה getDisplayMedia() מאפשרת למשתמש לבחור מסך לצילום כסטרימינג של מדיה. אחר כך אפשר להקליט את הזרם הזה באמצעות MediaRecorder API או לשתף אותו עם אחרים ברשת. אפשר לשמור את ההקלטה בקובץ מקומי באמצעות המתודה showOpenFilePicker().

בדוגמה שלמטה אפשר לראות איך אפשר להקליט את המסך של המשתמש בפורמט WebM, להציג תצוגה מקדימה מקומית באותו דף ולשמור את ההקלטה במערכת הקבצים של המשתמש.

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