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.

jib · Accepted Answer · 2017-10-09T20:38:59.070

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.

It helps a lot. Is it possible to test this in localhost I mean without https? — Dany, Apr 08 '16 at 03:17
@Dany, yes, but only if you add `,localhost` to the list of domains, and set `media.navigator.permission.disabled` to `true` in *about:config*. The latter turns off all getUserMedia permissions, so you probably want to set it back after testing. — jib, Apr 08 '16 at 06:10
@JimmyKane Only works in Firefox, as stated. See also https://stackoverflow.com/q/41881434/918910. — jib, Oct 09 '17 at 20:42
@jib Right! and thanks for the edit. Also maybe noteworthy to add https://stackoverflow.com/questions/29466639/how-to-enable-screen-desktop-capture-in-chrome — Jimmy Kane, Oct 10 '17 at 12:22

score 4 · Answer 2 · answered Mar 08 '16 at 01:22

4

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.

answered Mar 08 '16 at 01:22

mido

24,198
15
92
117

Thank you. It is really helpful. – Dany Mar 08 '16 at 02:59
how to record whole screen which means not only the firefox or any other broweer window , i want to record the whole screen of end user. – vaishali Jul 10 '17 at 07:03
@vaishali did you check the link to demo( in the first point) – mido Jul 10 '17 at 11:05

score 1 · Answer 3 · answered Mar 12 '16 at 00:47

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/).

answered Mar 12 '16 at 00:47

Andrés

719
1
4
21

Thank you. Is there any other server side recording tools? I just want to find the best one. I am fairly new to this area. – Dany Mar 12 '16 at 09:26
@DineshAppavoo , you can also give a try to [Janus](https://janus.conf.meetecho.com/recordplaytest.html), another open source project that, by the way, has important activity in the [Github repository](https://github.com/meetecho/janus-gateway) – Andrés Mar 14 '16 at 06:29

WebRTC/WebSocket screen recording

3 Answers3

Linked