تمت ترجمة هذه الصفحة بواسطة 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();
});