WebRTC Screen Sharing Tutorial

Рет қаралды 45,286

Күн бұрын

In this webrtc screen sharing tutorial, I demonstrate how simple it is to use webrtc to share your screen with another person in a video chat.
Be sure to like the video, and subscribe to the channel so you catch the weekly uploads!
-HIRE ME AS A MENTOR-
If you would like to hire me as a 1 on 1 mentor you can do so by following this link!
codingwithchaim.dev/
Here is the best part.... You only pay for the session if you are completely satisfied!!
So book a session and level up your web development skills today!
Follow me on twitter to submit questions: / codingwithchaim
Native webrtc video chat: • WebRTC Tutorial | Vide...
Starter files: github.com/coding-with-chaim/...
Final code: github.com/coding-with-chaim/...
If you would like to schedule a mock interview with me, you can email me at
codingwithchaim@gmail.com for price and details.
Follow me on Twitter: / codingwithchaim
Subscribe to the channel: kzfaq.info...
--SUPPORT THE CHANNEL--
If you would like to support the channel you can use the below link.
I would like to stress that while it would be greatly appreciated, in no way is this required!
link: paypal.me/codingwithchaim

Пікірлер: 172

@AiykEkwe 3 жыл бұрын

this is great content, just awesome! noticed you also have a tutorial on the mesh network architecture but never covered how data channel and screen share can be implemented in a group video chat. would be really helpful if u put out a tutorial covering this. Thanks for being awesome.

@dahliaspumpski5837 3 жыл бұрын

I need to make a screen sharing video chat web app for an interview assignment I have and you’ve just helped me immensely. Can’t explain how grateful I am, thank you! 🙌🏻

@CodingWithChaim 3 жыл бұрын

You are most welcome! Good luck with the interview!

@dahliaspumpski5837 3 жыл бұрын

Coding With Chaim thanks again for your help! I managed to get enough of an understanding of webrtc to progress to a further interview as the employers entire project revolves around using it. I used a combo of this vid, the one on just a peer to peer video call and your tutorial on deploying the app and they went through the entire process amazingly well. Thank you again!

@CodingWithChaim 3 жыл бұрын

@@dahliaspumpski5837 I am so glad to hear that! This comment made my day!

@brootledev5162 Жыл бұрын

great video, still works out of the box in 2022 👍

@rks5762 4 жыл бұрын

It's awesome video. You explained it perfectly. Keep it up. Good Luck

@manny_p 3 жыл бұрын

Dude your content is 🔥, when is a webRTC official tutorial? Ha take my money! Also, be cool to see this on next.js too!

@kprakash8504 4 жыл бұрын

Hey Chaim, I love your videos and the explanations you give!💙 Big fan! Cheers..

@CodingWithChaim 4 жыл бұрын

Thank you so much 😀

@shivanichaudhari4479 3 жыл бұрын

Your tutorial is great

@grafsoul 4 жыл бұрын

Thank you for the video, a useful feature. I am looking forward to a video about publishing the project on free hosting

@mydisk2859 3 жыл бұрын

How about glitch.com ?

@tacostwowheels4934 4 жыл бұрын

Interesting stuff!

@aksharajagtap691 3 жыл бұрын

Thank You for the great tutorial. Best teacher on KZfaq I've ever come across. Can you make a tutorial on WebRTC video and screen sharing using vue.js?

@CodingWithChaim 3 жыл бұрын

Thank you!! I can certainly try 😀

@aksharajagtap691 3 жыл бұрын

@@CodingWithChaim Thanks....Can't wait for it. :)

@ikibkilam8383 3 жыл бұрын

Very cool, again! I am running out of positive adjectives for your channel!

@CodingWithChaim 3 жыл бұрын

I don’t mind repeats haha

@invysible 2 жыл бұрын

great video!! but can we start sharing screen for a specific web page without opening dialog box?

@sebastiansantiago6452 2 жыл бұрын

Hi, I have been following your videos for some time. I am able to build an app with you easy to understand tutorial. One thing about this screen Sharing tutorial, how do we also get same screen sharing stream played on initiator's device as well which is passed on to other user. Because after I followed this tutorial it looks like initiator device still keep playing old stream. It should've been nice if initiator can also see what he/she is sharing. I tried but no luck so far. Looking to hear from you.

