WebRTC/WebSocket screen recording

Question

In my use case I would like to record the screen activity and send it to server [not live]. I looked at few blogs/sample demos for this. But I couldn't find anything related to this. I could find lot of live streaming audio/video but not screen recording.

I have the following questions related to this,

• Which one would be efficient WebRTC/Websockets for this use case?
• Browser support for WebRTC/Websockets?
• Is there any other methods to achieve this use case?

I am fairly new to WebRTC/Websockets, if I am not posting the enough information please comment. I will add.

Could someone help me on this? Any reference URL/any related info related to this use case would be really helpful.

Answer 1

As suggested by @mido, in the client side I would use MediaRecorder API. Another option would be to record in the server side. For the latter option, you can use some open source media server, like [Kurento] (http://www.kurento.org/).

Answer 2

Here's how to record the screen in Firefox (Update: try it in 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>

Warning: Sharing your browser window on the web involves security risk! Read about it here!

Once you have the blob, you can upload it using regular web sockets (not shown).

The mediaRecorder bits should work in Chrome as well, but unfortunately screensharing is still not fully standardized and works differently and requires an extension in Chrome.

Answer 3

The solution can be divided into three parts:

• getting hold of screen mediastream using getUserMedia, this falls under category of WebRTC, and since you are sharing screen, your site is gonna have to be https and your users probably going to need to use extensions( for both firefox and chrome), you could look for demo here

• Recording the mediastream, firefox has been supporting this for a while through MediaRecorder and heard chrome started supporting it from 47. So with mediarecorder, you can get hold of blob of your recorded file.

• How you post this blob to server is totally up to you, you could use any channel: websockets, http post, etc. You could make the server a WebRTC client, and send it through RTCDataChannel, but guessing that would be overkill for your use case.