Запись экрана WebRTC/WebSocket

Question

В моем случае использования я хотел бы записать активность экрана и отправить его на сервер [не вживую]. Я просмотрел несколько блогов/демонстрационных примеров для этого. Но я не мог найти ничего подобного. Я мог бы найти много потокового аудио/видео в прямом эфире, но не запись на экране.

У меня есть следующие вопросы, связанные с этим,

• Какой бы эффективной WebRTC/WebSockets для этого случая использования?
• Поддержка браузера для WebRTC/Websockets?
• Есть ли какие-либо другие способы достижения этого варианта использования?

Я довольно новичок в WebRTC/Websockets, если я не размещаю достаточную информацию, прокомментируйте. Я добавлю.

Может ли кто-нибудь помочь мне в этом? Любой ссылочный URL/любая связанная информация, связанная с этим прецедентом, была бы действительно полезна.

Answer 1

Вот как записать экран в Firefox (Update: попробовать в this fiddle):

var constraints = { video: { mediaSource: "screen", width: 320, height: 200 } }; 
 

 
var start = ms => navigator.mediaDevices.getUserMedia(constraints) 
 
    .then(stream => record(stream, ms) 
 
    .then(recording => { 
 
     stop(stream); 
 
     video.src = link.href = URL.createObjectURL(new Blob(recording)); 
 
     link.download = "recording.blob"; 
 
     link.innerHTML = "Download blob"; 
 
     log("Playing "+ recording[0].type +" recording:"); 
 
    }) 
 
    .catch(log).then(() => stop(stream))) 
 
    .catch(log); 
 

 
var record = (stream, ms) => { 
 
    var rec = new MediaRecorder(stream), data = []; 
 
    rec.ondataavailable = e => data.push(e.data); 
 
    rec.start(); 
 
    log(rec.state + " for "+ (ms/1000) +" seconds..."); 
 
    var stopped = new Promise((r, e) => (rec.onstop = r, rec.onerror = e)); 
 
    return Promise.all([stopped, wait(ms).then(() => rec.stop())]) 
 
    .then(() => data); 
 
}; 
 

 
var stop = stream => stream.getTracks().forEach(track => track.stop()); 
 
var wait = ms => new Promise(resolve => setTimeout(resolve, ms)); 
 
var log = msg => div.innerHTML += "<br>" + msg;

<button onclick="start(5000)">Record screen!</button> 
 
<div id="div"></div><br> 
 
<video id="video" height="120" width="160" autoplay></video> 
 
<a id="link"></a>

Предупреждение: Sharing окно браузера в Интернете включает в себя риск безопасности! Читайте об этом here!

Как только у вас есть blob, вы можете загрузить его с помощью обычных веб-сокетов (не показаны).

Биты mediaRecorder также должны работать в Chrome, но, к сожалению, экранирование по-прежнему не полностью стандартизировано и работает по-разному и требует расширения в Chrome.

Answer 2

Раствор можно разделить на три части:

• получая владение экрана MediaStream с помощью GetUserMedia, это подпадает под категорию WebRTC, и так как вы используете экран, ваш сайт собирается должны быть https и пользователи, вероятно, будет необходимо использовать расширения (как для Firefox и хром), вы можете посмотреть на демо here

• Запись на MediaStream, светлячок оказывает поддержку этого на некоторое время через MediaRecorder и услышал хром начал поддерживать его из 47. Таким образом, с помощью mediarecorder вы можете получить blob вашего записанного файла.

• Как вы размещаете этот блоб на сервере полностью зависит от вас, вы можете использовать любой канал: веб-сайты, http-сообщение и т. Д. Вы могли бы сделать сервер клиентом WebRTC и отправить его через RTCDataChannel, но угадать, что быть излишним для вашего случая использования.

Answer 3

Как было предложено @mido, на стороне клиента я использовал API MediaRecorder. Другим вариантом будет запись на стороне сервера. Для последнего варианта вы можете использовать какой-либо сервер с открытым исходным кодом, например [Kurento] (http://www.kurento.org/).