Screen sharing

[kenianbei]

Any plans for adding screen sharing?

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

[ericz]

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 notifications@github.com 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//issues/96
.

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

[ericz]

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.ez@gmail.com 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 notifications@github.comwrote:

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//issues/96
.

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

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

[kenianbei]

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

[SivaShhankar]

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

[theevann]

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

[venkpath]

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

[theevann]

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.

[wzuqui]

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

[saini3911]

@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

[theevann]

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

[saini3911]

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

[saini3911]

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 ?

[Jinoy-Varghese]

I too have this problem, this is my code

`const socket = io('/')
const videoGrid = document.getElementById('video-grid')
const myPeer = new Peer(undefined, {
host: '/',
port: '3001'
})
//code 1
let myVideoStream;
const myVideo = document.createElement('video')
myVideo.muted = true
const peers = {}
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
}).then(stream => {
myVideoStream = stream;
addVideoStream(myVideo, stream)

myPeer.on('call', call => {
call.answer(stream)
const video = document.createElement('video')
call.on('stream', userVideoStream => {
addVideoStream(video, userVideoStream)
})
})

socket.on('user-connected', userId => {
connectToNewUser(userId, stream)
})
})

socket.on('user-disconnected', userId => {
if (peers[userId]) peers[userId].close()
})

myPeer.on('open', id => {
socket.emit('join-room', ROOM_ID, id)
})

function connectToNewUser(userId, stream) {
const call = myPeer.call(userId, stream)
const video = document.createElement('video')
call.on('stream', userVideoStream => {
addVideoStream(video, userVideoStream)
})
call.on('close', () => {
video.remove()
})

peers[userId] = call
}

function addVideoStream(video, stream) {
video.srcObject = stream
video.addEventListener('loadedmetadata', () => {
video.play()
})
videoGrid.append(video)
}

//new code

const muteUnmute = () => {
const enabled = myVideoStream.getAudioTracks()[0].enabled;
if (enabled) {
myVideoStream.getAudioTracks()[0].enabled = false;
setUnmuteButton();
} else {
setMuteButton();
myVideoStream.getAudioTracks()[0].enabled = true;
}
}

const playStop = () => {
console.log('object')
let enabled = myVideoStream.getVideoTracks()[0].enabled;
if (enabled) {
myVideoStream.getVideoTracks()[0].enabled = false;
setPlayVideo()
} else {
setStopVideo()
myVideoStream.getVideoTracks()[0].enabled = true;
}
}

const setMuteButton = () => {
const html = <i class="fas fa-microphone"></i> <span>Mute</span>
document.querySelector('.main__mute_button').innerHTML = html;
}

const setUnmuteButton = () => {
const html = <i class="unmute fas fa-microphone-slash"></i> <span>Unmute</span>
document.querySelector('.main__mute_button').innerHTML = html;
}

const setStopVideo = () => {
const html = <i class="fas fa-video"></i> <span>Stop Video</span>
document.querySelector('.main__video_button').innerHTML = html;
}

const setPlayVideo = () => {
const html = <i class="stop fas fa-video-slash"></i> <span>Play Video</span>
document.querySelector('.main__video_button').innerHTML = html;
}

`

I can't stream my screen with peerjs but video cam streaming is working properly

[MikePooh]

I have the same problem.

const myPeer = new Peer()

navigator.mediaDevices.getUserMedia({
  video: true,
  audio: false
}).then(stream => {
  addVideoStream(myVideo, stream);

  myPeer.on('call', call => {
    console.log("on call")
    call.answer(stream)
  });
});

Works fine and as expected

navigator.mediaDevices.getDisplayMedia({
  video: true,
  audio: false
}).then(stream => {
  addVideoStream(myVideo, stream);

  myPeer.on('call', call => {
    console.log("on call")
    call.answer(stream)
  });
});

works wrong - "on.call" never called

I thought that problem might be in https, but not. Https test didn't help.

[kjohnson]

I was able to piece together a screen share app referencing the following:

• Screen sharing #96
• Screen Sharing patil-vipul/VideoCall_PeerJS#2 (comment)
• One Way Streaming #739 (comment)

I baked it into a Laravel project (using Livewire), but here is the template:

<div class="relative pt-28">

    <x-jet-button id="share" class="absolute z-10 top-8 right-12" onclick="share()">Share</x-jet-button>

    @foreach( $teamUsers as $user)
        <button onclick="watch('{{ $team->id . '-' . $user->id }}')">
            <img class="h-10 w-10 rounded-full object-cover" src="{{ $user->profile_photo_url }}" alt="{{ $user->name }}">
        </button>
    @endforeach

    <!-- Local Video Element-->
    <video id="local-video" class="absolute top-0 right-0 w-48"></video>

    <!-- Remote Video Element-->
    <video id="remote-video" class="m-auto" style="width: 800px;" poster="https://thumbs.dreamstime.com/b/no-signal-screen-everything-plugged-tv-no-tv-signal-broadcast-screen-124890412.jpg"></video>

    <style>
        video {
            background-color: lightgray;
        }
    </style>

    @push('scripts')
        <script src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>
        <script>
            let peerID;
            let screenShare;
            const peer = new Peer('{{ $team->id . '-' . $peerID }}');

            peer.on('open', function(id) {
                console.log('My peer ID is: ' + id);
                peerID = id
            });

            peer.on('call', (call) => {
                console.log( 'CALL' )
                call.answer( screenShare );
            })

            function share() {
                navigator.mediaDevices.getDisplayMedia({ video: true }).then((stream) => {
                    screenShare = stream
                    let video = document.getElementById("local-video");
                    video.srcObject = stream;
                    video.play()
                    @this.stream()
                })
            }

            function watch( remoteID ) {
                console.log( remoteID )

                // A stream is required to start a call, so call with an empty stream
                // This allows the call to be answered with the screen share.
                const videoTrack = createEmptyVideoTrack({ width: 500, height: 500 })
                const mediaStream = new MediaStream([ videoTrack ]);
                const call = peer.call(remoteID, mediaStream);

                // `stream` is the MediaStream of the remote peer.
                // Here you'd add it to an HTML video/canvas element.
                call.on('stream', function(stream) {
                    console.log( 'STREAM', stream )
                    let video = document.getElementById("remote-video");
                    video.srcObject = stream;
                    video.play();
                });
            }

            function createEmptyVideoTrack({ width, height }) {
                const canvas = Object.assign(document.createElement('canvas'), { width, height });
                canvas.getContext('2d').fillRect(0, 0, width, height);

                const stream = canvas.captureStream();
                const track = stream.getVideoTracks()[0];

                return Object.assign(track, { enabled: false });
            }

        </script>
    @endpush
</div>