@ramboucy 3 жыл бұрын

For those who experiences replaceTrack is undefined error when the first peer tries to share its screen: You can simply change this line inside handleRecieveCall: userStream.current.getTracks().forEach(track => peerRef.current.addTrack(track, userStream.current)); TO this -> userStream.current.getTracks().forEach(track => senders.current.push(peerRef.current.addTrack(track, userStream.current)));

@ebenezersiaw935 4 жыл бұрын

Nice

@deepakumari1858 3 жыл бұрын

Hey Chaim, Can you please make a screen sharing tutorial for the group video chat as well !

@CodingWithChaim 3 жыл бұрын

Very possible

@deepakumari1858 3 жыл бұрын

@@CodingWithChaim Thanks!! Looking forward to it.

@alisalimli 3 жыл бұрын

@@CodingWithChaim that can be great

@BotyE 4 жыл бұрын

Thank you for the video. Can you make a video of how to make a website similar to whereby? That would be very interesting.

@CodingWithChaim 4 жыл бұрын

At the moment, I do not have one video which includes all the video conference features in one place, but I have videos which cover some of those features as separate topics. Here is playlist of videos about webrtc I have created over the past few months. Topics include, 1 on 1 video call, group call, file sharing and screen sharing. kzfaq.info/get/bejne/eNZ-ab2oq9DGc40.html

@BotyE 4 жыл бұрын

@@CodingWithChaim Yes, I have already watched these videos. I just started learning webrtc and react so it's hard to understand. But thanks for your videos. And, if I may, one more question. How can you make a separate room with a webcam so that anyone who inserts a link to a room in obs or another streaming program can get data from the site, or rather a webcam.

@blightning1476 3 жыл бұрын

Very cool. Would it be possible to share the computer audio aswell? And if yes, would it be possible to send the microphone audio on top of that? 🤔

@CodingWithChaim 3 жыл бұрын

You absolutely can share audio, and you use any mic you have as an input device on your machine.

@himanshu081 3 жыл бұрын

Hi Chaim, I am continually working on WebRTC Screen sharing since May 2020, but unfortunately no luck. I went through with most of the videos built by you and others available on KZfaq. No idea what's wrong at my end. I really appreciate it from the bottom If you could help me to run my application, please. Please help me with this. I will be thankful to you. Regards.

@thedrenkemp124 3 жыл бұрын

I really wish you had this for swiftui

@jagdishpal6560 3 жыл бұрын

Your tutorial is awesome. but i need some thing advance. is there any way to share screen with video stream also?

@adwaithc4732 3 ай бұрын

i also need

@nguyenbatunglam209 3 жыл бұрын

thank you for a priceless video and instruction

@CodingWithChaim 3 жыл бұрын

Great suggestion! Will likely get to this in the nearish future!

@muhammadaqib2970 3 жыл бұрын

Error occurs when we tried to share screen from the first browser which says "Unhandled Rejection (TypeError): Cannot read property 'replaceTrack' of undefined". While the second person shares the screen perfectly, please solve this issue

@siddheshb.kukade4685 3 жыл бұрын

Did you find the solution ? ?

@achalpaliwal531 2 жыл бұрын

Hey Will it work if I host this project live on the domain beacause i am having problem peer's screen is not visible ??

@saumyasah9800 3 жыл бұрын

Hello sir, thank you so much for this playlist,, it is helping me a lot in my projects.. One sincere request sir, could you please explain me how do I add a Mute feature or camera off feature to this code? I have tried doing senders.current.getAudioTracks()[0].enabled=!senders.current.getAudioTracks()[0].enabled; inside the mute function, but react shows me that the getaudiotracks property of the null object is not readable. Please tell me how should I approach this problem Thank you! Waiting for your reply

@dhrubajyotisinharay1813 3 жыл бұрын

hi I want to separate b/w to stream uring screen sharing and display it to different sections one will be screen sharing and another will be the video of shearing participant, how can I o that

@YASHGARUDKAR 4 жыл бұрын

Hey Chaim, I love your videos. Can you please make a video on mediasoup for node Cheers!

@CodingWithChaim 4 жыл бұрын

I would love to. Tho it make take me a while to get around to it because I still need to learn it myself.

@YASHGARUDKAR 4 жыл бұрын

