Mastering webRTC part 2 - real-time video and screen-share

Focused View

Robert Bunch

8:38:36

80 View

1 - Introduction

1 - Introduction.mp4

04:23

2 - All my code github link.html

3 - How I code.mp4

03:57

2 - rtcPeerConnection Stream video peer to peer

4 - Section Demo Overview.mp4

05:57

5 - rtcPeerConnection and signaling.mp4

07:21

6 - Signaling Part 1 SDP.mp4

02:58

7 - Signaling Part 2 ICE and STUN.mp4

06:56

8 - File Structure.mp4

07:26

9 - local RTC.mp4

13:39

10 - setLocalDescription.mp4

04:07

11 - Socketio and HTTPS setup.mp4

09:26

12 - Connection TaskList.mp4

05:45

13 - Connection TaskList part 2.mp4

12:29

14 - emit newOffer.mp4

09:05

15 - Emit iceCandidates.mp4

08:18

16 - Load existing and new offers on all clients.mp4

09:08

17 - Create answer.mp4

08:52

18 - Error handling the signaling process.mp4

07:51

19 - Emitting answer.mp4

07:17

20 - Listening for answer and setRemoteDescriptionanswer.mp4

06:28

21 - Apply ICE candidates Part 1.mp4

08:06

22 - Apply ICE candidates Part 2.mp4

05:16

23 - Add tracks from remote peer MAGIC.mp4

05:34

24 - Loading on another device on the same network.mp4

04:37

3 - webrtc and React a TeleLegal site

25 - Project Demo.mp4

05:30

26 - Project Structure and Frontend Setup.mp4

05:33

27 - Backend Setup.mp4

07:53

28 - Creating a JWT link to simulate scheduling.mp4

10:43

29 - Add ReactRouter for our frontend.mp4

05:26

30 - Setup JoinVideo route and get the decoded data in React.mp4

08:11

31 - Add starting components.mp4

09:32

32 - Wire up redux and make callStatus reducer.mp4

07:37

33 - Add action buttons bootstrap and fontawesome.mp4

07:27

34 - getUserMedia and store the stream in redux.mp4

09:20

35 - Create peerConnection and store it in redux.mp4

06:44

36 - Thinking through where our functions belong a few bug fixes.mp4

06:14

37 - Abstracting the Video and Audio buttons.mp4

07:36

38 - Adding the local video feed.mp4

09:37

39 - Add our tracks to the peerConnection.mp4

07:58

40 - Enable and disable mute the local video feed.mp4

06:23

41 - Display local video inputs camera options.mp4

11:20

42 - Set new video device on select.mp4

06:53

43 - replaceTracks.mp4

08:18

44 - Abstract DropDown component.mp4

03:07

45 - Set up AudioButton component.mp4

10:57

46 - Switch Audio Input and Output Devices.mp4

10:53

47 - Start mute unmute audio.mp4

09:53

48 - Organize offers on backEnd and add uuid.mp4

07:47

49 - createOffer once the tracks are shared.mp4

13:08

50 - Add Dashboard markup for professional.mp4

04:48

51 - Optional Overview of markup.mp4

01:52

52 - Authenticate professional.mp4

09:44

53 - socket refactoring.mp4

09:08

54 - Reorganize Appointment Data.mp4

03:14

55 - Pull Appointment Data.mp4

09:24

56 - Listen for offers.mp4

10:59

57 - Create join video route for professional.mp4

05:36

58 - Add Call Info to Professional Video Page.mp4

03:44

59 - Create Answer and set Descriptions.mp4

10:12

60 - Review Task List and Cheer for Our Progress.mp4

06:32

61 - Emit Answer Up To Server.mp4

07:57

62 - Listen for New Answer.mp4

11:49

63 - Emit Ice Candidates.mp4

09:17

64 - Send Ice Candidates to clients.mp4

12:38

65 - Add Ice Candidates to Peer Connection.mp4

11:36

66 - AddTracks and VICTORY test app.mp4

05:34

67 - Fix 2 small bugs.mp4

02:19

68 - Make the HangupButton do something.mp4

05:24

69 - ReplaceTracks on change device.mp4

07:53

Description

