Захват экрана пользователя и запись видео

Для совместного использования вкладок, окон и экранов на веб-платформе используется Screen Capture API (API захвата экрана).

Метод getDisplayMedia() позволяет пользователю выбрать экран для захвата в качестве медиапотока. Затем этот поток можно записать с помощью MediaRecorder API или поделиться им с другими пользователями по сети. Запись можно сохранить в локальный файл с помощью метода showOpenFilePicker().

В приведенном ниже примере показано, как вы можете записать экран пользователя в формате WebM, выполнить локальный предпросмотр на той же странице и сохранить запись в файловой системе пользователя.

HTML-код:

<button id="startShareScreenButton">
  Поделиться экраном
</button>
<button disabled id="stopShareScreenButton">
  Закрыть доступ
</button>
<button disabled id="startRecordButton">
  Начать запись
</button>
<button disabled id="stopRecordButton">
  Остановить запись
</button>

<figure>
  <video
    autoplay
    muted
    playsinline></video>
</figure>

Javascript:

let stream;
let recorder;

shareScreenButton.addEventListener(
  "click",
  async () => {
    // Предложение пользователю
    // поделиться своим экраном.
    stream = 
      await navigator.mediaDevices.getDisplayMedia();
    recorder = new MediaRecorder(stream);
    // Локальный предпросмотр экрана.
    video.srcObject = stream;
});

stopShareScreenButton.addEventListener(
  "click",
  () => {
    // Остановить поток
    stream.getTracks().forEach(
      track => track.stop()
    );
    video.srcObject = null;
});

startRecordButton.addEventListener(
  "click",
  async () => {
    // Для понимания кода в этом примере
    // используется только
    // метод `showSaveFilePicker()`.
    // О том, что делать для браузеров,
    // которые не поддерживают
    // этот метод, можно посмотреть здесь 
    // https://web.dev/patterns/files/save-a-file/.

    // Предложить пользователю выбрать,
    // где сохранять файл с записью.
    const suggestedName = "screen-recording.webm";
    const handle = await window.showSaveFilePicker(
      { suggestedName }
    );
    const writable = await handle.createWritable();

    // Начать запись экрана
    recorder.start();
    recorder.addEventListener(
      "dataavailable",
      async (event) => {
        // Запись фрагментов в файл
        await writable.write(event.data);
        if (recorder.state === "inactive") {
          // Закрыть файл,
          // когда запись остановится
          await writable.close();
        }
    });
});

stopRecordButton.addEventListener(
  "click",
  () => {
    // Остановить запись экрана
    recorder.stop();
});

Пример захвата экрана с записью видео:

Поделиться экраном Закрыть доступ Начать запись Остановить запись