31

We're exploring WebRTC but have seen conflicting information on what is possible and supported today.

With WebRTC, is it possible to recreate a screen sharing service similar to join.me or WebEx where:

  • You can share a portion of the screen
  • You can give control to the other party
  • No downloads are necessary

Is this possible today with any of the WebRTC browsers? How about Chrome on iOS?

Crashalot
  • 33,605
  • 61
  • 269
  • 439
  • 1
    Here is a demo: WebRTC Screen Sharing: https://webrtc-experiment.appspot.com/screen-broadcast/ - also broadcasting! – Muaz Khan Jan 14 '13 at 11:20
  • 1
    Portion of screen or part of screen or region of screen sharing is possible --- see demos --- https://webrtc-experiment.appspot.com/#part-of-screen-sharing --- to try it yourself! ---- https://github.com/muaz-khan/WebRTC-Experiment/tree/master/part-of-screen-sharing#how-to-use-in-your-own-site --- though, html2canvas library is used to take snapshots of the html element and transmit them using socket.io or WebRTC datachannels. – Muaz Khan Apr 14 '13 at 13:48
  • [screen sharing demo](https://github.com/Abhi5h3k/WebRTC-PeerJs-Demo) – Abhi Dec 28 '22 at 06:31

6 Answers6

20

The chrome.tabCapture API is available for Chrome apps and extensions.

This makes it possible to capture the visible area of the tab as a stream which can be used locally or shared via RTCPeerConnection's addStream().

For more information see the WebRTC Tab Content Capture proposal.

Screensharing was initially supported for 'normal' web pages using getUserMedia with the chromeMediaSource constraint – but this has been disallowed.

EDIT 1 April 2015: Edited now that screen sharing is only supported by Chrome in Chrome apps and extensions.

Sam Dutton
  • 14,775
  • 6
  • 54
  • 64
  • Very interesting - I had missed that. In looking at it, it seems an odd thing to call out as a separate API - shouldn't that just be a part of a larger desktop sharing API? In that API, you should be able to choose specific regions or specific windows or an entire desktop to share - and choosing a specific tab should just be a part of that. Is this just a temporary experiment building up to the full screensharing API? Or is it intended to be an end in itself? – Ken Smith Nov 30 '12 at 08:55
  • 2
    This should be updated, since it does not mention that screen sharing is now disabled by default in Chrome unless you pass the "--enable-usermedia-screen-capture" on the command line when starting Chrome. – Aki Mar 30 '15 at 19:51
  • Yes, it works, but it is extremely CPU-hungry, browser becomes slow, even on poor resoultion/framerate... This is what I observed with following plugin: https://github.com/muaz-khan/Chrome-Extensions/tree/master/tabCapture – Stepan Yakovenko May 23 '16 at 11:49
8

You guys probably know that screencapture (not tabCapture ) is avaliable in Chrome Canary (26+) , We just recently published a demo at; https://screensharing.azurewebsites.net

Note that you need to run it under https:// , 

video: {
  mandatory: {
    chromeMediaSource: 'screen'   
  }

You can also find an example here; https://html5-demos.appspot.com/static/getusermedia/screenshare.html

dathor
  • 174
  • 1
  • 3
  • Hi dathor, just FYI, the demo at azurewebsites captures the screen but won't transmit to the other endpoint. It just shows the homepage. However, the official HTML5 Demo works great. +1 for that! – jamesmortensen May 06 '13 at 21:36
  • Hi, Yes, there is a new demo that you can find on http://joinaspot.com , make sure you run under a https:// context – dathor Feb 21 '14 at 10:03
  • I'm super tired, so I may have missed it, but I don't see a screen share feature? Cool demo though. Reminds me of https://bistri.com/ – jamesmortensen Feb 23 '14 at 07:26
  • Yes, when you run https:// it will give you that option... You can also pull down our free open-source lib and build it your self. Have a look at https://github.com/XSockets/WebRTC – dathor Mar 02 '14 at 07:47
  • Just FYI: most of the interesting links are gone. There no longer is a server at https://html5-demos.appspot.com/static/getusermedia/screenshare.html, I couldn't get https://html5-demos.appspot.com/static/getusermedia/screenshare.html to work with Chrome 45 even after twiddling with `about:flags` (option missing) and `--enable-usermedia-screen-capture` (doesn't work). http://joinaspot.com/ is a domain-shop. https://github.com/XSockets/WebRTC is a 404. – Peter V. Mørch Sep 16 '15 at 21:47
  • 1
    I tried this on chrome: 55 it fails with following message: PERMISSION_DENIED. Are you no SSL? Have you enabled the --enable-usermedia-screen-capture flag? I guess it is not allowed on chrome (earlier it was with version 34+) but google removed the permission itself from the chrome. – Bilbo Baggins Jan 16 '17 at 07:06
7

I know I am answering bit late, but hope it helps those who stumble upon the page if not the OP.

At this moment, both Firefox and Chrome support sharing entire screen or part of it( some application window which you can select) with the peers through WebRTC as a mediastream just like your camera/microphone feed, so no option to let other party take control of your desktop yet. Other that that, there another catch, your website has to be running on https mode and in both firefox and chrome the users are gonna have to install extensions.

You can give it a try in this Muaz Khan's Screen-sharing Demo, the page contains the required extensions too.

P. S: If you do not want to install extension to run the demo, in firefox ( no way to escape extensions in chrome), you just need to modify two flags,

  • go to about:config
  • set media.getusermedia.screensharing.enabled as true.
  • add *.webrtc-experiment.com to media.getusermedia.screensharing.allowed_domains flag.
  • refresh the demo page and click on share screen button.
mido
  • 24,198
  • 15
  • 92
  • 117
  • 1
    This screen sharing demo doesn't work any more as the screensharing option in chrome isn't there anymore – Bilbo Baggins Jan 16 '17 at 06:53
  • No need to mess about with about:config in firefox now. Screen sharing works by default in current versions of firefox. – CpnCrunch Apr 07 '17 at 03:55
6

To the best of my knowledge, it's not possible right now with any of the browsers, though the Google Chrome team has said that they're eventually intending to support this scenario (see the "Screensharing" bullet point on their roadmap); and I suspect that this means that eventually other browsers will follow, presumably with IE and Safari bringing up the tail. But all of that is probably out somewhere past February, which is when they're supposed to finalize the current WebRTC standard and ship production bits. (Hopefully Microsoft's last-minute spanner in the works doesn't screw that up.) It's possible that I've missed something recent, but I've been following the project pretty carefully, and I don't think screensharing has even made it into Chrome Canary yet, let alone dev/beta/prod. Opera is the only browser that has been keeping pace with Chrome on its WebRTC implementation (FireFox seems to be about six months behind), and I haven't seen anything from that team either about screensharing.

I've been told that there is one way to do it right now, which is to write your own webcamera driver, so that your local screen appeared to the WebRTC getUserMedia() API as just another video source. I don't know that anybody has done this - and of course, it would require installing the driver on the machine in question. By the time all is said and done, it would probably just be easier to use VNC or something along those lines.

Ken Smith
  • 20,305
  • 15
  • 100
  • 147
0
navigator.mediaDevices.getDisplayMedia(constraint).then((stream)=>{
// todo...
})

now you can do that, but Safari is different from Chrome in audio.

GiantKs
  • 23
  • 5
0

it is Possible I have worked on this and built a Demo for Screen share. During this watcher can access your mouse and Keyboard. If he moves his mouse then Your mouse also moves and if he types from his Keyboard, it will be typed into your pc.

View this code this code is for Screen share...

Right now in this days you can share screen with this, you not need any extentions.

    const getLocalScreenCaptureStream = async () => {
  try {
    const constraints = { video: { cursor: 'always' }, audio: false };
    const screenCaptureStream = await navigator.mediaDevices.getDisplayMedia(constraints);

    return screenCaptureStream;
  } catch (error) {
    console.error('failed to get local screen', error);
  }
};
Naju Bhadarka
  • 49
  • 5