Handle User Disconnect in WebRTC Group Video Chat
HTML-код
- Опубликовано: 29 сен 2024
- In this video I demonstrate how to handle a user leaving a webrtc simple peer group video chat. In order to ensure that we have a good user experience, its important to make sure that when one user leaves the call, all other users in the call see that this user has left the video chat, and no longer have a stray video tag just hanging out. Using the destroy method which is offered by simple peer is also very helpful for us here.
group video chat: • React Group Video Chat...
code to follow along: github.com/cod...
If you enjoyed the video, please consider dropping a like! It helps really helps the channel!
Follow me on Twitter: / codingwithchaim
Subscribe to the channel: www.youtube.co...
sir your videos are really awesome sir.....I am learning a lot from you sir
Thats awesome! I am very glad the videos are helping you
@@CodingWithChaim thanks a lot sir...keep teaching us sir...thank you sir
Great video Chaim!
Anybody else getting duplicated video elements if they add, remove and then add a user to a room? I can see that my peers array has duplicate peers in it but haven't been able to track down when this exactly happens
Yes there is a bug in this code and relates to the same question you asked other video where I
used 2 arrays. At some point I hope to make a video about mesh network again, with less buggy approach. This might actually happen in the nearish future.
Replace user joined with -->.
socketRef.current.on("user joined", (payload) => {
const peer = addPeer(payload.signal, payload.callerID, stream);
peersRef.current.push({
peerID: payload.callerID,
peer,
});
setPeers([...peersRef.current]);
});
@@shubhamsingh6341 thanks it work but it leads another issue which is in first browser all the video is not shown can u help me regarding this
@@ramrawat2037 there is a limit set in the server file. Please check if that is your issue.
@@shubhamsingh6341 not working man
Chaim, can you make a video about creating a mute and video off option?
I dont know if its just me, but when a user leaves the room, and rejoins, his screen does not get displayed to the other users
Hi shruti,
R u still facing this issue?? If you got fix for the issue, please share..
Hi Chaim! The code works all great when we close the tab. But when a user reloads their page all the rest of the connected clients get an error message -
Unhandled Error (undefined)
Callback-
Peer.emit
Would appreciate it if you could help me with this
Emit event inside cleanup function of useEffect worked for me
@Coding With Chaim could you please explain how to get around the issue of refreshes adding an extra connection? When I refresh in one tab, another user video pops up in the other tab, and vice versa.
I believe this should be handled by handing the disconnect event as demonstrated in this video
@@CodingWithChaim Somehow its not. Really appreciate the prompt reply, any chance you would be willing to hop on a very short google meet and discuss?
Sholom aleichem btw ;)
You can email me to set something up if you’d like
@@lastsfortwominutes Did you fix it? I have the exact same problem!
@@TharstenMetal yes I did. It has to do w the use Effect hook cleanup, which was missing, as well as a change to what we use to render the video elements. Waiting for @Coding With Chaim so I can discuss w him
When you go up to heroku, I create a room and share the link on another different computer. The video of the last one that enters is duplicated in the one that entered first, is there a solution for that?
hey coding with chaim please provide us ans i m also facing same issue
Same Issue for me, Did anyone solve it?
its showing process is not defined error when disconnects
Can you add screensharing, login system and reactjs?
In this video I demonstrate screen sharing. Does this help you? ruclips.net/video/X8QHHB7DA90/видео.html
@@CodingWithChaim I meant with react-hooks
@@ouss As we say in the family, shut your mouth and code it yourself. Otherwise you pay a dev, it's the least you can do. The idea is worthless, it's the ability to execute that counts. We know how to code or not :)
How we can remove echo noise from webrtc?
if the peer is destroyed, next time if I use the same socket id to create a new peer it throws an error:
Error: Connection failed.
at Peer._onConnectionStateChange (index.js:699:1)
at Peer._pc.onconnectionstatechange (index.js:118:1)
What do you think are the 3 most important things to make a WEBRTC application that supports 20 users?
My current app supports about 12 users.
that is an awesome playlist ... but can u please solve the problem of black screen .. I mean when somebody turn off their video(they don't leave room , they just turn off their video ) .. then instead of black screen I want to render image there or text instead of black screen .. thanks ;)
please make a video handling user disconnection in your video of native webrtc videochat. Love from colombia!
Many thanks, machine gun instructor 😀😂 ❤💯
whole month saved by you. Thankyou
Eminem's 'Rap God' rests. Big thanks, very infomative!
By the way, does the webRTC with NodeJS, Express, Socket.io and React is a viable solution for a large commercial applications? (Say for 1 million users?) Or some of the technologies could be inefficient when serving for such a large audience (1 mln. users)?
All of these technologies can be made to scale, the bottleneck would not be with node or socket.io
or react. These technologies are subject to the same bottlenecks all large applications can face,
and there are existing solutions out there to scale. Think load balancer, redis and so on.
Hi, great job with this simple-peer tutorials
I used 9.6.2 version of simple peer,it worked
omg this is the best
Wonderful lesson 👍
Hi, is there some way to invoke the "disconnect" function via a button? For example, a "leave chat"-button on the page and pressing it redirects the user to the homepage? I am currently trying this and using socketRef.current.emit("disconnect") inside that function but it does not seem to work... Any ideas?
This is solved! Thank you
@@carlbanan11 hello bro, how you solved??
I did it with cleanup function from useEffect. I have a doubt regarding that. So when user reloads the page, two events will be fired leave meet and join meet,i know events are queued but can 2nd event be fired first in any weird case?Because that will create probelms wth frontend logic of removing peer.
Also thanks for both videos
can you paste here the code for cleaning up inside useeffect ?
Webrtc is not working when i check with different network.. can you please make a video that showing the video calling with different WiFi network
You might need to add a stun server. For good measure I would also explicitly add a turn server
@@CodingWithChaim i have added google stun server and free turn server both.. but same is the issue
Chaim please do a deployment video :D
I actually have! You can find it in my webrtc playlist
can we map the name from text box(may be login) to user id so that when user is using Chat we can use their name?
Yes absolutely. You can take a look at my socket io rooms tutorial to see an example of this being done
@@CodingWithChaim was thinking to integrate Google api and fetch that name🤔. Thanks found those videos after posting comment 😁
there's a problem when you refresh and the problem exactly in react when the user refresh the other user will have 2 same socket id in the peers state :(
I fired the leave meet even inside the cleanup function
Yes I have the same problem
@@kunalsolanke7555 Can you say clearer
I think there is a bug in simple peer latest version or may be in all version because sometimes I noticed stream event not been called...What's your say @Coding With Chaim ?
I have noticed issues with version 9.7.2 and therefor always use 9.6.2. Tho I cannot say for sure if the issue you are facing is a result of this.
@@CodingWithChaim Thanks for quick reply and your awesome videos, I really appreciate your work keep going.
You’re most welcome! I’m happy you find the videos helpful
@@CodingWithChaim For me it works on the same network but I get errors when connecting across different networks. The initiator of the call hangs up after receiving the answer offer. I'm using simple-peer for that. I have my turn server configured on aws ec2 and when I check the connection on the trickle website it work fine. Don't know where to look again.