WebRTC Screen Sharing

HOME © Muaz Khan . @WebRTCWeb . Github . Latest issues . What's New?

Its a full-HD (1080p) screen sharing application using WebRTC!

Private ?? #123456789

Prerequisites

  1. Chrome? Store / Source Code /
  2. Firefox? Please use version 52 or higher. Also use HTTPs.
  3. Edge? Please use version 17 or higher. Also use HTTPs.
  4. Safari? Please use version 11 (on Mac or iphone/ipad). However Safari can merely view screens. Safari can not share its own screen.

Advantages

  1. Share full screen with one or more users in HD format!
  2. Share screen from chrome and view over all WebRTC compatible browsers/plugins.
  3. You can open private rooms and it will be really "totally" private!

    1. Use hashes to open private rooms: #private-room
    2. Use URL parameters to open private rooms: ?private=room

Common issues & queries

  1. Recursive cascade images or blurred screen experiences occur only when you try to share screen between two tabs on the same system. This NEVER happens when sharing between unique systems or devices.
  2. Opera/IE/Safari has no support of screen-capturing yet. However, you can view shared screens on Opera/IE/Safari!
  3. Remember, it is not desktop sharing! It is just a state-less screen sharing. Desktop sharing is possible only through native (C++) applications.

Why Screen Sharing Fails?

  1. You've not used 'chromeMediaSource' or 'mediaSource' constraint: 
    // for chrome
mandatory: {chromeMediaSource: 'screen'}
// or desktop-Capturing
mandatory: {chromeMediaSource: 'desktop'}

// for Firefox (https-only)
video: {
    mediaSource: 'window' || 'screen'
}

// for Edge >= 17 (https-only)
navigator.getDisplayMedia({
    video: true
}).then(successCallback, errorCallback);
  2. On chrome, you requested audio-stream alongwith 'chromeMediaSource' – it is not permitted on chrome. Remember, Firefox is supporting audio+screen from single getUserMedia request.
  3. On chrome, you're not testing it on SSL origin (HTTPS domain) otherwise you didn't enable --allow-http-screen-capture command-line flag on canary. Firefox is supporting screen capturing from both HTTP and HTTPs domains.
  4. You may used media constraints like min/max frameRate; bandwidth or min/max width/height like 2000*2000 that is "currently" not allowed.

How to use screen.js?

<script src="//www.webrtc-experiment.com/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();

Suggestions

  1. RTCMultiConnection.js can be used for HD screen sharing; HD audio/video streaming; fastest file sharing; and writing entire skype-like app in the browser!