For anyone confused about where the Real Time Messaging SDK is, it is now called Signaling and as of February 2nd, 2024, you can follow this tutorial using version 1.5.1 of the SDK. Do not use version 2.1.5 or 2.1.7.
Hi guys! In the section "Set camera quality settings" - 2:45:40 if your camera does not support 1080p it will not work, I've tested this project on Logitech C270 HD WEBCAM which support 720p and when i've tried to set the quality like on this tutorial it didn't work, but when u will change it to 1280x720 then everything will be ok :) anyway this tutorial is amazing, thank u for uploading this video on this YT channel :) *edit encoderConfig: { width: { min: 640, ideal: 1280, max: 1280 }, height: { min: 480, ideal: 720, max: 720 }, },
@@anshvora9119 ik its a bit late but at 2:46:28 the line he changes just let it remain as is and don't do any changes to it your video should work on the auto settings
Guys, I reaaly want to thank you both (Dennis and Brad) for all that content you put out there for us. Ever since I started developing Web applications with your advice and tutorials I got significantly better and last month, I've been hired by a large company as a Software Engineer without any CS degree. Thank you guys. Wilfried.
@@DennisIvy 2:22:47 at this point my another user image is not fully loading it is showing only the half image inside the circle how to fix this anyone knows pls help me out with this !
I'm just learning JavaScript, I'm basically at a level when I can get references to elements and manipulated them. This tutorial is very advanced for beginners, but I think it's an excellent project to build. Not only will it give you a challenge - trying to follow along and digest what's being done, but you're going to have very cool app you can use in your portfolio. So, if you're like me and just getting started, don't sweat how complex it may appear. Just code along blindly. Doing so will not only help reinforce what basic information you do have, but will allow you to be inspired by building a real, working project that has real, practical application. Thanks to Brad, and Dennis for putting this out there. Good stuff guys!
@@DenzelHooke Good to know! Can you explain this to me? I'm a little confused about it. Thanks. peerConnection.ontrack = (event) => { event.streams[0].getTracks().forEach((track) => { remoteStream.addTrack(track); }) }
@@scottonanski4173 yeah of course. ontrack is a function (or more commonly called a method) that gets called anytime tracks are added to the peerConnection object. When a track is added by the other remote user, that function will loop though the available tracks and add them to the remote stream object. Basically copying those audio and video tracks onto our screen so we can see the user.
MY GOD THANK YOU! I AM WORKING ON THIS BRAD AND THERE IS NO OTHER TUTORIAL OR HELP ABOUT THIS , I CAN'T THANK YOU ENOUGH FOR ARRANGING THIS! I WILL FOREVER BE IN DEBT DENIS IVVY AND BRAD!
This is great. Wow I worked on Web rtc a couple of years back and I got stacked at how to make it work over the Internet because it worked perfectly fine when within the same network
No It's not. Signalling is basically coordination between two or more than two users by using third party server which is in public IP address if your application is getting served over internet.
That content is Awesome to clearly understand the concept of WebRTC. Thanks to every members of travery media. Hope you guys always splendid course like this. So, Head up for your hard work.
You are the best, i was actually reaching on this. MAN I LOVE YOU. and i just finish your MERN Stack.. and i really loved it, thanks. GOD bless you, i love you I love you
Great video on the big picture of WebRTC! Despite the sparse tutorials and complex documentation, this video clarifies a lot. I'm curious about one thing: In a mesh network, once devices establish an initial connection, can they automatically reconnect if someone goes offline and then comes back online? Could this reconnection occur seamlessly without user intervention?
Thank you Dennis because I need this for my project! can I ask for your help for a video tutorial like how to deploy something something like this? or like what server are you using like in the app live demo?
Thanks for the amazing projects! But I still don't quite understand the whole signaling process. I get the idea of exchanging ICE candidates, but in the demo at the beginning of the video, although there's nothing done related to exchanging ICE candidate, it still works. That's what I don't understand.
I just have a very simple query if anybody can solve, what exactly is the Agora service doing, if building webrtc applications is not that difficult, like how do you explain that pricing?
Great tutorial!! so good thanks. --constraints syntaxis did not work for me, either on the live demo. fixed: let constraints = { video:{ width:"min:640, ideal:1920, max:1920", height:"min:480, ideal:1080, max:1080", }, audio:true }
Congratulations on the video. I have a question. I have a video on vmix and copying the url of the video on the browser works and in Inspect I have a Json object called vMixCall in which the answer is present. vMixCall: {"type": "answer", "sdp": "v = 0 \ r \ no = IceLink ......."} how can i show this video of vMix on my webpage in localhost: 3000?
Thank you so much for this helpful tut Dennis and Brad.🙇 The only issue (from production pov) is the buggy audio at localstream end. There's lots of echo and noise when we speak, while peer's audio comes to us clearly. Any help would be great, thanks again!
Well, I have it going when I put the code on a separate server with https facility (did you mention that as a requirement) and serve the pages to two separate computers each with their own camera. But I can't get it running on a single computer with 1 or two cameras as you have on your video. It seems even when I use 2 cameras on one computer with two separate browsers (even different types, such as edge for one and chrome on another with each browser using a different camera source) that it still won't run. For some reason opening a camera on one browser blocks out the camera. on the other browse, even if they are separate video streams. It would be nice to run it on a single machine so that I can run the debugger on the IDE, but no joy. Any tips would be greatly appreciated.
hello great job... a question when a connection is made with a device connected to a wifi network and the other device to a gsm 4g network, the video does not play, do you know the reason?
Thanks a million for such a wonderful video tutorial. You guys are just AWESOME!!!! I have a question though - how can audio transcription using Google Speech - to - Text API be added to this code? Your input will be highly appreciated.
Hello ! thanks for the project man!. I am trying to clone the first projecto, everything works perfect but when i try it in another browser (firefox) i got a error withe the iceCandidate, anyone else got that problem?
Hello! Why did you don`t write - that it is an adverticement of the paid agora service? It is an adverticement (as a fact) - because you can`t establish connection without their service.So when you want to write this code - pay.
For some viewers who just come watching the lifestreaming; therefore, there won't be mic and cam permission requests, but whenever a joining task is triggered using RTC-SDK, the permission request is popup. How do I avoid this?
How can I make the first project video call work on different networks? Like I want to video call someone in a different location connected to an other network.
I did the exact thing. But the problem is that I am not getting the second video. It displays an error in the console - "Uncaught (in promise) DOMException: Failed to execute 'addIceCandidate' on 'RTCPeerConnection': The remote description was null". is anyone aware what needs to be done in this case?
Would really like to build this, but I skimmed through it and it seems like deployment is not covered. Has anyone successfully build this and deployed to Heroku or something similar?
I really appreciate you for sharing your knowledge, I hope that I can become a professional like you and do this. A big thumbs up !! 👍 I have a question, is it possible to add an emotion and face recognition script to this script? Does the variable "localTracks[1]" contain video and should I work on it?
what's the PREREQUISITE for starting this ?? PLEASE ANSWER SO THAT I CAN MAKE A DECISION WHETHER TO START OR NOT..... BCZ I REALLY WANT TO !! and I know HTML CSS bootstrap & some js
do you guys think with this api it's possible to store the created room in a database so that the web application can handle different rooms going on a video call session at the same time?
When you're testing the app on one computer, is there any way to share the video source between two instances of the web page? Seems I've almost got this going, except I can't open a second browser page because the webcam is in use by the first web page.
For anyone confused about where the Real Time Messaging SDK is, it is now called Signaling and as of February 2nd, 2024, you can follow this tutorial using version 1.5.1 of the SDK. Do not use version 2.1.5 or 2.1.7.
Can you tell me where the data is stored.
Is there a database...
How can I contact you?
Thanks a Lot!!!!
did u get it@@ahammedmushfiq4588
@@maheshkeshwala62 no
all the other thing works right?
0:55 I cant' believe it made it on the World-famous Brad's RUclips Channel. Thank you Dennis!
I'm definitely gonna give this tutorial a shot🚀
@@yashsolanki069 go for that!
because you are a gem
@@aldrinseanpereira140 I am not crying now
Hi guys! In the section "Set camera quality settings" - 2:45:40 if your camera does not support 1080p it will not work, I've tested this project on Logitech C270 HD WEBCAM which support 720p and when i've tried to set the quality like on this tutorial it didn't work, but when u will change it to 1280x720 then everything will be ok :) anyway this tutorial is amazing, thank u for uploading this video on this YT channel :)
*edit
encoderConfig: {
width: { min: 640, ideal: 1280, max: 1280 },
height: { min: 480, ideal: 720, max: 720 },
},
@@iam-Coderpls let me know
where do we make these changes?
@@anshvora9119 ik its a bit late but at 2:46:28 the line he changes just let it remain as is and don't do any changes to it your video should work on the auto settings
Thank you for this free lesson. It will help me build a side project idea I have been planning to work on for a while now.
Guys, I reaaly want to thank you both (Dennis and Brad) for all that content you put out there for us. Ever since I started developing Web applications with your advice and tutorials I got significantly better and last month, I've been hired by a large company as a Software Engineer without any CS degree. Thank you guys.
Wilfried.
How do you advise that I sell the video call skill I learnt from this video
@@SteveOluwatobisharing a link to your repo..? 😳
Thank you so much Brad and Dennis! You guys are my all time heroes🔥❤
😊
Great video Dennis you definitely put in a lot of work in this project.
🙏
@@DennisIvy 2:22:47 at this point my another user image is not fully loading it is showing only the half image inside the circle how to fix this anyone knows pls help me out with this !
I'm just learning JavaScript, I'm basically at a level when I can get references to elements and manipulated them. This tutorial is very advanced for beginners, but I think it's an excellent project to build. Not only will it give you a challenge - trying to follow along and digest what's being done, but you're going to have very cool app you can use in your portfolio.
So, if you're like me and just getting started, don't sweat how complex it may appear. Just code along blindly. Doing so will not only help reinforce what basic information you do have, but will allow you to be inspired by building a real, working project that has real, practical application.
Thanks to Brad, and Dennis for putting this out there. Good stuff guys!
It may look very advanced but It's not too hard to comprehend as long as you take it slow and dissect the info he's delivering.
@@DenzelHooke Good to know!
Can you explain this to me? I'm a little confused about it. Thanks.
peerConnection.ontrack = (event) => {
event.streams[0].getTracks().forEach((track) => {
remoteStream.addTrack(track);
})
}
@@scottonanski4173 yeah of course. ontrack is a function (or more commonly called a method) that gets called anytime tracks are added to the peerConnection object. When a track is added by the other remote user, that function will loop though the available tracks and add them to the remote stream object. Basically copying those audio and video tracks onto our screen so we can see the user.
@@DenzelHooke I see it now!
MY GOD THANK YOU! I AM WORKING ON THIS BRAD AND THERE IS NO OTHER TUTORIAL OR HELP ABOUT THIS , I CAN'T THANK YOU ENOUGH FOR ARRANGING THIS! I WILL FOREVER BE IN DEBT DENIS IVVY AND BRAD!
☺️
@@DennisIvy You're a lifesaver ! Thank you for putting out the amazing content , I am really grateful to you 💙
This is great. Wow
I worked on Web rtc a couple of years back and I got stacked at how to make it work over the Internet because it worked perfectly fine when within the same network
You two guys are the smartest tutors online.
I can't thank you enough !
Merci beaucoup !
Muchas gracias !
From DRC.
Realtime messaging is now called Signaling, and you can find that in the API reference documentation mentioned at 38:08
When I type AgoraRTM is says it's not definened in my console.
@@isazisempi3896 Maybe you don't call the script in the html file ? 34:30
Thanks man, i love you!
@@isazisempi3896 same.. did you figure out how
No It's not. Signalling is basically coordination between two or more than two users by using third party server which is in public IP address if your application is getting served over internet.
That content is Awesome to clearly understand the concept of WebRTC.
Thanks to every members of travery media.
Hope you guys always splendid course like this. So, Head up for your hard work.
Oh wow didn't expect a WebRTC tutorial from this channel. That's a sphere most tech youtubers don't touch lol. Very nice :)
Awesome!
I was actually waiting for it
Thanks alot Denis and brad for all your efforts towards nurturing up coming developers through all your amazing free tutorials here
You are the best, i was actually reaching on this. MAN I LOVE YOU. and i just finish your MERN Stack.. and i really loved it, thanks. GOD bless you, i love you I love you
Thank you for the tutorial and insights on using agora as third party SDK/ API. I really appreciate it!
Have u completed
this channel make us to be another level skill. thank you
ohhhhhhh myyy gooddd WebRTC FULL TUTORIAL? am i dreaming
This is the best video ever on youtube, thank you guys for your share. A big Thanks to every members of travery media ❤❤❤❤
Was struggling to find a good and very well-explained tutorial on WebRTC. Then I saw Dennis.
Daym my man 👌🏻
Saved my ass.
Amazing... You are amazing programmer 😇😇😇.. A million of thankful🙏...
You’re very welcome 😉
Thank you so much for posting this video. It made WebRTC concept 100 times easier to understand.
Brilliant Brilliant Brilliant. About time someone posted something that makes total sense when it comes to WEBRTC
Amazing video. The timing was impeccable! Just what I need for my project
Must see video.. thank you guys !!!
Hope you enjoy!
Awesome projects. Mumble IPO in 3 months
Haha!
Thanks for everything @Dennis you got a new subscriber and already subscribed to this channel
This exactly what I'm looking for. I am personally a huge fan of Dennise.
Take a bow , this guy is our hero
Great video on the big picture of WebRTC! Despite the sparse tutorials and complex documentation, this video clarifies a lot. I'm curious about one thing: In a mesh network, once devices establish an initial connection, can they automatically reconnect if someone goes offline and then comes back online? Could this reconnection occur seamlessly without user intervention?
I'm just here to see what's up, and man, it's so exciting!!! :) Never have enough time, so I leave now, bye. Going back to my side project. :)
I've been waiting for this 😍👍
Haha then the timing is perfect!
Thank you Dennis because I need this for my project! can I ask for your help for a video tutorial like how to deploy something something like this? or like what server are you using like in the app live demo?
Thankyou very Dennis and Brad 👍
Thank you so much 👍🏼🎉🤛🙏⭐,. Really Cool application
Finally a WebRTC course!
Dennis is on his way to disrupting Zoom and Google Meet..! 😂😂
Coming after them!
Can you do a website where two random people can be connected with a click of a button. And can you do the full version? Like on one's own server
Thanks for the amazing projects! But I still don't quite understand the whole signaling process. I get the idea of exchanging ICE candidates, but in the demo at the beginning of the video, although there's nothing done related to exchanging ICE candidate, it still works. That's what I don't understand.
I just have a very simple query if anybody can solve, what exactly is the Agora service doing, if building webrtc applications is not that difficult, like how do you explain that pricing?
Much love from Ghana
No words i wanted this project
Absolutely amazing , thank you
Getting error Uncaught (in promise) RtmUnauthenticatedError: Error Code 5 - The vendor enabled the dynamic key, but uses the static key.
Brilliant! thank you so much!
Hi Brad, could you have someone to do an Angular project please?
Love your work , always 🎉🎉❤❤🎉🎉😊😊
Yeah, I can look for someone. I haven't used Angular in about 2 years that's why I haven't had much on it.
Thank you so much Brad, you are legend , stay blessed 😊🙏❤️😊.
Thanks for sharing!!!!
Now that’s what I call a fine
job !!!! 👍👍👍
Couldn’t have done it better
myself .
Good Tutorial. Can you please provide more information regarding TURN Servers and how to host and use it? Thank you
👍👍👍👍
Thanks Brad & Dennis for this video :)
Thanks a lot sir god bless you Brad and Dennis
Let's go Ivy
Great tutorial!! so good thanks. --constraints syntaxis did not work for me, either on the live demo. fixed:
let constraints = {
video:{
width:"min:640, ideal:1920, max:1920",
height:"min:480, ideal:1080, max:1080",
},
audio:true
}
This is just great content
🙏
Congratulations on the video. I have a question. I have a video on vmix and copying the url of the video on the browser works and in Inspect I have a Json object called vMixCall in which the answer is present. vMixCall: {"type": "answer", "sdp": "v = 0 \ r \ no = IceLink ......."}
how can i show this video of vMix on my webpage in localhost: 3000?
You guys are doing the most
This is great. Love this!
How to deploy this project and make live
02:00 - Unfortunately, it seems like project number 1 used Agora as well (33:00), so this disclaimer is.. questionable..?
Amazing!
Thank you so much for this helpful tut Dennis and Brad.🙇
The only issue (from production pov) is the buggy audio at localstream end. There's lots of echo and noise when we speak, while peer's audio comes to us clearly. Any help would be great, thanks again!
thanks a lot ,for great tutorial , how i can add Choosing the camera (front / rear) ?
Well, I have it going when I put the code on a separate server with https facility (did you mention that as a requirement) and serve the pages to two separate computers each with their own camera. But I can't get it running on a single computer with 1 or two cameras as you have on your video. It seems even when I use 2 cameras on one computer with two separate browsers (even different types, such as edge for one and chrome on another with each browser using a different camera source) that it still won't run. For some reason opening a camera on one browser blocks out the camera. on the other browse, even if they are separate video streams. It would be nice to run it on a single machine so that I can run the debugger on the IDE, but no joy. Any tips would be greatly appreciated.
hello great job... a question when a connection is made with a device connected to a wifi network and the other device to a gsm 4g network, the video does not play, do you know the reason?
Thanks a million for such a wonderful video tutorial. You guys are just AWESOME!!!!
I have a question though - how can audio transcription using Google Speech - to - Text API be added to this code? Your input will be highly appreciated.
Pls tell is Agora video SDK is working for project 2?
Hello ! thanks for the project man!. I am trying to clone the first projecto, everything works perfect but when i try it in another browser (firefox) i got a error withe the iceCandidate, anyone else got that problem?
Hello! Why did you don`t write - that it is an adverticement of the paid agora service? It is an adverticement (as a fact) - because you can`t establish connection without their service.So when you want to write this code - pay.
Thanku so much from Karakalpakstan
hey i cannot find the real time messaging sdk under download section for web pls you tell what to do
How to make it scalable and handle volume and ultimately?
What's RTC? And what OS are you on?
For some viewers who just come watching the lifestreaming; therefore, there won't be mic and cam permission requests, but whenever a joining task is triggered using RTC-SDK, the permission request is popup. How do I avoid this?
Thank you for this amazing work. Do you have any video like this for Java?
How can I make the first project video call work on different networks? Like I want to video call someone in a different location connected to an other network.
thank you so much for the video. and does anybody know what's the bug with the main scrollbar only not working
I did the exact thing. But the problem is that I am not getting the second video. It displays an error in the console - "Uncaught (in promise) DOMException: Failed to execute 'addIceCandidate' on 'RTCPeerConnection': The remote description was null". is anyone aware what needs to be done in this case?
Very Helpful Thanks man!!
Would really like to build this, but I skimmed through it and it seems like deployment is not covered. Has anyone successfully build this and deployed to Heroku or something similar?
Amazing.
Hi, I am not able to find Real-time messaging sdk under download section for web
did you got it ?
@@iam-Coderits called signalling now
Thank you ❤️
It helps me a lot, Appreciate !
Hello Dennis. We need the first project without Agora please. Thank you for your videos ❤
I really appreciate you for sharing your knowledge, I hope that I can become a professional like you and do this.
A big thumbs up !! 👍
I have a question, is it possible to add an emotion and face recognition script to this script?
Does the variable "localTracks[1]" contain video and should I work on it?
excellent, thank you very much, very clear to learn
Awesome ⚡⚡⚡⚡
what's the PREREQUISITE for starting this ?? PLEASE ANSWER SO THAT I CAN MAKE A DECISION WHETHER TO START OR NOT..... BCZ I REALLY WANT TO !! and I know HTML CSS bootstrap & some js
Cant webRTC access mobile camera?
Everything works on computer but when I access my site through mobile, camera doesn't open
do you guys think with this api it's possible to store the created room in a database so that the web application can handle different rooms going on a video call session at the same time?
Amazing, thank you ❤🥹
Thank yo for making this video
Great course! Easy to follow! How to convert webRTC to rtmp stream?
Can anyone tell me the prerequisites of this project/WebRTC?? Please reply
Just JS knowledge. Although I’d recommend having the webrtc docs open while watching this
@@DennisIvy Thanks as always . another great video by you.🤗
How do i like this twice...
😄
For some reason my camera is blank cant see myself in the camera, could you advice me why
Nice work
this guy is on fire
When you're testing the app on one computer, is there any way to share the video source between two instances of the web page? Seems I've almost got this going, except I can't open a second browser page because the webcam is in use by the first web page.
Thank you Brad and Dennis 🥹, God bess you guys!
Can you show us how to deploy? It'd be very helpful