Screen Sharing

Muaz Khan edited this page May 9, 2015 · 3 revisions

This wiki-page explains how screen capturing & sharing is implemented and supported in RTCMultiConnection.

Following kind of screen capturing & sharing scenarios can be implemented and used using RTCMultiConnection:

  1. Full screen or screen of opened applications' content
  2. Tab of the chrome
  3. Part of screen

You can even crop the resulting screen to show whatever portion you want to be shared.

Full-screen sharing is as simple as writing single property:

connection.session = {
    screen: true,
    oneway: true
};

Full screen sharing requires following things:

  1. Chrome extension something like desktopCapture extension
  2. Chrome command-line i.e. CL flag: --enable-usermedia-screen-capturing
  3. Firefox 33+ or Firefox nightly with two flags via about:config page

Firefox nightly requires:

  1. media.getusermedia.screensharing.enabled flag to be set true
  2. media.getusermedia.screensharing.allowed_domains flag to be used to store ASCII domain names e.g. localhost or www.webrtc-experiment.com

Chrome command-line flag can be enabled using guidelines explains here: http://www.chromium.org/developers/how-tos/run-chromium-with-flags

RTCMultiConnection has following screen sharing demos:

  1. Full Screen sharing
  2. OneWay Screen & Two-Way Audio
  3. Screen Sharing & Cropping
  4. Share Part of Screen without cropping it

Chrome & Screen Capturing

By default, it works over SSL-based domains only; i.e. you need to use HTTPs to test it. Though there is a temporary command-line flag to enable it for HTTP-based domains as well e.g. --allow-http-screen-capture.

Firefox & Screen Capturing

Currently works both over SSL and non-SSL based domains however non-SSL will be quickly disabled if any security concerns are reported.

At the top level, the risk to sharing a camera is similar to the risk in sharing a screen.

Firefox's screen capturing API are currently providing audio capturing along with screen as well; which is a missing part in chromium builds. However, remember, security considerations can be made any time to ask gecko team to restrict or disable this feature.

Regarding remote desktop sharing from a web-browser, it has a pile more security risks associated with it compared to screen sharing. The UI/security aspects will be tough to deal with, and the feature will be very susceptible to social engineering -- phone call: "this is Google/Dell/Computer-Management; we've detected your machine has a virus on it; could you browse to <url> and we'll assist you in removing it" -- etc.

So, remote desktop capturing need to be implemented in the application-level, by keeping all the expected security considerations in mind.

addStream and removeStream

btnAddStream.onclick = function() {
    connection.addStream({
        screen: true,
        oneway: true
    });
};

btnRemoveAllScreenStreams.onclick = function() {
    connection.removeStream({
        screen: true,  // it will remove all screen streams
        stop: true     // ask to stop old stream
    });
};

btnRemoveSingleScreenStream.onclick = function() {
    connection.removeStream('screen-stream-id');
};

You can invoke addStream many times to share new screen, or share multiple screens. Multiple screens can be captured and shared as following:

// https://cdn.WebRTC-Experiment.com/getScreenId.js

btnCaptureAndRenegotiateNewScreen.onclick = function() {
    getScreenId(function(error, sourceId, screen_constraints) {
        navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia;

        navigator.getUserMedia(screen_constraints, function(stream) {
            // renegotiating screen
            connection.renegotiate(stream, {
                screen: true,
                oneway: true
            });
        }, function() {});
    });
};

Bottom lines

If screen is shared from chrome or Firefox; it can be viewed in any WebRTC compatible browser or application e.g. node-webkit, crosswalk-project, opera, or whatever else.

You can even use getScreenId.js to implement screen capturing directly in your own WebRTC application.

Reference Links

  1. http://www.rtcmulticonnection.org/docs/addStream/
  2. http://www.rtcmulticonnection.org/docs/removeStream/
  3. http://www.rtcmulticonnection.org/docs/session/
  4. https://github.com/muaz-khan/WebRTC-Experiment/tree/master/getScreenId.js
  5. https://github.com/muaz-khan/Chrome-Extensions
  6. https://github.com/muaz-khan/Firefox-Extensions