@@CodingWithChaim Thanks for the work you put in sir :-)

@joseisraeldiazzapata5179 2 жыл бұрын

thank you so much sir, my question is How is it possible share a chrome tab with audio and not have conflicts with the existing audio of the mic

@vaibhavkanmeriya5515 Ай бұрын

Did you find any solution for that?

@VrlHtzz 3 жыл бұрын

Sir as you talked about doing inversion How actually I can start with sharing with screen and make video sharing as option If anyone can help me this world means a lot to me thank you.

@summerwinter634 2 жыл бұрын

Hello Chaim, Have you ever solved this error: unhandled Rejection (TypeError): Cannot read property 'replaceTrack' of undefined ? Share screen is not working with this error after choosing a screen. Kindly help, thanks

@TheNineTom 6 ай бұрын

Great sharing. However, I have a comment. I prefer to see the quick demonstration of final code first before go to see the code because it might be great to understand on what do you want to sharing.

@amansharma01 3 жыл бұрын

hey, I am getting an error after I click on share button which is :- Unhandled Rejection (TypeError): Cannot read property 'replaceTrack' of undefined. can you please help

@pablobinotto4424 3 жыл бұрын

I get the error 'Invalid Host header' on browser. Do you know how to fix this error?

@jestinsaji5023 9 ай бұрын

how can i implement this screen sharing in my project in ios swift UIKit build a project using webrtc videoconference i need to implement screen sharing too

@satyasuravaram2207 3 жыл бұрын

Hi, thank you for the video! One question, I am wondering how to implement the screensharing if we already have videochat set up with simple-peer instead of RTCPeerConnection, such as in your other video on 1-to-1 video chat using simple peer. Do I have to revert from simple peer to RTCPeerConnection in order to have screen share capability? Thank you

@CodingWithChaim 3 жыл бұрын

I think technically it’s supposed to work with simple peer but I could not manage. This is why I used native webrtc here.

@naveenaannavaram7058 3 жыл бұрын

@@CodingWithChaim Hi, I too tried to implement screen sharing with simple-peer. But I could not able to manage. Do you know what's the problem with simple-peer?. and another thing is can we use addTrack instead of replaceTrack.

@SomikDattaswag 3 жыл бұрын

@@CodingWithChaim I've got it to work with simple-peer. If you would like to see the source code, I could share it with you. :)

@arijitkundu 3 жыл бұрын

@@SomikDattaswag Hi ! Actually I also want to use simple peer, can you help me with sharing the source code

@bobgills9725 3 жыл бұрын

Somik Datta Hi could you share your code for how you got the screen sharing to work with simple peer? My email is srs9055@gmail.com. Thank you

@shahnawazraza8355 4 жыл бұрын

Hello chaim, Which open source media server will be use if i want to make many to many video conferencing app? Supose that in one meeting 100 people can join. Where data can be less use.

@CodingWithChaim 4 жыл бұрын

Personally, I would look into mediaSoup. mediasoup.org/ At some point in the future I would love to make a tutorial on this, but the docs are very intense lol

@shahnawazraza8355 4 жыл бұрын

@@CodingWithChaim now i am using mediasoup in my project. But it takes too much data.

@AnkitKumar-ft5yu 2 жыл бұрын

What about taking control, is it possible in an webapp?

@sumit07gupta 3 жыл бұрын

Hey Chaim, Thank you for your videos. I was building a demo app using simple-peer. You videos helped me a lot to include group video call along with screen share. I am stuck on one use case. If there is no camera on 1 machine, I am not able to share screen to/from that machine. It is happening because no video stream exists so replaceStream function cannot be used. I tried with addStream also, but it is triggering new Peer addition on the remote user. So no luck in doing screen sharing for no camera case.

@sumit07gupta 3 жыл бұрын

Basically, I want to create a dummy track having user photo on main stream as we start the chat. the dummy track will be replaced with display screen when we screen share.

@CodingWithChaim 3 жыл бұрын

Sumit Gupta interesting problem. I might mess around and see if I can figure out how to solve this. If you solve please let me know I’m curious

@sumit07gupta 3 жыл бұрын

