WebRTC Screen Sharing / Source Code

Copyright © 2013 Muaz Khan<@muazkh>.

Share Your Screen:

Screens Preview



Enable screen capture support in getUserMedia()

Allow web pages to request access to the screen contents via the getUserMedia() API. #enable-usermedia-screen-capture

You must enable this flag via "chrome://flags"



<script src="https://www.webrtc-experiment.com/screen-sharing/screen.js"></script>
var screen = new Screen('screen-unique-id');

// get shared screens
screen.onaddstream = function(e) {
    document.body.appendChild(e.video);
};

// custom signaling channel
// you can use each and every signaling channel
// any websocket, socket.io, or XHR implementation
// any SIP server
// anything! etc.
screen.openSignalingChannel = function(callback) {
    return io.connect().on('message', callback);
};

// check pre-shared screens
// it is useful to auto-view
// or search pre-shared screens
screen.check();

document.getElementById('share-screen').onclick = function() {
    screen.share('screen name');
};

// to stop sharing screen
screen.leave();


To use code in your own site, you must understand following limitations:

Chrome Canary denies "screen capturing" request automatically if:

  1. You've not used 'chromeMediaSource' constraint:
    mandatory: {chromeMediaSource: 'screen'}
    
  2. You requested audio-stream alongwith 'chromeMediaSource' – it is not permitted in a "single" getUserMedia request.
  3. You've not installed SSL certificate (i.e. testing on non-HTTPS domain)
  4. "screen capturing" is requested multiple times per tab. Maximum one request is permitted per page!


Why recursive cascade images or blurred screen?

Remember, recursive cascade images or blurred screen is chrome's implementation issue. It will be solved soon.

mandatory: {chromeMediaSource: 'tab'} can only be useful in chrome extensions. See Tab sharing using tabCapture APIs.



What about Desktop Sharing?

Obviously, it is one of the most requested features; however not supported yet. Chrome WebRTC team is planning to support it in near future.

These screen sharing APIs (i.e. { chromeMediaSource: 'screen' }) allows only state-less (non-interactive) screen sharing.



Feedback