WebRTC Let's learn together (ReactJS) - Part 3

This is Part 3 of the series (Updated due to video clipping issue)

In part 2 of this series we demonstrated the manual exchange of SDP and ICE Candidate between two Peer Connections(two browsers) from different computers in the same LAN as well as from separate networks. The goal there was to enhance your understanding of how an Offer/Answer are generated and exchanged.

In this video, we go over the same concept using ReactJS but this time we actually develop a simple signalling server (using express and socket.io) to communicate the exchange of SDP and ICE candidates. We also demonstrate when a STUN server is required.

********************
Updated: WebRTC Let's learn together (ReactJS) - Part 2

Thanks to 'TheGame Guru 7' for pointing out that onaddstream has been removed from the specification and instead use ontrack - this is @ 6:55 in Part 2 video. Please comment out old code ...

// this.pc.onaddstream = ...
// this.remoteVideoref.current.srcObject = e.stream
...

... and change to ...

this.pc.ontrack = ...
this.remoteVideoref.current.srcObject = e.streams[0]
...
********************

Source code
https://github.com/jamalag/webrtc

Some useful links …

... watch Part 1
https://www.youtube.com/watch?v=h2WkZ0h0-Rc&list=PL_YW-znSZ_dK365WaVuiBUN6FYc9_1hni&index=1

... watch Part 2
https://www.youtube.com/watch?v=UMy6vV4tW00&list=PL_YW-znSZ_dK365WaVuiBUN6FYc9_1hni&index=2

Troubleshooting WebRTC Connection Issues
https://blog.addpipe.com/troubleshooting-webrtc-connection-issues/

WebRTC Troubleshooter
https://test.webrtc.org/

Tricle ICE
https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/

Free open source implementation of TURN and STUN Server
https://github.com/coturn/coturn

Breakdown of an SDP (Session Description Protocol)
https://webrtchacks.com/sdp-anatomy/

Signalling Challenge
https://www.ably.io/blog/solving-the-webrtc-signalling-challenge/

Secure Tunnels to localhost
https://ngrok.com/