Peerjs: Screen sharing

Created on 24 Oct 2013  ·  12Comments  ·  Source: peers/peerjs

Any plans for adding screen sharing?

Example: https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/

Most helpful comment

For those looking for Screen Sharing, as said above, you need to use a MediaStream in the same way as what you would do for call.

The way to get the MediaStream for screen sharing is:

let screenStream = await navigator.mediaDevices.getDisplayMedia({
    video: true
});

Then simply:

peer.call(remote_peer_key, screenStream);

Hope this saves you 5 minutes ;)

All 12 comments

PeerJS takes in an arbitrary stream when calling peer.call. To screen
share, you just need to get a screen sharing stream from getUserMedia
instead of a webcam video stream. PeerJS doesn't differentiate when you
call another Peer. Note that screen sharing requires your site be on HTTPS.

So it should already work.

Eric

On Thu, Oct 24, 2013 at 8:52 AM, kenianbei [email protected] wrote:

Any plans for adding screen sharing?

Example: https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/


Reply to this email directly or view it on GitHubhttps://github.com/peers/peerjs/issues/96
.

510-691-3951
http://ericzhang.com

Give it a try and if you run into trouble please reopen the issue and I'll fix it

On Fri, Oct 25, 2013 at 10:41 AM, Eric Zhang really.[email protected] wrote:

PeerJS takes in an arbitrary stream when calling peer.call. To screen
share, you just need to get a screen sharing stream from getUserMedia
instead of a webcam video stream. PeerJS doesn't differentiate when you
call another Peer. Note that screen sharing requires your site be on HTTPS.

So it should already work.

Eric

On Thu, Oct 24, 2013 at 8:52 AM, kenianbei [email protected]:

Any plans for adding screen sharing?

Example: https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/


Reply to this email directly or view it on GitHubhttps://github.com/peers/peerjs/issues/96
.

510-691-3951
http://ericzhang.com

510-691-3951
http://ericzhang.com

I hadn't done my research on how screen sharing works, will test it out. Thanks for all your work... you guys are awesome!

Hello, can u please help me to integrate screen sharing on PeerJS.

For those looking for Screen Sharing, as said above, you need to use a MediaStream in the same way as what you would do for call.

The way to get the MediaStream for screen sharing is:

let screenStream = await navigator.mediaDevices.getDisplayMedia({
    video: true
});

Then simply:

peer.call(remote_peer_key, screenStream);

Hope this saves you 5 minutes ;)

For those looking for Screen Sharing, as said above, you need to use a MediaStream in the same way as what you would do for call.

The way to get the MediaStream for screen sharing is:

let screenStream = await navigator.mediaDevices.getDisplayMedia({
    video: true
});

Then simply:

peer.call(remote_peer_key, screenStream);

Hope this saves you 5 minutes ;)

could you please provide source code for screen sharing in peerjs?
thans in advance

Sorry I don't have time to provide a minimal working example for screen sharing.
But if you take any working example of video call and replace the stream as shown above, it will work.

@theevann maybe my code will help you

I'm using in my project and it's working

constructor() {
    this.peer = new Peer();
    this.peer.on('open', (id) => {
      this.id = id;
    });
    this.peer.on('call', (call) => {
      call.answer();
      call.on('stream', (remoteStream) => {
        this.videoElementRef.nativeElement.srcObject = remoteStream;
      });
    });
  }

  public async buttonHandler(evento: Event, remotoId: string): Promise<void> {
    evento.preventDefault();
    const stream = await (navigator.mediaDevices as MyMediaDevices).getDisplayMedia(
      {
        video: { frameRate: 5, width: 1280, height: 720 },
      }
    );
    const call = this.peer.call(remotoId, stream);
  }

@venkpath peer.call(remote_peer_key, screenStream);
this worked but when screenshare is ended then also on other user side that video frame is not removed .. how to remove that video element after screenshare is ended

@saini3911
Maybe listen to the "close" event on the stream and remove your video tag then ?
https://peerjs.com/docs.html#mediaconnection-on

i use that to but it remove original user face media also

i have made my project in expressjs and preerjs .. after other user connect to room why media stream is not connect .. like i other user have to refresh their tab 3-4 time to get media stream in peerjs why ?

Was this page helpful?
0 / 5 - 0 ratings