Bu sayfa, Cloud Translation API ile çevrilmiştir.

Kullanıcının ekranı nasıl kaydedilir?

François Beaufort

Web platformunda Screen Capture API ile sekmeleri, pencereleri ve ekranları paylaşabilirsiniz. getDisplayMedia() yöntemi, kullanıcının medya akışı olarak yakalanacak bir ekran seçmesine olanak tanır. Bu akış daha sonra MediaRecorder API ile kaydedilebilir veya ağ üzerinden başkalarıyla paylaşılabilir. Kayıt, showOpenFilePicker() yöntemiyle yerel bir dosyaya kaydedilebilir.

Aşağıdaki örnekte, kullanıcının ekranını WebM biçiminde nasıl kaydedebileceğiniz, aynı sayfada yerel olarak nasıl önizleyebileceğiniz ve kaydı kullanıcının dosya sistemine nasıl kaydedebileceğiniz gösterilmektedir.

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