Paul introduces WebRTC as an open-source project that lets browsers and mobile apps communicate using real-time audio, video, and data. He describes peer-to-peer calling as a way to build features such as group video calls, while noting that real-world connections need help finding each other.
Real Time video communication made easy with RN (and WebRTC)
Speaker
Akshat Paul, a software developer and Company360 co-founder, explains how WebRTC works and how to build a React Native video calling demo at React Native EU 2021 with Callstack.
A signaling server exchanges connection details, including an offer and answer, but does not carry the media once peers connect. ICE gathers candidate addresses and ports to find a route, often with help from a STUN server. When direct connections fail, a TURN server relays traffic, which can add latency and infrastructure costs.
Paul demonstrates a local setup with a Node server and a React Native client, using Express, PeerJS, Socket.IO, UUID, and React Native WebRTC. The server assigns peer IDs, while clients join a shared room and exchange media streams. The demo connects an emulator and an Android device; video permissions prevent the images from appearing, but stream data is logged successfully.
Paul says developers can build their own server or use services such as Firebase and Twilio for scalable applications. He points to telemedicine and drone video streaming alongside video calls as possible uses. He presents WebRTC with React Native as a way to add real-time communication to mobile applications.
Takeaways
- A signaling server helps peers exchange connection details; it does not carry media after a direct connection is established.
- Use STUN to help discover connection routes, and plan for TURN relays when firewalls or network restrictions prevent direct connections.
- TURN can keep a call working when direct connectivity fails, but relaying adds latency, traffic, and infrastructure costs.
- A local React Native demo can use a shared room, peer IDs, and media streams to connect devices.
- Real-time communication can support uses beyond calls, including telemedicine and drone video streaming.
Mentioned in this talk
Search inside this talk
What was claimed 14
- foundedAkshat Paul founded Company360co-founder
“I’m also co-founder of Company360”
YouTube Unverified1 source· Talk
- featureWebRTC: Enables real-time communication through APIs across browsers and mobile applications
“provides browsers and mobile applications with real-time communication through simple APIs”
YouTube Unverified1 source· Talk
- featureWebRTC: Supports peer-to-peer real-time audio and video streams between two or more parties
“build peer-to-peer, real-time audio and video streams between two or more parties”
YouTube Unverified1 source· Talk
- usesWebRTC uses signaling server
“At a minimum, we require something called a signaling server.”
YouTube Unverified1 source· Talk
- featuresignaling server: Allows peers to securely exchange connection data before media or data flows between them
“It allows two parties to securely exchange connection data.”
YouTube Unverified1 source· Talk
- featureICE: Coordinates discovery of peers' public-facing IP addresses and candidate paths
“helps clients or peers coordinate the discovery of their public-facing IP addresses”
YouTube Unverified1 source· Talk
- uses
“WebRTC does this in the background using a STUN server.”
YouTube Unverified1 source· Talk
- featureSTUN: Helps identify public-facing IP addresses for direct peer-to-peer connections
“In a WebRTC connection, it asks and answers one question: What is the IP address?”
YouTube Unverified1 source· Talk
- uses
“In that case, we have a backup: a TURN server.”
YouTube Unverified1 source· Talk
- featureTURN: Relays traffic when a direct connection between peers cannot be established
“When a STUN server can’t establish a connection between two peers, a TURN server steps in as an intermediary.”
YouTube Unverified1 source· Talk
- built
“You can find the source code at github.com/akshatpal/rneu21.”
YouTube Unverified1 source· Talk
- integrates withReact Native WebRTC integrates with React Native
“For our client application, we’ll use React Native, Redux, Socket.IO, and React Native WebRTC.”
YouTube Unverified1 source· Talk
- integrates withWebRTC integrates with React Native
“For our client application, we’ll use React Native, Redux, Socket.IO, and React Native WebRTC.”
YouTube Unverified1 source· Talk
- featureReact Native WebRTC: Accesses the media device to obtain video streams for the application
“React Native WebRTC accesses our media device to get the video”
YouTube Unverified1 source· Talk
