Web RTC Full Course & More

Поделиться
HTML-код
  • Опубликовано: 23 ноя 2024

Комментарии • 423

  • @Djinn667
    @Djinn667 9 месяцев назад +104

    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.

    • @ahammedmushfiq4588
      @ahammedmushfiq4588 9 месяцев назад +4

      Can you tell me where the data is stored.
      Is there a database...
      How can I contact you?

    • @nilaypatil4721
      @nilaypatil4721 8 месяцев назад

      Thanks a Lot!!!!

    • @maheshkeshwala62
      @maheshkeshwala62 8 месяцев назад

      did u get it@@ahammedmushfiq4588

    • @ahammedmushfiq4588
      @ahammedmushfiq4588 7 месяцев назад

      @@maheshkeshwala62 no

    • @Sam-de8tc
      @Sam-de8tc 7 месяцев назад

      all the other thing works right?

  • @francescociulla
    @francescociulla 2 года назад +26

    0:55 I cant' believe it made it on the World-famous Brad's RUclips Channel. Thank you Dennis!

  • @jczaykowsky8967
    @jczaykowsky8967 Год назад +8

    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 },
    },

    • @ahammedmushfiq4588
      @ahammedmushfiq4588 9 месяцев назад

      ​@@iam-Coderpls let me know

    • @anshvora9119
      @anshvora9119 9 месяцев назад

      where do we make these changes?

    • @potatothetechguy
      @potatothetechguy 2 месяца назад

      @@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

  • @frankiefab
    @frankiefab 2 года назад +17

    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.

  • @mdndev2627
    @mdndev2627 2 года назад +43

    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.

    • @SteveOluwatobi
      @SteveOluwatobi 11 месяцев назад

      How do you advise that I sell the video call skill I learnt from this video

    • @shineLouisShine
      @shineLouisShine 10 месяцев назад

      ​@@SteveOluwatobisharing a link to your repo..? 😳

  • @teranneranga3586
    @teranneranga3586 2 года назад +49

    Thank you so much Brad and Dennis! You guys are my all time heroes🔥❤

  • @CodingPhase
    @CodingPhase 2 года назад +25

    Great video Dennis you definitely put in a lot of work in this project.

    • @DennisIvy
      @DennisIvy 2 года назад +2

      🙏

    • @iam-Coder
      @iam-Coder 7 месяцев назад

      @@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 !

  • @scottonanski4173
    @scottonanski4173 2 года назад +34

    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
      @DenzelHooke 2 года назад +3

      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.

    • @scottonanski4173
      @scottonanski4173 2 года назад +2

      @@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);
      })
      }

    • @DenzelHooke
      @DenzelHooke 2 года назад +2

      @@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.

    • @scottonanski4173
      @scottonanski4173 2 года назад

      @@DenzelHooke I see it now!

  • @suryadiptasarkar5440
    @suryadiptasarkar5440 2 года назад +11

    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
      @DennisIvy 2 года назад +2

      ☺️

    • @suryadiptasarkar5440
      @suryadiptasarkar5440 2 года назад

      @@DennisIvy You're a lifesaver ! Thank you for putting out the amazing content , I am really grateful to you 💙

  • @justinamehunke3008
    @justinamehunke3008 2 года назад +3

    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

  • @aurelienbaraka2527
    @aurelienbaraka2527 Год назад +3

    You two guys are the smartest tutors online.
    I can't thank you enough !
    Merci beaucoup !
    Muchas gracias !
    From DRC.

  • @z0mbiebanana9891
    @z0mbiebanana9891 2 года назад +54

    Realtime messaging is now called Signaling, and you can find that in the API reference documentation mentioned at 38:08

    • @isazisempi3896
      @isazisempi3896 Год назад +2

      When I type AgoraRTM is says it's not definened in my console.

    • @Adelious_
      @Adelious_ Год назад

      @@isazisempi3896 Maybe you don't call the script in the html file ? 34:30

    • @jesushurtado1560
      @jesushurtado1560 Год назад +1

      Thanks man, i love you!

    • @kugelblitz7946
      @kugelblitz7946 Год назад

      @@isazisempi3896 same.. did you figure out how

    • @amandwivedi6867
      @amandwivedi6867 Год назад

      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.

  • @alamshaikh4358
    @alamshaikh4358 2 года назад +8

    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.

  • @hououinkyouma5372
    @hououinkyouma5372 2 года назад +41

    Oh wow didn't expect a WebRTC tutorial from this channel. That's a sphere most tech youtubers don't touch lol. Very nice :)

  • @nwankwoernestonyebuchi1085
    @nwankwoernestonyebuchi1085 11 месяцев назад

    Thanks alot Denis and brad for all your efforts towards nurturing up coming developers through all your amazing free tutorials here

  • @eoincarrick7805
    @eoincarrick7805 2 года назад +3

    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

  • @jianpatricio7196
    @jianpatricio7196 5 месяцев назад

    Thank you for the tutorial and insights on using agora as third party SDK/ API. I really appreciate it!

    • @Tiburuchi
      @Tiburuchi 5 месяцев назад

      Have u completed

  • @makih_ahmad
    @makih_ahmad 2 года назад +4

    this channel make us to be another level skill. thank you

  • @navidmafi
    @navidmafi 2 года назад +2

    ohhhhhhh myyy gooddd WebRTC FULL TUTORIAL? am i dreaming

  • @snoudev
    @snoudev 10 месяцев назад

    This is the best video ever on youtube, thank you guys for your share. A big Thanks to every members of travery media ❤❤❤❤

  • @LordFullStack
    @LordFullStack 7 месяцев назад

    Was struggling to find a good and very well-explained tutorial on WebRTC. Then I saw Dennis.
    Daym my man 👌🏻
    Saved my ass.

  • @amieexxcauntie2671
    @amieexxcauntie2671 2 года назад +5

    Amazing... You are amazing programmer 😇😇😇.. A million of thankful🙏...

    • @DennisIvy
      @DennisIvy 2 года назад

      You’re very welcome 😉

  • @pramodashta
    @pramodashta 2 года назад

    Thank you so much for posting this video. It made WebRTC concept 100 times easier to understand.

  • @willaddison9234
    @willaddison9234 2 года назад

    Brilliant Brilliant Brilliant. About time someone posted something that makes total sense when it comes to WEBRTC

  • @timothyndichu4628
    @timothyndichu4628 Год назад +1

    Amazing video. The timing was impeccable! Just what I need for my project

  • @BoolFalse
    @BoolFalse 2 года назад +5

    Must see video.. thank you guys !!!

    • @DennisIvy
      @DennisIvy 2 года назад +1

      Hope you enjoy!

  • @tadaspetra
    @tadaspetra 2 года назад +2

    Awesome projects. Mumble IPO in 3 months

  • @herbertk9266
    @herbertk9266 2 года назад +1

    Thanks for everything @Dennis you got a new subscriber and already subscribed to this channel

  • @abubalo
    @abubalo 2 года назад

    This exactly what I'm looking for. I am personally a huge fan of Dennise.

  • @abhaythakur8572
    @abhaythakur8572 2 года назад +2

    Take a bow , this guy is our hero

  • @davitjanashia9344
    @davitjanashia9344 2 месяца назад +1

    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?

  • @dgloria
    @dgloria 2 года назад

    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. :)

  • @66saly
    @66saly 2 года назад +2

    I've been waiting for this 😍👍

    • @DennisIvy
      @DennisIvy 2 года назад +1

      Haha then the timing is perfect!

  • @emmanuelmanalo8790
    @emmanuelmanalo8790 2 года назад +3

    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?

  • @srikanthambaldhage2268
    @srikanthambaldhage2268 Год назад +1

    Thankyou very Dennis and Brad 👍

  • @mahendranath2504
    @mahendranath2504 2 года назад +2

    Thank you so much 👍🏼🎉🤛🙏⭐,. Really Cool application

  • @rkcoder
    @rkcoder 2 года назад +2

    Finally a WebRTC course!

  • @nemotivity
    @nemotivity 2 года назад +58

    Dennis is on his way to disrupting Zoom and Google Meet..! 😂😂

    • @DennisIvy
      @DennisIvy 2 года назад +8

      Coming after them!

    • @KidusEfrem-u7b
      @KidusEfrem-u7b Год назад +1

      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

  • @nicoleg8857
    @nicoleg8857 Год назад +1

    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.

  • @ayush2961
    @ayush2961 2 года назад +2

    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?

  • @erasmusmensah7428
    @erasmusmensah7428 2 года назад +1

    Much love from Ghana

  • @dhananjaydeshmukh3469
    @dhananjaydeshmukh3469 2 года назад +1

    No words i wanted this project

  • @jocelynmedina906
    @jocelynmedina906 2 года назад +1

    Absolutely amazing , thank you

  • @Amanmathur150
    @Amanmathur150 Год назад +1

    Getting error Uncaught (in promise) RtmUnauthenticatedError: Error Code 5 - The vendor enabled the dynamic key, but uses the static key.

  • @othmanbouchemoukha1844
    @othmanbouchemoukha1844 2 года назад +2

    Brilliant! thank you so much!

  • @muhammadidrees6650
    @muhammadidrees6650 2 года назад +6

    Hi Brad, could you have someone to do an Angular project please?
    Love your work , always 🎉🎉❤❤🎉🎉😊😊

    • @TraversyMedia
      @TraversyMedia  2 года назад +6

      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.

    • @muhammadidrees6650
      @muhammadidrees6650 2 года назад

      Thank you so much Brad, you are legend , stay blessed 😊🙏❤️😊.

  • @dindustack
    @dindustack 2 года назад +3

    Thanks for sharing!!!!

  • @pankitpatel1987
    @pankitpatel1987 2 года назад

    Now that’s what I call a fine
    job !!!! 👍👍👍
    Couldn’t have done it better
    myself .

  • @lochanthapa
    @lochanthapa 2 года назад +1

    Good Tutorial. Can you please provide more information regarding TURN Servers and how to host and use it? Thank you
    👍👍👍👍

  • @sadev0
    @sadev0 2 года назад

    Thanks Brad & Dennis for this video :)

  • @ramadanmobarak-so8oh
    @ramadanmobarak-so8oh Год назад

    Thanks a lot sir god bless you Brad and Dennis

  • @krasnov656
    @krasnov656 2 года назад +2

    Let's go Ivy

  • @ormma
    @ormma Год назад +1

    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
    }

  • @wazzadev7209
    @wazzadev7209 2 года назад +3

    This is just great content

  • @itechds6988
    @itechds6988 2 года назад +1

    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?

  • @pheellomolokoli5016
    @pheellomolokoli5016 2 года назад

    You guys are doing the most

  • @bloggrammer
    @bloggrammer 2 года назад +1

    This is great. Love this!

  • @peterparker7146
    @peterparker7146 Год назад +1

    How to deploy this project and make live

  • @shineLouisShine
    @shineLouisShine 10 месяцев назад

    02:00 - Unfortunately, it seems like project number 1 used Agora as well (33:00), so this disclaimer is.. questionable..?

  • @moinulislammoin
    @moinulislammoin 2 года назад +3

    Amazing!

  • @aikanshgarg8995
    @aikanshgarg8995 Год назад +1

    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!

  • @ammaralawadat789
    @ammaralawadat789 2 года назад +1

    thanks a lot ,for great tutorial , how i can add Choosing the camera (front / rear) ?

  • @GeorgeGalanis1010
    @GeorgeGalanis1010 2 года назад +1

    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.

  • @rafalorenzogil1900
    @rafalorenzogil1900 2 года назад +1

    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?

  • @cj9254
    @cj9254 7 месяцев назад +1

    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.

  • @jesushurtado1560
    @jesushurtado1560 Год назад +1

    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?

  • @andrewandrosow4797
    @andrewandrosow4797 3 месяца назад

    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.

  • @edited_official
    @edited_official 6 месяцев назад

    Thanku so much from Karakalpakstan

  • @iam-Coder
    @iam-Coder 9 месяцев назад +1

    hey i cannot find the real time messaging sdk under download section for web pls you tell what to do

  • @123456tushar
    @123456tushar 2 года назад +1

    How to make it scalable and handle volume and ultimately?

  • @yingcheng1589
    @yingcheng1589 2 года назад +1

    What's RTC? And what OS are you on?

  • @edward.y.rogers
    @edward.y.rogers Год назад

    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?

  • @martianstarslit3768
    @martianstarslit3768 9 месяцев назад

    Thank you for this amazing work. Do you have any video like this for Java?

  • @k-popworldwide3282
    @k-popworldwide3282 2 года назад +2

    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.

  • @zrizzy6958
    @zrizzy6958 Год назад +1

    thank you so much for the video. and does anybody know what's the bug with the main scrollbar only not working

  • @harendrapratapsingh8210
    @harendrapratapsingh8210 9 месяцев назад

    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?

  • @dasofied
    @dasofied 2 года назад

    Very Helpful Thanks man!!

  • @abeechr
    @abeechr 2 года назад +1

    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?

  • @kennethkipchumba2532
    @kennethkipchumba2532 2 года назад +2

    Amazing.

  • @brijeshkanchan9776
    @brijeshkanchan9776 10 месяцев назад +2

    Hi, I am not able to find Real-time messaging sdk under download section for web

    • @iam-Coder
      @iam-Coder 9 месяцев назад

      did you got it ?

    • @ranvijaysingh3127
      @ranvijaysingh3127 8 месяцев назад

      @@iam-Coderits called signalling now

  • @nnaomamiracle326
    @nnaomamiracle326 2 года назад +2

    Thank you ❤️

  • @abb00717
    @abb00717 3 месяца назад

    It helps me a lot, Appreciate !

  • @fadirezeksalloum3993
    @fadirezeksalloum3993 Год назад

    Hello Dennis. We need the first project without Agora please. Thank you for your videos ❤

  • @NarciGH
    @NarciGH 2 года назад +1

    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?

  • @rahmiliza4118
    @rahmiliza4118 2 года назад

    excellent, thank you very much, very clear to learn

  • @official.mhm13
    @official.mhm13 2 года назад +2

    Awesome ⚡⚡⚡⚡

  • @VaishnaviNigam
    @VaishnaviNigam 2 года назад

    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

  • @codingsword
    @codingsword 2 года назад

    Cant webRTC access mobile camera?
    Everything works on computer but when I access my site through mobile, camera doesn't open

  • @lituanaskobea.9826
    @lituanaskobea.9826 3 месяца назад

    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?

  • @lifeisbeautifu1
    @lifeisbeautifu1 Год назад

    Amazing, thank you ❤🥹

  • @shreyasmarvel9516
    @shreyasmarvel9516 Год назад

    Thank yo for making this video

  • @BatShvit
    @BatShvit 2 года назад +1

    Great course! Easy to follow! How to convert webRTC to rtmp stream?

  • @crust5532
    @crust5532 2 года назад +2

    Can anyone tell me the prerequisites of this project/WebRTC?? Please reply

    • @DennisIvy
      @DennisIvy 2 года назад +1

      Just JS knowledge. Although I’d recommend having the webrtc docs open while watching this

    • @crust5532
      @crust5532 2 года назад

      @@DennisIvy Thanks as always . another great video by you.🤗

  • @ezrakeeps
    @ezrakeeps 2 года назад +3

    How do i like this twice...

  • @antwindies12.
    @antwindies12. Год назад +1

    For some reason my camera is blank cant see myself in the camera, could you advice me why

  • @musakosker
    @musakosker 2 года назад +2

    Nice work

  • @stephenkimotho752
    @stephenkimotho752 2 года назад

    this guy is on fire

  • @georgegalanis9233
    @georgegalanis9233 2 года назад +1

    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.

  • @danimydev
    @danimydev 2 года назад +1

    Thank you Brad and Dennis 🥹, God bess you guys!

  • @MasGnaw
    @MasGnaw Год назад

    Can you show us how to deploy? It'd be very helpful