1 Обзор
WebRTCпринадлежит Google2011Механизм обработки аудио и видео, исходный код которого был открыт в 2010 году, может собирать видеоданные в режиме реального времени, то есть он может вести прямую трансляцию или делать桌面录屏,桌面分享. Он относительно прост в использовании.
2. Разработка инструмента для записи экрана
Вот разработанный инструмент для записи экрана. Сначала создайте страницу на страницеvideoМетка, используемая для отображения содержимого записи экрана, и создание еще четырех кнопок, одна屏幕分享,Один开始录制,Один停止录制,Один下载视频.
<button id="start">屏幕分享</button>
<button id="record">开始录制</button>
<button id="stop">结束录制</button>
<button id="download">下载视频</button>
<video autoplay playsinline id="player"></video>
При нажатии кнопки общего доступа к экрану черезgetDisplayMediaметод для получения медиапотока рабочего стола, здесь вам нужно передать объект в качестве конфигурации, в объекте вы можетеvideoа такжеaudioУстановите значение. Значение может быть логическим типом или типом объекта. Здесь сначала установите логическое значение для захвата видео, но не звука.
Возвращаемое значение представляет собойPromise, затем вPromiseизthenназначить потоковое мультимедиа наvideoпомеченsrcObjectСвойства могут быть очень простыми.
document.querySelector('#start').onclick = function() {
if (navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {
navigator.mediaDevices.getDisplayMedia({
video: true,
audio: false
}).then((stream) => {
document.querySelector('#player').srcObject = stream;
}).catch((err) => {
console.error(err);
})
} else {
alert('不支持这个特性');
}
}
Когда вы нажимаете кнопку общего доступа к экрану, в браузере появляется всплывающее окно с вопросом, какую часть контента записывать.Здесь вы можете выбрать запись всего экрана, интерфейса приложения или указанной вкладки браузера. .
Например, если я решу записать здесь весь экран, содержимое экрана моего компьютера будет отображаться в теге видео.
использоватьgetDisplayMediaМожно захватить содержимое экрана.Если вы хотите записать содержимое и загрузить его по локальному запросу, используйте другой класс, предоставляемый WebRTC.MediaRecorder.
У него много событий и методов. Он также очень прост в использовании. Просто создайте экземпляр напрямую. Необходимо передать два параметра, первыйstream, то есть черезgetDisplayMediaПолученный медиапоток, второй — необязательный параметр. ЕстьmimeTypeУкажите, записывается ли аудио или видео и в каком формате выполняется запись.
Существует множество форматов, например аудио- и видеоформаты Google.video/webm, audio/webm, также можно установитьmp4, вы также можете указать кодировку видеоvideo/webm;codecs=vp8, video/webm;codecs=h264или укажите кодировку звукаaudio/webm;codecs=opus.
new MediaRecorder(stream, [, options]);
MediaRecorderизapiЕсть и другие, перваяMediaRecorder.start(timeslice)Это означает начать запись,timesliceнеобязательный параметр, если он не установлен, он будет храниться в большомbuffer, если этот параметр установлен, данные будут храниться в соответствии с периодом времени, например10sХраните часть данных.
MediaRecorder.start()это отключить запись, она сработает, когда запись будет остановленаdataavailableсобытие, получить финалblobданные.
MediaRecorder.pause()Пауза записи
MediaRecorder.resume()Возобновить запись
MediaRecorder.isTypeSupported()Проверьте, поддерживается ли формат записываемого файла. Напримерmp4,webm,mp3формат.
В дополнение к этим методам есть много событий. Как правило, есть два обычно используемых события. ПервыйondataavailableКогда эффективно собранные данные вызовут это событие, поэтому вы можете прослушивать это событие, когда полученные данные могут быть сохранены в области буфера данных, вы можетеe.dataполучено в. Выполнение этого события фактически вызваноtimesliceРешите, если не указано, то запишите все данные. Если он указан, он будет срабатывать периодически.
onerrorПри возникновении ошибки это событие будет запущено, и запись автоматически остановится.
Внесите изменения здесь,getDisplayMediaПолученный потоковый медиа больше не назначается напрямуюvideoтеги, но черезMediaRecorderсохраняется и преобразуется вvideo, так что не только можно назначитьvideo,а такжеstreamХранилище также можно скачать. БудуgetDisplayMediaВозвращенный контент сохраняется в глобальномallStreamсередина.
let allStream;
document.querySelector('#start').onclick = function() {
if (navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {
navigator.mediaDevices.getDisplayMedia({
video: true,
audio: false
}).then((stream) => {
allStream = stream;
document.querySelector('#player').srcObject = stream;
}).catch((err) => {
console.error(err);
})
} else {
alert('不支持这个特性');
}
}
При нажатии кнопки начала записи сначала нужно использоватьMediaRecorder.isTypeSupportedМетоды для определения того, поддерживает ли браузер этот формат видео.
затем начните создаватьMediaRecorderобъект, переданный вallStreamОбъект и объект конфигурации, здесь настраивается только формат видео какwebmФормат.
Затем связатьondataavailableМетод события, это событие будет обрабатывать собранные потоковые мультимедиа. По сути, это хранение данных во внешней переменнойbufсередина.
окончательное исполнениеmediaRecorder.startНачать запись.
let buf = [];
let mediaRecorder;
document.querySelector('#record').onclick = function() {
// 约束视频格式
const options = {
mimeType: 'video/webm;codecs=vp8'
}
// 判断是否是支持的mimeType格式
if (!MediaRecorder.isTypeSupported(options.mimeType)) {
console.error('不支持的视频格式');
return;
}
try {
mediaRecorder = new MediaRecorder(allStream, options);
// 处理采集到的事件
mediaRecorder.ondataavailable = function(e) {
if (e && e.data && e.data.size > 0) {
// 存储到数组中
buf.push(e.data);
}
};
// 开始录制
mediaRecorder.start(10);
} catch (e) {
console.error(e);
}
}
Это позволит вам записать экран страницы. Функция загрузки требует помощиBlobтип реализовать, создатьBlobType поддерживает передачуbufferПараметры и обозначенияbufferтип контента, .
При нажатии кнопки загрузки, чтобы закончить запись, то есть вызватьmediaRecorderизstopметод, но и судитьbufЕсть ли контент, на случай, если кто-то кликнет и загрузит без записи, его нужно остерегаться....
использоватьnewсоздание методаBlolэкземпляр, входящий записанныйbufа также媒体类型, обратите внимание, что тип здесь должен использоваться так же, как и в предыдущей записиwebm.
затем используйтеURLизcreateObjectURLметод будетblobПреобразование в адресную ссылку. Загрузка относительно проста, создайтеaтег, затем назначьте ссылку на видеоaпомеченhref, имя файлаaпомеченdownloadАтрибуты. Последний автоматический триггерaпомеченclickСобытия в порядке.
document.querySelector('#download').onclick = function() {
mediaRecorder.stop();
if (buf.length) {
const blob = new Blob(buf, { type: 'video/webm'});
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.style.display = 'none';
a.download = 'aaa.webm';
a.click();
} else {
alert('还没有录制任何内容');
}
}
Также нажмите на совместное использование экрана, чтобы открыть страницу окна выбора.
Затем нажмите кнопку начала записи, и на рабочем столе появится значок записи экрана.
Наконец, нажмите кнопку загрузки, и записанное видео будет загружено. Поскольку я скачал его раньше, браузер автоматически добавил его здесь (1)
Посмотрите это видео.
Чтобы закончить запись, позвонитеmediaRecorderобъектstopметод.
document.querySelector('#stop').onclick = function() {
if (mediaRecorder) {
mediaRecorder.stop();
}
}
На этом запись экрана завершена. Кстати, эту функцию можно использовать только вhttpsработать в среде, локальная разработка может поддерживать127.0.0.1илиlocalhost. Если развертывание формальное, не забудьте использоватьhttps.
WebRTCТакже возможно получение видеопотока с камеры, нужно толькоgetDisplayMediaзаменитьgetUserMediaВот и все.
document.querySelector('#start').onclick = function() {
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({
video: true,
audio: false
}).then((stream) => {
document.querySelector('#player').srcObject = stream;
}).catch((err) => {
console.error(err);
})
} else {
alert('不支持这个特性');
}
}
WebRTCGoogle надеется, что к более продвинутым функциям относятся трансляция аудио и видео, совместное использование удаленного рабочего стола, обмен мгновенными сообщениями и т. д.WebRTCОн используется для быстрой разработки аудио- и видеозвонков между браузерами. Однако эти функции более сложны в разработке и будут внедрены, когда будет время.