@@CodingWithChaim It is crazy. I used 2 laptops for this problem. If I enter room with only Audio and other remote user enter later. They are able to talk and see 2nd user. 2nd user can share screen too. But only audio user cannot share screen. If audio/video user joins before only audio user. It messes up again. Main issues, somehow some kind transceiverRequest events are emitted and I am in some kind of loop. Actually AddPeer is called multiple times if we addTrack at a later time after connection is established. I know most of it doesn not make sense. So trying to make sense of it somehow. And: I am using 2 buttons to join room, so that one or both client can join room with audio only. Thanks

@sumit07gupta 3 жыл бұрын

This may help. I will also try this suggestion: stackoverflow.com/questions/31165316/webrtc-renegotiate-the-peer-connection-to-switch-streams

@sumit07gupta 3 жыл бұрын

Sorry, let me update my questions: 1. Screen sharing issue for non camera machine. 2. Only audio call for non camera machine and other users video should be visible while talking. I was expecting this to work normally. But in this case also, it seems some kind of re-negotiation is happening. I am still on it. Will update my results/solution if found any.

@simonweinmann3294 3 жыл бұрын

Poor man, now you actually have to make a 5k special haha

@streamhilton1931 6 ай бұрын

Can we use this to create an react native app

@radoonhadoon 3 жыл бұрын

hey man, i just wanted to ask you a little question, can i attach this feature into my already built video chat app(that i built using react js) by only using the two functions you described in this video. If i can , that's actually very cool man, please reply ASAP!

@testtask2649 3 жыл бұрын

any way to connect android app and a web browser using webrtc?

@skydivey 3 жыл бұрын

יהודי נכון? תודה רבה לך אחי עזרת לי ממש.

@CodingWithChaim 3 жыл бұрын

I am so glad you found the video helpful!

@utopiavr_iwg Жыл бұрын

have you ever linked this code to unity webrtc?

@mackynikat8833 2 жыл бұрын

. boss does this one working on mobile devices ?

@AliRaza-iv7dt 2 жыл бұрын

I want to send screen stream and webcam also and send both using same peer how I do it... ???????????

@grafsoul 3 жыл бұрын

Hi, thanks again for the video! Faced with a problem, the screen can only be provided by the person who sent the link to communicate, if the screen is provided by the person who invited to the conversation, an error occurs-the array 'senders.current' is empty. Whether this problem can be solved. Thank you in advance for your answer!

@CodingWithChaim 3 жыл бұрын

Are you using my final code as is? Or is this happening in your own code?

@grafsoul 3 жыл бұрын

@@CodingWithChaim in your final code on github. Here is the error that occurs - tinyurl.com/yyw6j3zy

@grafsoul 3 жыл бұрын

@@CodingWithChaim I tested the code in Chrome - 84.0.4147.89

@SomikDattaswag 3 жыл бұрын

@@CodingWithChaim I've been able to reproduce this as well. Any ideas how to go about fixing this?

@abhiramir9766 3 жыл бұрын

did you find the solution?

@snehasingh7334 3 жыл бұрын

Cannot find module '../build/Release/wrtc.node' I don't know why?😕

@anandang5211 3 жыл бұрын

How to use Webrtc stats api in the application?

@SupertigerDev 3 жыл бұрын

If im not mistaken, this topology reveals everyones IP addresses making it not safe? Could you show us how to do this using the SFU topology (discord uses) to make this more safe please. I am looking for a tutorial to do this but i just cant find it and all the documentation for it is confusing 😭

@CodingWithChaim 3 жыл бұрын

I would love to! the problem is that SFU is still very confusing to me as well!

@coderkumar 3 жыл бұрын

Hey Chaim I am getting an error when i am opening localhost:8000 The page is just saying Cannot Get / Can you please tell me how can i resolve this error?

@CodingWithChaim 3 жыл бұрын

You need to have a terminal tab open in the root of the project and run the command node server.js and then in a second terminal navigate into the client folder and run the start command.

@coderkumar 3 жыл бұрын

@@CodingWithChaim Hey now i am getting this error Unhandle Rejection (TypeError):Can not read property 'replaceTrack' of undefined

@hendrikkus2000 3 жыл бұрын

Not worked on Mobile Device. When try to share screen, we have error notification "GetDisplayMedia()". Maybe WebRTC not compatible with mobile device when use Screen Sharing. Thanks you.

@abhinavchauhan128 3 жыл бұрын

2 days before I cloned your final code. It was working fine, Today suddenly non of the feature is working. can you please help me with it?

