Switch branches/tags
Nothing to show
Find file History
Latest commit 27bfee5 May 16, 2018


WebRTC Screen-Sharing / Demo

Ad-ons free; plugin-free; extension free; direct browser-to-browser screen sharing.

Firefox? Install Firefox Extension / Source Code


First Step: Link the library

<script src="//cdn.webrtc-experiment.com/getScreenId.js"></script>
<script src="//cdn.webrtc-experiment.com/screen.js"></script>


Last Step: Start using it!

var screen = new Screen('screen-unique-id'); // argument is optional

// on getting local or remote streams
screen.onaddstream = function(e) {

// check pre-shared screens
// it is useful to auto-view
// or search pre-shared screens

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


Custom user-ids?

screen.userid = 'username';


Custom signaling channel?

You can use each and every signaling channel:

  1. SIP-over-WebSockets
  2. WebSocket over Node.js/PHP/etc.
  3. Socket.io over Node.js/etc.
  4. XMPP/etc.
  5. XHR-POST-ing
screen.openSignalingChannel = function(callback) {
    return io.connect().on('message', callback);

If you want to write socket.io over node.js; here is the server code:

io.sockets.on('connection', function (socket) {
    socket.on('message', function (data) {
        socket.broadcast.emit('message', data);

That's it! Isn't it easiest method ever!

Want to use Firebase for signaling?

// "chat" is your firebase id
screen.firebase = 'chat';


Want to manually join rooms?

screen.onscreen = function(_screen) {
    var li = document.createElement('li');
    li.setAttribute('user-id', _screen.userid);
    li.setAttribute('room-id', _screen.roomid);
    li.onclick = function() {
        var _screen = {
            userid: this.getAttribute('user-id'),
            roomid: this.getAttribute('room-id')

onscreen is called for each new screen; and view method allows you manually view shared screens.


Stop sharing screen



If someone leaves...

Participants' presence can be detected using onuserleft:

// if someone leaves; just remove his video
screen.onuserleft = function(userid) {
    var video = document.getElementById(userid);
    if(video) video.parentNode.removeChild(video);



It is called both for local and remote media streams. It returns:

  1. video: i.e. HTMLVideoElement object
  2. stream: i.e. MediaStream object
  3. userid: i.e. id of the user stream coming from
  4. type: i.e. type of the stream e.g. local or remote
screen.onaddstream = function(e) {


Browser Support

This WebRTC Screen Sharing experiment works fine on following web-browsers:

Browser Support
Firefox 52 or higher
Google Chrome 49 or higher
Android latest
Edge 17 or higher

Safari-11 (on MacOSX/iOS) can merely receive screens.


Enable screen capture support in getUserMedia()

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

That flag allows web pages to request access to the screen contents via the getUserMedia() API

var video_constraints = {
    mandatory: { chromeMediaSource: 'screen' },
    optional: []
    audio: false,
    video: video_constraints
}, onsuccess, onfailure);


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.


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.



WebRTC Screen Sharing is released under MIT licence . Copyright (c) Muaz Khan.