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 relate

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

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.

Answer 3

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.