@ShubhamKumar-ur1vm 3 жыл бұрын

bro did you find a solution?

@abhinavchauhan128 3 жыл бұрын

@@ShubhamKumar-ur1vm no not yet, still searching

@3djava560 3 жыл бұрын

hi, how can I use in internet, this only works in lan

@radrenVideos 3 жыл бұрын

does this works on 3rd users, 4th users, etc? when i start sharescreen it only share between the user who shared it AND the last connected user.., example if there are 4 users in room then 1st user share screen, the only one seeing it would be only user 4th

@CodingWithChaim 3 жыл бұрын

It should work, but you would need to make sure all other users get notified of the stream change

@radrenVideos 3 жыл бұрын

@@CodingWithChaim I'll explore it, thanks!

@michaeljohn2969 3 жыл бұрын

Hello.. the screen sharing is not working in mobile.. why is that issue.

@eqisoftcom 3 жыл бұрын

Do I need to renegotiate the connection to fire "track" event on the other side? My ontrack handler is not evoked when I replaceTrack :-(.

@CodingWithChaim 3 жыл бұрын

It should happen automatically

@eqisoftcom 3 жыл бұрын

@@CodingWithChaim Thanks for the reply. I've noticed it's in your onnegotiationneeded handler (that is triggered by addTrack, and hopefully by replaceTrack as well).

@nural-islam1632 Жыл бұрын

please make in flutter

@guiga3203 3 жыл бұрын

First, thanks for the video, in second i want to ask if this is p2p or multi?

@CodingWithChaim 3 жыл бұрын

This particular video is p2p tho can be made to work with multi user

@guiga3203 3 жыл бұрын

@@CodingWithChaim How?

@kobypaull9168 3 жыл бұрын

@@guiga3203 Exactly

@SonuRaj-er1hn 3 жыл бұрын

How to make screen sharing using django and pythons

@dustinpoissant 3 жыл бұрын

Pretty much

@TyrboCreed 3 жыл бұрын

Faced with "Cannot read property 'replaceTrack' of undefined" error in different environments. Pls, help.

@moasjf 3 жыл бұрын

same here

@satyasuravaram2207 3 жыл бұрын

Hi Chaim, I tested your final code from github but am getting an error. Only the person who joins the room second is able to screen share to the first person. When the first person tries to screen share to the second person then there is an error. Unhandled Rejection (TypeError): Cannot read property 'replaceTrack' of undefined > senders.current.find(sender => sender.track.kind === 'video').replaceTrack(screenTrack); Do you know if there is a way to fix this? Thank you so much.

@CodingWithChaim 3 жыл бұрын

I have been able to reproduce this for myself as well. Currently investigating it, will push a fix to my final code when I have one

@toocoolbroyeah 3 жыл бұрын

@@CodingWithChaim status on this?

@CodingWithChaim 3 жыл бұрын

@@toocoolbroyeah See this github.com/coding-with-chaim/webrtc-screen-share/issues/1

@toocoolbroyeah 3 жыл бұрын

@@CodingWithChaim Thank you, it worked. Love your videos keep it up :)

@namanaggarwal8618 3 жыл бұрын

I am getting following error unhandled Rejection (TypeError): Cannot read property 'replaceTrack' of undefined I first cloned your startter files, then copied what you taught. Please help!!

@CodingWithChaim 3 жыл бұрын

I have been able to reproduce this issue for myself as well. Currently investigating and will push a fix to my final code when I have one

@arijitkundu 3 жыл бұрын

@@CodingWithChaim Were you able to solve the issue??

@seriseyes 3 жыл бұрын

pls fix

@snehasingh7334 3 жыл бұрын

@@CodingWithChaim Please can you share that code?

@jithamanyu9059 4 жыл бұрын

I'm a beginner and I want how to open the command prompt where you typed yarn

@CodingWithChaim 4 жыл бұрын

Whatever you use for a terminal on your computer. Navigate to the folder where the project is, and run the commands there as needed

@jithamanyu9059 4 жыл бұрын

@@CodingWithChaim It is showing server is running on port 8000, but when I go to local host 8000, it is showing Can't get

@CodingWithChaim 4 жыл бұрын

You need to have the client app running as well

@VrlHtzz 3 жыл бұрын

