דף זה תורגם על ידי 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();
});

תמיכת דפדפן

MediaDevices.getDisplayMedia()

תמיכה בדפדפן

מקור

ממשק API של MediaRecorder

תמיכה בדפדפן

47
79
25
14.1

מקור

ערך showSaveFilePicker() של File System Access API

תמיכה בדפדפן

מקור

קריאה נוספת

הדגמה (דמו)

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="icon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🖥️</text></svg>"
    />
    <title>How to record the user's screen</title>
  </head>
  <body>
    <h1>How to record the user's screen</h1>
    <button id="startShareScreenButton">Start sharing screen</button>
    <button id="stopShareScreenButton" disabled>Stop sharing screen</button>
    <button id="startRecordButton" disabled>Start recording</button>
    <button id="stopRecordButton" disabled>Stop recording</button>
    <video autoplay muted playsinline></video>
    <pre id="logs"></pre>
  </body>
</html>

CSS


        :root {
  color-scheme: dark light;
}
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  margin: 1rem;
  font-family: system-ui, sans-serif;
}
button {
  display: block;
  margin-bottom: 4px;
}
video {
  display: block;
  margin-top: 10px;
  max-width: 100%;
  background: black;
  max-height: 480px;
}
pre {
  color: red;
  white-space: pre-line;
}

JS


        const video = document.querySelector('video');
const startShareScreenButton = document.querySelector('#startShareScreenButton');
const stopShareScreenButton = document.querySelector('#stopShareScreenButton');
const startRecordButton = document.querySelector('#startRecordButton');
const stopRecordButton = document.querySelector('#stopRecordButton');

let stream;
let recorder;

startShareScreenButton.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;

  startRecordButton.disabled = false;
  stopShareScreenButton.disabled = false;
  log("Your screen is being shared.");
});

stopShareScreenButton.addEventListener("click", () => {
  // Stop the stream.
  stream.getTracks().forEach(track => track.stop());
  video.srcObject = null;

  stopShareScreenButton.disabled = true;
  startRecordButton.disabled = true;
  stopRecordButton.disabled = true;
  log("Your screen is not shared anymore.");
});

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.disabled = false;
  log("Your screen is being recorded locally.");
});

stopRecordButton.addEventListener("click", () => {
  // Stop the recording.
  recorder.stop();

  stopRecordButton.disabled = true;
  log("Your screen has been successfully recorded locally.");
});