Запись экрана в окне браузера с использованием JavaScript

Я разрабатываю приложение, которое в основном представляет собой приложение для рисования, в которое могут быть встроены интерактивные симуляции.

http://test.anybodycanlearn.org/

Я пытаюсь добавить опцию для записи экрана и звука на самом сайте, чтобы учителя могли создавать уроки онлайн. Каков наилучший способ достичь этого? Я много искал в интернете и обнаружил, что recordRTC от Muaz Khan https://www.webrtc-experiment.com/RecordRTC/- очень хороший выбор. Но я новичок, и я чувствую, что в нем слишком много вариантов, и я не уверен, что это лучший вариант для меня. Я также читал о WebRTC. Можно ли сделать скриншот записи с его помощью? Я не возражаю против использования расширения Chrome, при условии, что у меня должна быть возможность записать определенную часть страницы вместе с ним. Пожалуйста помоги....

Источник

1 ответ

По состоянию на май 2018 года вы можете получить видеопоток в Firefox, используя:

let constraints = {
  video: {
    mediaSource: "screen"
  }
};

navigator.mediaDevices.getUserMedia(constraints)
  .then(mediaStream => {
    // do something with mediaStream now
  });

Однако на самом деле это не запись экрана. Вам нужно будет найти способ сделать это самостоятельно. Одним из способов является использование WebRTC для отправки полученного вами видео на сервер и записи его там.

Что касается других браузеров:

  • Chrome не поддерживает исходное получение экрана. Вам нужно будет создать расширение и попросить своих пользователей установить его. Это не очень сложно сделать.
  • Edge & safari якобы поддерживают это, но я тогда не пробовал.
Источник

Вы можете проверить в этой библиотеке videojs-record. Создан с использованием RecordRtc. Вы также можете использовать его с популярными js-фреймворками, такими как React и Angular.

Источник
Другие вопросы по тегам