How to start with sharing screen only not video please if anyone can help me 😭😭😭😭

@shahnawazraza8355 4 жыл бұрын

When you are doing the screen sharing, the remote person is able to listen the audio of frst person(those who are screen shared)

@CodingWithChaim 4 жыл бұрын

Yes, the audio track is still getting sent. We only replace the face cam track with the screen track.

@shahnawazraza8355 4 жыл бұрын

@@CodingWithChaim ok. I will implement your code. In my code, screen sharing is done but reciver is not able to hear the voice of sender.

@CodingWithChaim 4 жыл бұрын

@@shahnawazraza8355 Ok great! Let me know if this works for you

@shahnawazraza8355 4 жыл бұрын

@@CodingWithChaim sure

@jithamanyu9059 4 жыл бұрын

Can you post the final code github link please

@CodingWithChaim 4 жыл бұрын

Here you go github.com/coding-with-chaim/webrtc-screen-share

@SonuRaj-er1hn 3 жыл бұрын

How to make screen sharing in angular 9,or Django please help

@CodingWithChaim 3 жыл бұрын

The concepts are the same. You would need to use python's version of socketio or however python handles websockets. As for the angualr part, there is nothing react specific about the screen sharing code itself.

@vinhtranquangvinh2191 2 жыл бұрын

you can share code because l don't understand

@abhinavkumar1253 3 жыл бұрын

Any way to control remote desktop?

@CodingWithChaim 3 жыл бұрын

Not from the browser. That would need to be a desktop app I think

@Raghugrdr 4 жыл бұрын

I am getting following error unhandled Rejection (TypeError): Cannot read property 'replaceTrack' of undefined

@CodingWithChaim 4 жыл бұрын

Are you using my final code, or are you writing your own code?

@Raghugrdr 4 жыл бұрын

@@CodingWithChaim Based on your above video done the code

@Raghugrdr 4 жыл бұрын

@@CodingWithChaim I tried your final code, it is working fine.

@erzhenhu1582 3 жыл бұрын

Hi i meet the same problem. How did you solve that ?

@snehasingh7334 3 жыл бұрын

@@Raghugrdr How did you solve it?

@rishk3705 3 жыл бұрын

Hey I need a good documentation to create a voice group chat can you help it's urgent

@CodingWithChaim 3 жыл бұрын

This video should be a good starting point for you. In this video I demonstrate group video chat, but you can easily convert to audio only kzfaq.info/get/bejne/iJejmauB3KusZ3U.html

@rishk3705 3 жыл бұрын

@@CodingWithChaim yeah thank you sir but the only major problem is that I have to build this in Android studio

@CodingWithChaim 3 жыл бұрын

I have no familiarity with that. Sorry

@moasjf 3 жыл бұрын

@@rishk3705 check for agora.io

@rishk3705 3 жыл бұрын

Ok thanks I will check it out

@paretoeducation245 3 жыл бұрын

In case anyone is developing on an M1 Mac, let me save you some trouble - 3 hours worth of hassle, in my life. This code, while working perfectly on Intel emulated Chrome, does not work on official M1 Silicon optimized Chrome and Safari. The `navigator.mediaDevices.getUserMedia` functions return a generic error called 'Unconstrained error' or something like that. Basically, it is broken as of 4.14.2021. Took me a few hours before I started to think my M1 was the problem - the first time I've run into any practical issues with Apple silicon. Haven't deployed the Express API to the internet, but I'm worried that Apple compatibility (iPhone, iPad) will not be as good as Windows and Android. For M1 users running M1 Chrome, uninstall, and then install the Chrome made for Intel chips. Then, code works perfectly.

@paretoeducation245 3 жыл бұрын

Basically, the browsers do not yet support the webcam/stream drivers on Apple Silicon. Hence the unconstrained error - it's trying to get the audio and video, but some bug is preventing it.

@paretoeducation245 3 жыл бұрын

Update: I managed to keep my Google Chrome running on Apple Silicon, and instead downloaded 'Google Chrome Canary' (a nightly build made for developers) for Intel chips onto the Mac, and managed to do my WebRTC testing on there just fine. Now that I'm used to Apple Silicon performance, the Intel Chip Chrome was such a downgrade... I had to figure something out.

@dustinpoissant 3 жыл бұрын

Go ahead and