webrtc hands-on (React hooks)
Vložit
- čas přidán 28. 08. 2024
- I had prepared this video to upload to Udemy but I then changed my mind and decided to share it on CZcams.
It is almost similar to my other WevRTC-React video series but in this video I use React hooks instead and covers up to Signaling server.
I hope this helps.
First of all thanks again for this knowledge contribution to the community... I personally benefits a lot,
I am happy to hear that. Thanks
If you get an error like "ICE failed, add a TURN server and see about:webrtc for more details" you have to add the candidates right after you set remote description.
At least that's what happened to me and how i fixed it.
This method works best if have already set up the socket-server (finished at 48:31) and just put addCandidate() at the end of setRemoteDescription().
Tank you very much for your video, I finally understood how WebRTC works and was able to build it my own. I love that you stay basic and don't use libaries (like simple-peer) or some fancy styled components.
Thankyou Sir for creating this wonderfull Lesson on webRTC .
Your explanations are on point. Thank you.
Thank you very much, I learned a lot. You explain really well.
Thanks a lot Sir. You made my day. Really nice explanation and hands on code.
I am glad you found it useful. I hope to the next part soon.
@@amireshaq I was stuck with this thing for 2 weeks but yesterday I made it with help of your video. Waiting for your next video. Thanks
Hi @@AnjaliKumari-bs9oo, I am glad it helped. I was not going to continue on this series because the rest is covered in the other webRTC series. I just wanted to kind implement it with Hooks. Once you understand then the rest is in the other videos. Hope that helps.
I haven't finished to watch but ....SUBSCRIBED big time !! thanks for this clear tutorial
Thanks Lou H
@@amireshaq Can this be done on react-native mobile application, or is there any other ways to solve it, mobile devices can't pass the "getUserMedia" objects. Thanks just sub
Hi @@SACKO0731, yeah it can, have a look at the other webrtc series I have done, includes RN too.
@NTINU NSAKU NE KONGO , check czcams.com/video/uR_92JkSezA/video.html and czcams.com/video/yj2pETkKWC8/video.html
@@amireshaq thank you very much, be blessed brother
that is very smooth thanks for the awesome lesson !!
So much informative! thanks a ton!
may god bless you
May God bless you too, Amin! Thanks
thank you for this wonderful tutorial
I am elated
@@amireshaq do you know if we can crop a webrtc stream from x start position to x end position? I need this in my project please
@@saoussenslii as you may know, the media when transported between peers is encrypted. So, you would have to do it before the encryption, say for instance display and crop the video using a canvas object. you may also want to look at Offscreen canvas. check this video out: czcams.com/video/tmTt8XjAU9E/video.html
@@amireshaq thank you so much for your response
May Allah reward you for sharing beneficial knowledge with world. Would love to have consulting session with you , is that viable ?
Amin. It's easier to connect via LinkedIn, I use the same name as my CZcams Channel. Thanks
Thank you sir 😊
Hello, thank you very much for this valuable video, a question, when I answer the call I get the following error
Failed to execute 'setRemoteDescription' on 'RTCPeerConnection': Failed to set remote answer sdp: Called in wrong state: stable
could you help me?
This simply means that you have moved to another step in the process before the previous one finishing; e.g. you create an offer => wait for offer sdp and then setLocalDescription => send to peer who will first add to setRemoteDescription then do the same when creating an Answer SDP, setLocalDescription and send the SDP to the offerer who will setRemoteDescription. These steps must not jump to the next before the current one completing/returning. I hope I make sense.
You may be missing an await; createOffer and createAnswer return a promise which you must wait for them to return with an SDP.
hey , what's was the solution ? I am still facing the same issue inspite checking all the mandotrary steps
Great video! Was wondering if there was a github repo for this video?
Thank you thank you ❤
Great explanation!!
great, thank you
Thank you!
Fantastic video
SIr, will you please make a tutorial for many to many conference without using any media server. I mean only by using webrtc.
I think I covered that in the other webrtc series
It doesn't work I set up the signalling server the sdp details were received but I wasn't able to set them up to the local Description etc
so you mean you get SDP after createOffer/createAnswer?
Hi Amir. Could you please advise what I need to do or which mediaserver has to be used for an audio (only!) multiuser chat where will be many-to-many connections? I expect up to 11 users in chat simultaneously. Thanks anyway.
Hi, have you looked at mediasoup? with mediasoup, you have to write your own code - its available as a node moduel
Thanks a lot! Could you share code please?
I am facing issue with proxy address which you set in pakage.json file to remove 404 error BUT i am, still facing the error
let me review the code again to understand your issue.
@@amireshaq there is some sort of url blocked by cors..
Is there a way I can just copy and paste the code to function in the particular areas on my website with the functions set to operate my backend components.
I dont think it is easy to answer because depending on the generated front-end code, you may have to rewrite some parts of the code to function properly.
Please create remaining part of this series I mean multi peer connections using react hooks kindly
I wish I had a lot of time, I'd love to do this stuff
Connection is working local, but it is not working by publishing in the internet
Hi Ali, are you deploying to a FQDN with HTTPS?
I need help. I already created my website. The code for my website was automatically generated for me I just need to know how I can enter the code you have enter to for the functions of my backend and for the areas I have designated for RTC
Hi Zey, I am not sure I understand - what is important really is to understand the concept and then be able to adopt in your own solution.
Code?
youre not using a stun server that is gonna create ICE agents for you
on LAN you dont need - if I understand your issue
what is the use of janus webrtc in these cases..?
with webrtc, you achieve direct one-to-one or more than two participants secure audio/video communication; however it may work well up to 3 or 4 participants after which call quality may start to degrade. If you are lucky this may work without the need for a TURN server. If you intend to support larger groups of participants, then you need communication servers like Janus, mediasoup, etc. as your Selective Forwarding Units (SFUs) - this means that now all media from/to each participant flows to/from the SFU.
@@amireshaq thanks for your replay can you make one video about janus
can u publish source code ?
Hi Amir.
Is it possible to get in contact with you some how ?
Hi Sonny, you can search my name up on LinkedIn.
will it work on different network?
I did not go further in this tutorial but if you look at the other videos from part 1 - 7, you can access fro different networks. In certain situations you may have to use a TURN server
@@neb542 yes, I have configured coturn for my own use as a docker container;