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) {
    document.body.appendChild(e.video);
};

// 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();
};

=

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')
        };
        screen.view(_screen);
    };
};

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

=

Stop sharing screen

screen.leave();

=

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);
};

=

onaddstream

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) {
    document.body.appendChild(e.video);
};

=

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: []
};
navigator.webkitGetUserMedia({
    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.

=

License

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