Запись экрана в окне браузера с использованием 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.