webRTC, Part 2 - connecting the browsers - PeerConnection & Signaling, w/Reach

What You'll Learn?

Connect two or more computers audio/video streams
Set up a signaling server to act as a middle man to negotiate the connection
How to integrate webRTC into a React App w/redux
Code organization to minimize confusion as your app grows
Manage 4 (yes 4) different async sources to create an incredible web app

Who is this for?

Anyone familiar with JavaScript and node who is new to webRTC!

Anyone familiar with the browser webRTC api, but can't seem to get the browsers to connect

Anyone who wants to put video conferencing in their web app for free (no 3rd party required)!

What You Need to Know?

Need to be familiar with getUserMedia() or have taken part 1

Experience with JavaScript and Node (not a ninja, but decent exposure)

We use socketio to build our signaling server. You must know it, or be able to follow me

For later sections: Access to a Linux machine (like AWS, Azure, DigitalOcean, etc)

More details

Description
This course is part 2Â covering the second part of the webRTC api: connecting to another browser and everything that goes into it (namely signaling!). I won't assume you know a single thing about RTCPeerConnection or signaling. Part 1 covers getUserMedia, is ~2 hours, and is free here on Udemy.
It's 2023. Whether because of the pandemic, chat bots, or cost savings, working remote is a thing. Telemedicine is a thing. Talking to people 6 time zones away is a thing. You can abstract your users from your app to Zoom because it always works, but you lose all control and tracking of the interaction.
Enter webRTC.
WebRTC is one of the browsers must mind blowing apis. It allows access to the mic, camera, even the screen AND to share them across a network socket DIRECTLY to another browser. No server (mostly) or other middleman to add bandwidth, bugs, and chaos.
Along with websockets, webRTC presents the video-side of browser real-time communication, bridging one of the last gaps in both human and web-based communication. There's a good chance if you're reading this, you've heard about webRTC. Maybe even done a tutorial on it. But how far did you get? In my experience, the vast majority of the material on the web goes no farther than a quick-start, zoom clone.Â You don't learn how anything works, never look at the docs, and are stuck at the end wondering what to do now.Â Is that all webRTC can do?Â The remaining shred of material is waaaaay over everyone's head. The fact that the webRTC was released about the same time as the websocket APIÂ and most developers still don't know how to use it is evidence of the gap.
This course is the first step to alleviate that! It is not a quick start guide to webRTC. There are loads of those all over theÂ Internet. You should definitely look elsewhere if you are wanting a 10 minute intro to the 3-4 things you need to know to make a basic zoom clone. On the other hand, if you are looking to really learn one of the most awesome JavaScript APIs that no one seems to know, you should stick around. Like Express and other JavaScript/Node pieces, it's getting passed over in the wave to learn just enough to get to the term "full-stack developer." My main goal is to help you figure out how to go from being a good developer to a great developer. Understanding... not just knowing a few methods... WebRTC is part of that!
I first used webRTC in 2015 for a startup similar to telemedicine. I've been following since and have been frustrated that it hasn't gotten more mainstream notice due to Apple's reluctant support, but mostly because devs don't know it. It opens the way for so many improvements to existing applications and obvious groundwork for new ones. Let's change that :)Â Prepare to for a detailed look at webRTC and start going in-app real-time video/screen chat.
What we cover:
RTCPeerConnection - the heart of webRTC
Creating an offer and an answer
Setting RTCSessionDescription
The SignalingÂ Process
Build a signaling server with socketio
Gathering ICE Candidates
Building a React app w/redux that uses webRTC

Who this course is for:
Anyone familiar with JavaScript and node who is new to webRTC!
Anyone familiar with the browser webRTC api, but can't seem to get the browsers to connect
Anyone who wants to put video conferencing in their web app for free (no 3rd party required)!

User Reviews

Rating

average 0

Total votes0

Focused display

Web App Development

Robert Bunch

Instructor's Courses

Robert Bunch has been a developer since 2004, having built complex applications for small tech startups to major companies. Most recently, he has been a code school instructor since 2015 where he's worked directly with students applying his passion for teaching and development. His ability to break down the complexities of code and demystify the magic trick, have had immense success as told by his students. He earned a computer science degree in 2001.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.