Trang này được dịch bởi Cloud Translation API.

Cách ghi màn hình của người dùng

François Beaufort

Bạn có thể chia sẻ thẻ, cửa sổ và màn hình trên nền tảng web bằng Screen Capture API. Phương thức getDisplayMedia() cho phép người dùng chọn một màn hình để chụp dưới dạng luồng nội dung nghe nhìn. Sau đó, bạn có thể ghi lại luồng này bằng MediaRecorder API hoặc chia sẻ với người khác qua mạng. Bạn có thể lưu bản ghi vào một tệp cục bộ thông qua phương thức showOpenFilePicker().

Ví dụ bên dưới cho thấy cách bạn có thể ghi lại màn hình của người dùng ở định dạng WebM, xem trước cục bộ trên cùng một trang và lưu bản ghi vào hệ thống tệp của người dùng.

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