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 !
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!
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.
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.
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
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
Can someone explain me at 2:35:47 room_rtc does not have the expandVideoFrame function Still the settings get applied to the video container How is it possible? Also, I have checked in the github It's not present there as well My code gives error about expandVideoFrame is not defined
Pls tell is Agora video SDK is working for project 2 at around 2:00:00? The js file which i downloaded as Agora is not working and no changes are added to website after that.pls someone reply
when I test the app from the min 22:15 nothing happens, I can only see the 2 black boxes and nothing about the camera permission, is there anything extra I should do? the camera is not blocked in chrome settings
Try to check your settings or just try this code to make sure it works ``` var video = document.getElementById("video"); navigator.mediaDevices .getUserMedia({ video: true, audio: false }) .then((stream) => { video.srcObject = stream; video.play(); }) ```
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?
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?
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?
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.
followed the tutorial till 2:23:03 but in no case am i seeing any instance of video projection created when i open my live server on a new tab. Can any one help??
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?
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.
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 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!
Hey! Great tutorial, but one thing I don't understand is that local user and remote user both have their own 'peerConnection' variable. So how is it possible for the local user's peerConnenction to know (using peerConnection.ontrack) when the remote user adds their media tracks using their peerConnection.addTrack()? Thanks in advance.
The here is that `ontrack` runs on the local `peerConnection` after `setRemoteDescription`. That's how we explicitly map the remote streams to the local connection
Would it be possible to add user-side custom overlays such as pose detection and landmark display, or a center stage type auto-track and zoom without going thru OBS or another virtual cam?
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! 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.
Hey , @Traversy Media , we have made your project and it is working fine with two users on one system but when we are running this on two different machines then video is not shown over there and also on the other system (user 2 ) buttons except end call are not working . Please ,look into this query and give me solutions ?????
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?
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?
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
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 }
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 TH-cam 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
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..? 😳
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 !
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 💙
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.
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!
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.
Thank you so much Brad and Dennis! You guys are my all time heroes🔥❤
😊
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
You two guys are the smartest tutors online.
I can't thank you enough !
Merci beaucoup !
Muchas gracias !
From DRC.
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
It’s Dec 2024 and I’m watching this and I’m blown away by this. Massive thanks for sharing this Tutorial 🙌🏽🙌🏽
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.
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
this channel make us to be another level skill. thank you
Thank you so much for posting this video. It made WebRTC concept 100 times easier to understand.
Amazing video. The timing was impeccable! Just what I need for my project
Was struggling to find a good and very well-explained tutorial on WebRTC. Then I saw Dennis.
Daym my man 👌🏻
Saved my ass.
Brilliant Brilliant Brilliant. About time someone posted something that makes total sense when it comes to WEBRTC
This is the best video ever on youtube, thank you guys for your share. A big Thanks to every members of travery media ❤❤❤❤
ohhhhhhh myyy gooddd WebRTC FULL TUTORIAL? am i dreaming
Thank you for the tutorial and insights on using agora as third party SDK/ API. I really appreciate it!
Have u completed
Thanks for everything @Dennis you got a new subscriber and already subscribed to this channel
Amazing... You are amazing programmer 😇😇😇.. A million of thankful🙏...
You’re very welcome 😉
This exactly what I'm looking for. I am personally a huge fan of Dennise.
Awesome projects. Mumble IPO in 3 months
Haha!
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
Must see video.. thank you guys !!!
Hope you enjoy!
Take a bow , this guy is our hero
Finally a WebRTC course!
02:00 - Unfortunately, it seems like project number 1 used Agora as well (33:00), so this disclaimer is.. questionable..?
Can someone explain me at 2:35:47 room_rtc does not have the expandVideoFrame function
Still the settings get applied to the video container
How is it possible?
Also, I have checked in the github
It's not present there as well
My code gives error about expandVideoFrame is not defined
I've been waiting for this 😍👍
Haha then the timing is perfect!
Now that’s what I call a fine
job !!!! 👍👍👍
Couldn’t have done it better
myself .
Thanks Brad & Dennis for this video :)
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. :)
Absolutely amazing , thank you
Thankyou very Dennis and Brad 👍
No words i wanted this project
Brilliant! thank you so much!
Pls tell is Agora video SDK is working for project 2 at around 2:00:00? The js file which i downloaded as Agora is not working and no changes are added to website after that.pls someone reply
yes it is working
This is great. Love this!
Thank you so much 👍🏼🎉🤛🙏⭐,. Really Cool application
26:42 got error in cannot set properties of null (settings srcObject)
Pls give solution
This is just great content
🙏
Thanks a lot sir god bless you Brad and Dennis
when I test the app from the min 22:15 nothing happens, I can only see the 2 black boxes and nothing about the camera permission, is there anything extra I should do? the camera is not blocked in chrome settings
Try to check your settings or just try this code to make sure it works
```
var video = document.getElementById("video");
navigator.mediaDevices
.getUserMedia({ video: true, audio: false })
.then((stream) => {
video.srcObject = stream;
video.play();
})
```
@@Adelious_ still not working
Bro but 20:00 there not show even black boxes only white window show
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?
You guys are doing the most
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?
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?
Let's go Ivy
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
Thanks for sharing!!!!
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.
Amazing!
followed the tutorial till 2:23:03 but in no case am i seeing any instance of video projection created when i open my live server on a new tab. Can any one help??
just check if you have put correct id or classname in js file as it is in html
thanks a lot ,for great tutorial , how i can add Choosing the camera (front / rear) ?
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?
excellent, thank you very much, very clear to learn
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.
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.
Very Helpful Thanks man!!
Getting error Uncaught (in promise) RtmUnauthenticatedError: Error Code 5 - The vendor enabled the dynamic key, but uses the static key.
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!
22:53 camera pop up show but picture not come even i allow it
Awesome ⚡⚡⚡⚡
Good Tutorial. Can you please provide more information regarding TURN Servers and how to host and use it? Thank you
👍👍👍👍
It helps me a lot, Appreciate !
hey i cannot find the real time messaging sdk under download section for web pls you tell what to do
Nice work
Hey! Great tutorial, but one thing I don't understand is that local user and remote user both have their own 'peerConnection' variable. So how is it possible for the local user's peerConnenction to know (using peerConnection.ontrack) when the remote user adds their media tracks using their peerConnection.addTrack()? Thanks in advance.
I think because It's done after the handshaking (offer/candidate/answer)
The here is that `ontrack` runs on the local `peerConnection` after `setRemoteDescription`. That's how we explicitly map the remote streams to the local connection
Would it be possible to add user-side custom overlays such as pose detection and landmark display, or a center stage type auto-track and zoom without going thru OBS or another virtual cam?
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 😊🙏❤️😊.
Does Agora charge / count minutes if the chat room is idle and camera is just left on?
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?
thank you so much for the video. and does anybody know what's the bug with the main scrollbar only not working
For some reason my camera is blank cant see myself in the camera, could you advice me why
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.
Hey , @Traversy Media , we have made your project and it is working fine with two users on one system but when we are running this on two different machines then video is not shown over there and also on the other system (user 2 ) buttons except end call are not working . Please ,look into this query and give me solutions ?????
Cant webRTC access mobile camera?
Everything works on computer but when I access my site through mobile, camera doesn't open
Amazing, thank you ❤🥹
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?
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?
Thank you for this amazing work. Do you have any video like this for Java?
Great course! Easy to follow! How to convert webRTC to rtmp stream?
Thanku so much from Karakalpakstan
Thank you Brad and Dennis 🥹, God bess you guys!
Hey there! Thanks for the great video! On the demo page all rooms are shown, that are currently active. How did you achieve that?
Thanks :)
What if I wanna pull the video from a google drive link and not allow anyone to stream at all?
Thank yo for making this video
Does this tutorial relate to dynamic token generation for Agora? I am receiving errors while following along.
Thank you ❤️
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
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
}