React Group Video Chat | simple-peer webRTC
Vložit
- čas přidán 27. 07. 2024
- In this video I demonstrate how to create a group video chat in react using a mesh network. The mesh network is a solution to a fundamental problem with peer to peer technology because each peer can only connect to one other peer. The mesh network allows us to create a group video/audio chat despite this limitation.
-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: / codingwithchaim
Subscribe to the channel: czcams.com/users/codingwithc...
Starter Files: github.com/coding-with-chaim/...
Final Code: github.com/coding-with-chaim/...
Further Watching
React Concepts: • All About React
Node Concepts: • All About NodeJS
More WebRTC: • All About WebRTC
Socket IO video: • React Chat App Using S...
WebRTC video: • Create a React webRTC ...
--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 - Věda a technologie
don't stop creating amazing tutorials !!!
Great video! You did a great job explaining how the pieces work together
I messed up, i was making one, and I messed up one one part, but you explained it pretty awesome, clarify a lot of problems i had.
Your tutorials are incredibly high value. Keep going
Dav 1243 thank you! I appreciate that
Thanks for this video , keep up the good work , waiting for your next tutorial
amazing video bro, thank you, you've help me a lot, i don't speak english very well but i'm learning, thank you very much.
dude!!! u have no idea how i search for a group video chat but I couldn't find it, thank you very much!!! finally
Glad I could help!
@@CodingWithChaim the last person to join the group receives all the videos of the rest but the first person to enter the room does not receive the video of the new people who enter, I don't know if you noticed that in your project
@@judatop4147 Yea this was a pretty buggy project. This gives me a chance to make it again and better. Video in the near future
@@CodingWithChaim im trying to build a entire app like zoom, the mesh network is not scalable when we have a group of about 30 or 50 people, maybe you know of an alternative that I can search or a library? I'm desperate and thank you very much for answering
@@judatop4147 You can look into mediasoup, likekit, kurento and jitis. One of those options should potentially work for you. There are more im sure, and as you start going down this rabbit hole you will learn even more than what I mentioned here
havent tried yet, but it is very well explained. thanks!
Thanks!!
Great channel and content. Subbed.
Thank you so much for this video!
Thanks for sharing this!
oh a new channel, i want u a success here , totally
This is a great video,just cannot understand why such a great video have so low view
Please make more video on webrtc tech and open source technologies used in it
Thank you! I actually have a really cool webRTC video planned. Coming soon!
@@CodingWithChaim thanks bro
@@CodingWithChaim Waiting for it .. please do asap..Thank you !
this is great content, just awesome! would be really helpful though if u can put out a tutorial covering data channel and screen share on a group video chat. Thanks for being awesome.
Great video!!
thank you very helpful
Amazing Video
Thanks for your tutorial! I would like to share a screen among all the users connected. How to do that.
Thank you again!
Great video!
Out of curiosity, why do we need two arrays to store the list of peers. Couldn’t we just use the peers useState instead of the ref version?
I thought they both should keep their value between re-renders?
thank you for videos
Thank you!
There seems to be some issues with this implementation: especially around page refreshes. I did not experience those issue with peer to peer video chat. Whenever the page is refreshed sometimes it displays the two video chats correctly and other times it do not. Can you please help on that.
How to change it from development to release mode ?
In the client folder there is a build script
The video is great.
Can you create a group video chat using the WebRTC? It would be very helpful.
Thanks for all your tutorials they are very helpful,
But I have a question how can I turn off/on the mic and video??
Do you have any tutorial for video chat using react native?
very good work, i was searching actually for this. Please talk more slowly because some viewers are not native english speakers
Thank you! Yes my speed of speech is ongoing process lol
I ran it half speed and english is my native language. Great tutorial, still trying to wrap my head around webRTC
I’ve recently learned I can slow videos down via editing. That should help hopefully
@@CodingWithChaim yeah that would be great, btw i am planning to make a text+video chat app using react. I use usually python with django, can it handle it or it is best to use a nodejs framework (sailsjs for example)
Hi, Chaim. How can i edit the size of video and add it to a div?
How do you learn this WebRTC stuff, I am really curious to know your learning style, the documentation there is not so beginner friendly.
Thanku Sir.
This is great video.
Can you create video for group video call using webrtc and SFU????
Janus is pretty easy to set up on ubuntu 20 and it has built-in demos!
Excellent video! For this kind of functionality, what do you think is the best hosting provider to implement this?
I think all the same rules around hosting providers, are true here as well. This type of project does need any special considerations around hosting. The main concern I suppose would be how many users you intend to have and then see which platform makes it easiest to scale out. If all you want is to use this with some friends, then Heroku is fine too.
Hey Chaim! Can you please suggest how can we accommodate more users in this group video chat?
Hi, how does adding a stream should work I'm trying to achieve this result and in any I cannot make this work an have no ideea why this is happening
The error I'm getting is the following -> DOMException: Failed to execute 'setRemoteDescription' on 'RTCPeerConnection': Failed to set remote answer sdp: The order of m-lines in answer doesn't match order in offer. Rejecting answer.
Is possible to change the stream in the middle of the call?
Hi Chaim, can I know how to run the start scripts, build script, test and eject scripts
what a boss :)
Bro , u are really doing some epic shit for us !!!!! Yeah !!
Shalom Chaim, excellent tutorial! I was wondering if you could make a video implementing a streaming function on top of your video conferencing app so that I can send live feed to my RTMP server. Could that be a possibility? Thanks and keep up the good work!
Thank you! Yes I would love to make a video about that. It is certainly something that is on my radar. Can't really speak to a timeline for that one tho.
that sound like good idea, and a hot topic due to the situation right now.
I can't wait to watch it !!! 😁
@@CodingWithChaim Hey Chaim, I would also love to see this one coming soon =)... just curious , on which side, server or client, will the extra code for the streaming feature could be added to your existing "group-video-final" code? - Do you think that part of this code github.com/MuxLabs/wocket could be implemented into your simple-peer webRTC project?
@@CodingWithChaim Maybe getting part of this code medium.com/agora-io/build-a-live-broadcasting-web-app-f6fbd27f3d50 ...Just replacing their WebSDK with your WebRTC code?
@@nesgadol881 I have not read the entire article just yet, but just from skimming this actually seems really cool! I never heard of agora io, I will be exploring that for sure! Thanks for sharing.
Brother please help me from which object i will get .getVideoTracks is it peers or any other?
Hi Chaim,
Can you guide us on, how to turn off/on camera while on a group video chat.
There is a way to stop/start camera using track.enabled flag, but this keeps the webcam indicator light on.
how can you turn off/on the camera and mic??
Hi you saved my job thanks mate ..how can we flip the video like zoom app in the sense people who are talking something their video will be large and remaining all videos will be small right..is there any way we can do using react...if you could help me in that it will be awesome thanks in advance
Great tutorial, I’m about to do if as well. But, I have one question that might be silly. Since you can video chat with others by sending this link, will they also be able to hear you? Or is it just a video without audio?
This is video and audio
Can we use this with amazon kinesis. Does any one have a idea?
Nice...
do you have any tutorials using a Multipoint Control Unit & Mux? i'd love to see you do a tutorial that does a twitch or youtube live type site that allows anyone to come to your site & start streaming. gr8 channel! 😀👍🏻
You may find this video interesting czcams.com/video/GMbdEnK8h3U/video.html
Hi Chaim! Thanks for this amazing tutorial. I can finally make my own prototype with this tutorial!
Actually I have a question about 'disconnect' event. I added a `io.emit('user exit', user)` on the server side when a user is disconnected, and on the client side, update the peersRef, but the video doesn't seem to be updated accordingly (I used peer inside peersRef to render the video). Can you help me with this?
Ref in React updates slowly. Use State to render stuff.
socketRef.current.on("receiving returned signal", payload => {
const item = peersRef.current.find(p => p.peerID === payload.id);
item.peer.signal(payload.signal);
Error: cannot signal after peer is destroyed
I am getting this error in the above code .
From the code provided there isn’t anything I can see that’s wrong. The only thing I can think of would be to make sure you remove any peers from the peers array as they get destroyed. This way you’ll always be working with fresh peers only.
I have the same reason with create react app
@@CodingWithChaim U can check at here codesandbox.io/s/vigorous-cloud-cdliy?file=/src/pages/Room1.js
@@CodingWithChaim and my server codesandbox.io/s/priceless-snyder-nfn62?file=/src/index.js:1322-1603
you need to install the client with "yarn" , don´t use npm i
How can I convert its functionality to React native like room ID URL
Hi Chaim, when a user leave the room do you need to peer.destroy ?
Simon Giroux Portelance yes I think that’s the correct thing to do technically.
It's working locally but after deployment I have noticed sometime it works but sometimes it doesn't ( connection event not firing or stream event not firing) and I researched and got for global use we have to use TURN servers .....what's your say ?
In some instances webrtc won’t be able to connect peers due to firewall and nat issues, this is what a TURN server is designed to solve.
Hi Mr Chaim, never used react before. What's your take in integrating this to a login system such as wordpress or a cookie/session based? Very nice video....
I dont see why that should be an obstacle honestly. The way I see it, is that this is just like any other service or app that is behind a login. Once a user is logged in they have access.
How do we share camera as well as screen together ?
Brilliant tutorial, thank you! I just have one question, how do you handle a user leaving the room? When a user closes their browser, the video tag goes black which is expected. But how do we dynamically remove that video tag from the frontend? I have tried removing the peer from the peers state but I'm unsure where to actually filter out the peer. I have tried adding a peer.on('close') event but it doesn't seem to be working. Any help or guidance on this would be greatly appreciated. Keep up the great work :)
I am working on a video for this exact topic.
@@CodingWithChaim anyone know how to close the stream when a user disconnected? can anyone tell me a simple way to close it? Thank you
Sir , Can you make a video about stopping video stream during ongoing connection ( Not muting video stream by enable disable method because it does not stop camera streaming and webcam light turn on always , also other app can't use the camera because of that )... I search and tried a lot about this but failed.
Hi Chaim, first of all Thanks for these awesome videos that u made! I wonder when you are talking about this, you said that tthis is the many solutions to solve the problem. Can you elaborate solutions that you know? Thanks again!
My pleasure! So there is the mesh network which is the solution I show in this video. There is also the MCU solution: webrtcglossary.com/mcu/
the SFU solution: webrtcglossary.com/sfu/
I hope this helps!
@@CodingWithChaim Mann! Thanks again i'll look into these. I wonder what do u think about streaming a video on nodejs as chunks to multiple users?
Another topic I hope to make a video about in the future actually
@@CodingWithChaim
Would like to watch!
And one last thing. Are you always gonna use React for your examples :D
I'm gonna try those but for now we are using another framework and i need to un-plug everything .D
Again Thanks for lovely videos and waiting for more!
Well react is my current comfort zone lol that being said a big reason j started the channel was to push myself. Right now all this webRTC stuff is all new to me, in the future tho I would like to play with other frameworks as well I so think there will be other frameworks in future videos!
do you know how to remove echo noise from webcam webrtc?
Thanks for the video. can we use the same technique to create one to many broadcast, like instagram live ?
Yes you can but it too won’t scale too well. Using this approach I imagine only being able to broadcast to 6 ppl max.
hey there, i am new to react. Actually I was wondering that how to generate that URL you pasted in the browser and what about its room id? Can you please help?
Here you can the see the code involved in creating a room url and a room id.
github.com/coding-with-chaim/group-video-final/blob/master/client/src/routes/CreateRoom.js
Very good! I only paid attention to one detail: if on the client I add the libraries with their updated versions, it doesn't work. It only works using yarn.lock which is in the repository.
Any suggestions for resolution?
Yea there might be an issue with the latest version of simple peer. I have noticed this and so far have been resolving by using version 9.6.2 of simple peer. I don't yet know if this is an issue with my code, or an issue with the newest simple peer version.
@@CodingWithChaim But regardless, I really liked your solution! It will help me a lot in a project that I am currently engaged in.
Thank you very much for the explanation and thank you very much for answering.
Happy to help!
Failed to setup RTCP mux error also occurs. 🤔
Hello Chaim,
You are awesome. But I have one doubt. I cloned your app from github. When I run your code then it works fine. But when I create my own react app and copy your same code then it's not working. Actually it's not connected with server (socket.io). Why ?
Please help me.
Thank You
How create a login system before text chat or video chat using webrtc.
hello bro, how can I deploy this on my Cpanel, please help
Hi! Great tutorial!! Anyway, the "all users subscription" is triggered everytime a new user joins on every peer? or did I misunderstand something?
When a new user joins, the all users event gets raised only for the newly joining user. This assumes I remember correctly, this was made a while ago.
@@CodingWithChaim makes sense, thx!
How to identify Host and user ? would you please give me Hints
how can i detect if a remote peer is disconnected, i want to remove their video right after they disconnected via closing the window or leaving the page
When a socket disconnects, it fired a disconnect event which you can listen out for on the server. When this events is raised on the server, you can send an event to the client side app saying a user has disconnected, and now in your client side code you can do with that as you wish.
Great tutorial Chiam!! I was able to implement the same. But even if I login through any room/:room-id I can see myself added to the same room. Could you tell me how this privacy module can be tweaked.Thanks in advaance!!
Thank you!
If I understood your question correctly, you can technically have some collection server side (can be in a database or local memory) where you keep track of which socket id has access to which room id. For example, if a user creates a new room, a new key in this collection is created on the server, and this user's socket id is stored at that key. Then when the roomID gets shared with other users, a new entry must be put into that collection at that room id with the socked id if the user the link is getting shared with. The when a user joins the room by visiting the link, the server would check if this room id has an entry for his socket id.
Let me know if that is what you were after.
@@CodingWithChaim Thanks a lot!!
Purpose-Psychologisthelp website.
Goal-client after payment->unique room/room id link button activate.His profile collection stores a record of roomid which we can use to protect with the middleware in route.
Problem:-("I implemented with a mongodb signin collection in place "). When i login through A with hyperlink .../room/1234.
And when I login through B ..../room/321 simultaneously in an incognito tab.
Both streams are visible to each other.
Chethan Sai Krishna it’s possible that you didn’t correctly create a new room with socket io. Even if you have the room id and socket id collection as discussed, if socket io isn’t actually aware of any rooms none of this will work.
how to run this project? after downloading
hey ,Your tutorial are really amazing. I had a question is there a way to broadcast video to many user (1 to many) using webrtc. Like streaming yourself to others.
Thank you! You would technically be able to use a very similar approach as I used here. The difference would be that instead of all peers sharing their stream with each other, you would need to keep track of which peer is the broadcaster, and only share that stream to all other viewer peers. You would of course still be limited to how many viewers you can have if you use a mesh network, but I imagine you should be able to have 1 broadcaster stream to 4 or 5 viewers using this approach.
@@CodingWithChaimthanks for replying ! It would be a great help if you make a tutorial on this.
Thank for your tutorial! I have 1 question: How to get id that I created when I click button? I want the second client to access localhost:3000 and click join into the rooms with the id just created in client 1. Tks !!!
When a room gets created, the room ID goes into the url. It looks something like this: /room/{roomID} so you could just share the link with another client and they will automatically join that room. Is this what you meant?
@@CodingWithChaim no, I want when a room create, {roomID} will show up on localhost:3000 of other clients. And other clients can access {roomID} without sharing the first client.
The other clients need some way to get a hold of the room ID so that the server knows which room to put them into. Off the top of my head, I cant see a way to make this work without sharing the link or roomID with the other users.
@@CodingWithChaim oh thanks kiu, I did it. So how to share screen in video group chat ?
Trung Duy Nguyễn I will be talking about that in a future video.
Hey I am kinda new to all this so please can I get detailed instructions to get this running from the beginning?What to download and how to and stuff like that?
I will do my best to make as clear as I can here. You download or clone the code from girhub. The structure of the code is such that all the server code lives in the root of the app, and then within that there is a folder called client which is houses all the client side code. To run the code, make sure you have a terminal window open in the root of the app and run either yarn or npm i. After that installation is done, make sure to have 2 terminals open. One window should be in the root, and the other in the client folder. In the window you have open in the root, run the command node server.js. in the client folder run yarn start. Your browser should automatically open to localhost:3000. I hope this helps!
Hi Chaim, thanks for your tutorial ! I'm encountering a weird problem even though I cloned your code.
When testing the video chat the second browser (user joining) is actually receiving the main user' video without any problem, but the main user (the one who created the room) isn't showing the video. What's weird is that the DOM is being updated properly as I can see 2 video element when I inspect the main user's html. Except the second one is simply white, no video shown.
When I add more user, the pattern is as such :
user 1 : only sees himself
user 2: sees himself + user 1
user 3: sees himself + user 2 + user 1...
it seems only users who are in the room previously are being hit by this "rendering" issue. They create the video element, receive the peer object, but don't display the video stream itself. When I log the peer object I can see a difference: in the user without the stream displayed, the channelName appears to null in the console... Though when I inspect the whole object the channelName is actually there. This does not happen fro the user joining the group, as the channelName is not null.
Weirdly, it seems that the "stream" event never get sent by the peer library to the non-initiator.
Any idea ? This has been constantly in my head for the last 3 days and I cannot find a way to solve or even understand why it's like that
hmm that is a weird bug indeed. I do know that I have some issues with this code tho for me they came up when I was handling the disconnect. One thing that you may wanna try, tho I can't be sure if this will in fact help you, is to use a unique id as the key in the render as opposed to the index which is what is currently being used. At some point I hope do redo this video without simple peer and use the native webrtc api instead, and hopefully in that video I will be able to take a new approach with less bugs
@@CodingWithChaim thanks for your honesty ! You a really doing a great job and I'll keep follow each of your videos :)
@@sebtt7037 Hi Seb, did you resolve your issue ? I've exactly the same problem. Thanks
@@jeromemoens9235 Did you got your issue resolved? I am facing the same issue. Thanks.
@@saravananmuthu9571 did you get the solution? I am facing exactly the same issue. Thanks
Sigh, I'm' using it for audio but I can only hear myself and can't hear the other person, the audio element is disabled for the other people in the room
thanks for this tutorial. I transferred it to Next.js and it works well. But I have problems if a user leaves the room, then I get the error message "Uncaught RTCError: Transport channel closed". How can I close a simple peer connection for a user that left?
ok, found the answer in your extra video for this issue :-) Thanks for that.
Hey Chaim,
I have a doubt regarding how many peer connections can I have at once?
Can I expect it to show anywhere around a 100 or 80 at least, or is it me who's exaggerating a lot?
It is of course possible to have a group chat with that many peers at one, but not with the mesh network approach I showed in this video. This approach only scales to 6 at most. You can look into peer to server architectures such as using an SFU (Selective Forwarding Unit) for large groups. These approaches are however more expensive in production and also more complicated to build.
@@CodingWithChaim Thanks Chaim, appreciate it.
it's work on mobile browser iOS and Android chrome ?
actually，i don‘t know how to use this code totally......how can i get the chat room URL？
Thanks Chaim for an amazing tutorial. This is full mesh architecture and I am looking for a non-mesh architecture. Is there any other way to establish the connection cheaply?
What do you mean by non mesh? Like peer to server? That’s more expensive and more complicated. There are trade offs both ways. The mesh does not scale but is cheapest and easiest
@@CodingWithChaim Thanks Chaim for the response.
True about being more expensive. But that will have any restriction on number of peers. If you have any numbers on total number of peers that can be present in the mesh without hampering the video conferencing performance, can you please let me know?
Subscribing your channel now. In many such tutorials I asked questions but nobody responded. Hence didn't subscribe to those channels. Thanks again.
From what I can tell a mesh network tops out at 6 peers per call.
Chaim have you looked at Janus? There is also an open source video chat called Jangouts which is pretty interesting. I want to figure out how to build a webinar with one broadcaster (live webcam video and sound, and a seperate video of his screen), sharing with, say 30,000 peers. Recording at the same time as broadcasting.
Something like youtube live, fb live and periscope.
Looked into Janus a bit never heard of jangouts tho. Personally I’m leaning towards mediasoup. Seems pretty straightforward
@@CodingWithChaim thanks for the quick reply, I'll give it a look
@@CodingWithChaim okay I looked into mediasoup and it's significantly more straight-forward to set up than Janus! According to the research paper that I found, mediasoup is also a very high quality SFU. Also there are some good demos. One of the issues with SFU demos in general seems to be that all peers are recieving HD streams for all other peers when in a group video chat which doesn't seem optimal (i.e. they don't need to be hd when displayed in a 200px x 200px box.) There is a lot that can be done with mediasoup as I'm sure you will have noticed.
Personally one of my goals is to build a youtube clone. The mediasoup SFU will enable me to develop the feature where users can livestream their webcam and mic to hundreds/thousands of passive users and interact with them live via text chat, whilst recording the video/audio of the livestream and storing it in mongo using gridfs. Huge project and I have no idea if I'll even manage it! There are a couple of demos that seem decent, anyway, and hopefully they'll be very helpful for me in getting started.
It'd be brilliant to see some tutorials from you, using mediasoup, as you're much better at programming than I am! I'm sure your other fans will appreciate it a lot as well! :)
Thanks.
Holy smokes, it is NOT simple, haha.
So none of their demos seem to work [on my system] in FF, but in Chrome they do (some issue with self-signed certs and SSL). I've been checking out this demo (github.com/Dirvann/mediasoup-sfu-webrtc-video-rooms), because the official demo is a bit too much to get my head around. I can't really understand how the code is working, to tell you the truth.
I'm not entirely a noob - I have a good CS BSc and a few months back I coded a MERN message board software from scratch. It has socket.io notifications and a webrtc video calling capability (the latter I borrowed from your code :P). You can follow people; it has real time notification of all users online etc. I think it's pretty neat.
Anyway, looking at mediasoup demos makes me feel like a total idiot haha. I have little money, so I don't know who to ask for help, especially since so few people seem to work with webrtc. I'd even sponsor you to make a mediasoup tutorial, if I may. Again, I don't have much money, but it will be useful for me and many others, so I will try if you are interested in such an arrangement?
I'm hard of hearing, so please try to speak slowly.
Again, thanks for the top-notch content! :)
Best
Do you recommand implementing it manually to a startup ? im planning to use Peer.js ? what is exactly the security issues im gonna run into ??
I am not too familiar with peer.js in this example I actually used simple peer. It is my understanding that simple peer is just a wrapper around webrtc native api. It should be just as secure, but I think you should verify that before totally taking my word for it as I am not 100% sure.
@@CodingWithChaim Thanks for the quick reply, keep it up !
Great video! But how can I have feature of turn off video and segment of that user to be turned off in every one's page ? Thanks :)
Stay tuned. I will have a video about that out in the very near future
I am having problem "Cannot GET/ " error please help me
Would you please check your inbox email or spam folder for questions regarding this project?
Thank you, I was having a hard time finding simple implementations of webrtc and yours looks good! I'm trynna create a group voice chat with user highlight on volume detection, any idea how to achieve that?
I am glad you enjoyed the video! I have never tried this myself yet, but this library should help you determine which peer is currently talking. At some point I plan on making a video about this. Here is the link: github.com/otalk/hark hope this helps you
@@CodingWithChaim thank you for your answer, I have indeed seen this library on different articles! Do you have any tricks to test the audio such as simulating audio in a specific tab to test out my future implementation and to not hear myself in an echoing mess?
If your goal is to have a visual difference happen based on the audio you can test by checking of your visual changes are taking effect while muting your speakers
@@CodingWithChaim right, also do you think I could easily mute someone?
Hi Chaim, if person B closes their tab and ends their video, person A will still have person B on their screen but their video will just be frozen. Do you have any idea on how to fix this issue? Thanks in advance!
I just didn’t add code to handle this. It’s not a big it’s just not been done. Might be a fun exercise for you to add this feature
@@CodingWithChaim Ya I have actually been thinking about this for the past couple of days. Would it be possible to give me a nudge in the right direction?
Thanks again Chaim, I appreciate it 👍
@@markliu22 So the idea would a little something like this. On the server keep track of which socket id belongs to which room. On the client side add button to leave the room and this button will need to remove this peer from the client side peer array, and remove this socket id from the socket id to room collection you will have on the server. This is of course very high level, but I think if you understand this conceptually you will manage to make it work in code.
@@CodingWithChaim Ahh I see, thank you!
When close the one window I got error 'Uncaught Error: Connection failed.' how to handle it can you explain that.
I faced same problem, but i'm using typescript, there is any solution without downgrade "simple-peer" ver?
Hi, that's because the peer is destroyed after refreshing or closing a window, so you must remove the closed peer connection from all peers array. My recomendations are to emit a socket event 'user disconnected from the room' (just like the "user joined") to all connected users, so they can remove that user peer from their array. Another tip is that by visiting simple-peer documentation, they tell us that a peer can listen to the 'close' event to know when a connected peer was closed. Hope this helps!
well explained, how many users can connect to the conference?
In this implementation I have allowed up to 4 per room. With the mesh approach you don't really want to go much past that.
You mentioned the mesh method might not be the most scalable. What would be the best method of setting up a scalable group chat (even if it's complicated)
Based on my research it would seem that using an SFU is the go to approach for that. Here you can see a bit more about it webrtcglossary.com/sfu/
The basic idea, is that you no longer have a true peer to peer connection, but rather a peer to server connection. The server now routes the streams to the other connected peers. Now this of course introduces some extra latency, but the upside is that now each peer only needs to upload its own stream to the server one time vs when using the mesh network solution you need to upload your stream once for each peer. This of course eats a huge amount of the upload bandwidth.
I want to at some point make a video about creating an sfu solution, but I still need to wrap my head around it. I have found something called mediasoup which does look promising. See it here mediasoup.org/
@@CodingWithChaim I've heared mixed information. Some say to reach everyone's video a Tun server is needed. Others say MediaSoup uses icelite so its not a problem. It's a bit confusing. Should I move forward making a stun/turn server for a good quality group chat of 6 people or use MediaSoup?
Also any demo of MediaSoup or related coming?
Unfortunately it’s all been rather confusing for me as well. What I will say is that if you want an up to support up to 6 ppl in a chat at once, you can use a mesh network and be fine. You’d still want to use a turn server tho to make sure firewalls don’t be an issue. An SFU is more for large group chats.
This may also shed some more light on this for you stackoverflow.com/questions/61287054/understanding-sfus-turn-servers-in-webrtc
@@CodingWithChaim I see. It seems Turn still plays a roll in higher security setups. Thanks
Great video! For some reason my addPeer function keeps being called... So it keeps emitting the 'sending signal' and 'returning signal'. Any idea of what could it be?
Unfortunately without seeing your code, it would be very hard to see where you can be going wrong.
Hello Henrique, I am having the same issue as well. Were you able to figure out the issue? My code is the same as the finished code on the repo.
@@tylorkolbeck6189 Yes I did! The problem was with the simple-peer version. I just brought it back down to 9.6.2 I believe.
I love you.
Thanks a lot for this great tutorial ! but i want to ask about how to do in the case of 20 peers or more for example , which methods should we use !
My pleasure! For that I would suggest looking into this webrtcglossary.com/sfu/ or this webrtcglossary.com/mcu/ I hope to make videos about these in the future
@@CodingWithChaim can we make sfu with socket.io or you suggest something else
I don’t know enough about it just yet to answer that question. Sorry
Thanks a lot
hey chaim thanx for your help in previous comment, but i am still facing the issue in merging group video chat with screen sharing , so please help me out by creating a video on this i'll be thanx full, please please help me. :) thanx a ton in advance...
how setup in iis ??
Hello Bro, first of all thank you very much for your hardworking. I want to ask you is this app working only locally or if I deploy it it will be working over the internet ?
my pleasure! This works when deployed as well.
@@CodingWithChaim Thanks a lot... I learned a lot from you... I hope you earn what you deserve bro. Thanks again
@@ahmadhaidar4097 thank you!
@@CodingWithChaim sorry for this new question... can you suggest for me a site for deployment? because I cannot use Heroku or AWS due to lebanese economical situation so there is no active debit cards now for 5 months...
@@ahmadhaidar9787 No worries. Take a look at this, and see if it can work for you. dokku.viewdocs.io/dokku/deployment/application-deployment/
Amazing video
It Very Useful. How to exit the room ??
You can simply close the browser tab, or you can add some code where you can have a button to click which will take your userid out of the socket io room
Than you for this tutorial, it was exactly what I was looking for!
I'm having a hard time figuring out how the signalling back and forth are suppose to work. In your example the new user send a "offer" signal to the old user, then the old user sends an "answer" signal to the new user and then the new user again sends an "answer" signal back to the old user. I suppose that this final "answer" signal somehow tells both users that the connection is established?
I tried implementing your solution in my own web application, but in my case the new user send an "offer" signal, the old user answers with an "answer" signal but then the new user send a signal with content "renegotiate: true". After that it all goes back and forth in an endless loop and each time the old user adds the new user to their array of peers once more....
I tried searching for what this "renegotiate" means and why it is happening, but It's hard without exactly knowing how WebRTC works...which is why I wanted to use simple-peer :) Could you point me in the right direction?
I am not sure what renegotiate actually means in the context of webRTC if I am being honest. I will however say that based on the way you described your understanding of the signaling in my code, I think you may have a mistake in your understanding.
A new user joins the room and sends a signal to the users already in the room. The user already in the room, accepts the incoming signal, and returns a new signal. The user that has just joined, accepts the returning signal thus completing the handshake. At this point there is no longer a reason for signals to be sent back in forth.
I wonder if maybe this confusion lead to the issues in your code. I hope this helps.
Is your simple-peer library version 9.7.2? If yes, please downgrade to 9.6.2. It should work. I was getting number of streams on first user from second one. Downgrading version helped me. I am not sure if it is exactly same issue. But you should try this.
I have the same error. Did anyone solve this problem?
It's a great tutorial but how can I have feature of turn off video and segment of that user to be turned off in every one's page ? Thanks :)
Stay tuned! Video about this coming very soon
Can you pls add a link to get the source code