CleverProgrammers / nodejs-zoom-clone

848 stars 483 forks source link

HOW CAN WE ADD SCREEN SHARING OPTION ?? #7

Open PRANEETH-REDDY-23899 opened 4 years ago

PRANEETH-REDDY-23899 commented 4 years ago

can you please let me knew how can i add a screen sharing option to it

idsus commented 4 years ago

I need same help I will support this question so people see it.

Pratik-Hub commented 4 years ago

Guys I am creating my own Video Chat App but not using this I have used react and etc... If you want to include share screen in this wonder project of Zoom-Clone then You may use my API and do it!. I will release it in few weeks!!!!

Is That Cool!!! 😎😎😎

micaiah-effiong commented 4 years ago

Also have it in mind the mobile browsers don't support screen sharing

Pratik-Hub commented 4 years ago

Also have it in mind the mobile browsers don't support screen sharing

It does works Man

Maybe I am wrong. If yes please forgive me. I am testing my API and it's working correctly in all devices including screenshare in mobile

ChandanRabha commented 4 years ago

Yes please i have been trying to find sources where screen sharing is possible. I even tried changing the mediastream of my webcam video stream to screen share video stream but it then the screen on peer side just freezes as soon as i changed the video stream. Would really be big help if someone finds a way. Thank You

pankajjossy1 commented 4 years ago

Guys I am creating my own Video Chat App but not using this I have used react and etc... If you want to include share screen in this wonder project of Zoom-Clone then You may use my API and do it!. I will release it in few weeks!!!!

Is That Cool!!! 😎😎😎

how pls tell how can i add screen share

ChitrangSharma commented 4 years ago

For all of you guys, who want to integrate Screen-Sharing option in the project . you can get what you want to build here in this channel link below.. https://youtu.be/X8QHHB7DA90 I hope it will help you

ChitrangSharma commented 4 years ago

Guys I am creating my own Video Chat App but not using this I have used react and etc... If you want to include share screen in this wonder project of Zoom-Clone then You may use my API and do it!. I will release it in few weeks!!!! Is That Cool!!! 😎😎😎

how pls tell how can i add screen share

well if you want to make it, super quick I have given a link there , okay let me paste the link here as well https://youtu.be/X8QHHB7DA90 in this video you will get how to make screen sharing possible in this application .Thanks.

Boopalan-M commented 4 years ago

can you please let me knew how can i add a screen sharing option to it

i also having that question.Are u acheived that one

ttejas123 commented 4 years ago

I added screenShare via replacing video stream with screen share. and user who started screen share == can't see screen share other user connected == can see screen share; for that I use this code down below

`//IN HTML //add button //IN JS FILE //screenShare const screenshare = () =>{ navigator.mediaDevices.getDisplayMedia({ video:{ cursor:'always' }, audio:{ echoCancellation:true, noiseSupprission:true }

}).then(stream =>{ let videoTrack = stream.getVideoTracks()[0]; videoTrack.onended = function(){ stopScreenShare(); } for (let x=0;x<currentPeer.length;x++){

   let sender = currentPeer[x].getSenders().find(function(s){  //replace video track 
      return s.track.kind == videoTrack.kind;
    })

    sender.replaceTrack(videoTrack);

} })

}

function stopScreenShare(){ let videoTrack = myVideoStream.getVideoTracks()[0]; for (let x=0;x<currentPeer.length;x++){ let sender = currentPeer[x].getSenders().find(function(s){ return s.track.kind == videoTrack.kind; }) sender.replaceTrack(videoTrack); } }`

Boopalan-M commented 4 years ago

I added screenShare via replacing video stream with screen share. and user who started screen share == can't see screen share other user connected == can see screen share; for that I use this code down below

`//IN HTML //add button //IN JS FILE //screenShare const screenshare = () =>{ navigator.mediaDevices.getDisplayMedia({ video:{ cursor:'always' }, audio:{ echoCancellation:true, noiseSupprission:true }

}).then(stream =>{ let videoTrack = stream.getVideoTracks()[0]; videoTrack.onended = function(){ stopScreenShare(); } for (let x=0;x<currentPeer.length;x++){

   let sender = currentPeer[x].getSenders().find(function(s){  //replace video track 
      return s.track.kind == videoTrack.kind;
    })

    sender.replaceTrack(videoTrack);

} })

}

function stopScreenShare(){ let videoTrack = myVideoStream.getVideoTracks()[0]; for (let x=0;x<currentPeer.length;x++){ let sender = currentPeer[x].getSenders().find(function(s){ return s.track.kind == videoTrack.kind; }) sender.replaceTrack(videoTrack); } }`

i use this code i didn't get any error. but the screen is not visible to others..

idsus commented 4 years ago

Thanks!

anujmittal2308 commented 2 years ago

https://stackoverflow.com/questions/72003682/cant-fix-expresspeerserver-is-not-a-function-in-server-js