WebRTC and React Native

Marius and Matias will talk about WebRTC and how they use it with React Native at No Isolation.

By Marius Aabel, CTO at No Isolation and Matias Doyle, Developer at No Isolation

=====================================================
Follow us and join our Slack community:

- ReactJS Norway's site: http://bit.ly/2ka4hC8
- Facebook: http://bit.ly/2kxmHxW
- Instagram: http://bit.ly/2kpysnJ
- Twitter: http://bit.ly/2kaehvl
- Youtube: http://bit.ly/2kANuJl
- Slack Community: https://goo.gl/YwUUKJ

Transcript

1. 29/06/2017 noisolation.com
2. 29/06/2017 noisolation.com Who we are Marius Aabel
 CTO, Founder
 aabel@noisolation.com
 Matias Doyle
 Developer, Founder
 doyle@noisolation.com

3. 29/06/2017 noisolation.com No Isolation • Funded October 2015 • Our goal is to eliminate social isolation • 3 to 48 employees in under 2 years • First product AV1 • Helping children with long term illness • Second product KIT • Helping seniors that cannot use modern technology
4. 29/06/2017 noisolation.com What we needed • A secure peer-to-peer audio and video solution • Build on existing knowledge in the field • A platform we could use to continuously improve our products and build other • Open source
5. noisolation.com WebRTC
6. 29/06/2017 noisolation.com What is WebRTC • Standardised peer-to-peer audio, video, data streaming • Supported by most modern browsers – without plugins • Support for iOS and Android native apps • You don't need to think (so much) about video encoding, drivers, etc.
7. 29/06/2017 noisolation.com
8. 29/06/2017 noisolation.com Important WebRTC components/functions • getUserMedia(), which allows a web browser to access the camera and microphone and to capture media
 • RTCPeerConnection(), which sets up audio/video peer-to-peer communication
 • RTCDataChannel, which allow browsers to share data via peer-to-peer
 • getStats(), which allows the web application to retrieve a set of statistics about connection

9. 29/06/2017 noisolation.com Important Terms • TURN – Relay server when no point to point is possible • STUN – Find external IP and port for NAT-ed device • ICE – Interactive Connectivity Establishment • ICE candidate • SDP – Session Description Protocol (Audio and video codecs the peer supports)
10. 29/06/2017 noisolation.com The hard parts • Terminology • Signaling • Linking WebRTC up with other parts of your apps • Event order • Different network topology

11. 29/06/2017 noisolation.com const remoteVideo = document.querySelector('#remoteVideo'); let pc = new RTCPeerConnection({ iceServers: [ { url: 'stun2.l.google.com:19302' } ] }); pc.onicecandidate = event => signaling.emit({ type: 'icecandidate', candidate: candidate.candidate }); pc.onaddstream = stream => { remoteVideo.srcObject = event.stream }; pc.oniceconnectionstatechange = () => {}; pc.onnegotiationneeded = () => { pc.createOffer() .then(offer => pc.setLocalDescription(offer)) .then(() => signaling.emit(pc.localDescription)); }; navigator.mediaDevices.getUserMedia({ audio: true, video: true }) .then(event => pc.addStream(event.stream)); signaling.listen(event => { if (data.type == 'offer') { pc.setRemoteDescription(data) .then(() => pc.createAnswer()) .then(answer => pc.setLocalDescription(answer)) .then(() => signal.emit(pc.localDescription)); } else if (data.type === 'answer') { pc.setRemoteDescription(data); } else if (data.type === 'icecandidate') { pc.addIceCandidate(data.candidate); } });
12. 29/06/2017 noisolation.com let pc = new RTCPeerConnection({ iceServers: [ { url: 'stun2.l.google.com:19302' } ] });
13. 29/06/2017 noisolation.com navigator.mediaDevices.getUserMedia({ audio: true, video: true }) .then(event => pc.addStream(event.stream)) .catch(err => console.error(err));
14. 29/06/2017 noisolation.com pc.onnegotiationneeded = () => { pc.createOffer() .then(offer => pc.setLocalDescription(offer)) .then(() => signaling.emit(pc.localDescription)); .catch(err => console.error(err)); };
15. 29/06/2017 noisolation.com pc.onicecandidate = event => signaling.emit({ type: 'icecandidate', candidate: candidate.candidate });
16. 29/06/2017 noisolation.com signaling.listen(event => { if (data.type == 'offer') { pc.setRemoteDescription(data) .then(() => pc.createAnswer()) .then(answer => pc.setLocalDescription(answer)) .then(() => signal.emit(pc.localDescription)); } else if (data.type === 'answer') { pc.setRemoteDescription(data); } else if (data.type === 'icecandidate') { pc.addIceCandidate(data.candidate); } });
17. 29/06/2017 noisolation.com pc.onaddstream = stream => { remoteVideo.srcObject = event.stream; };
18. 29/06/2017 noisolation.com React Native
19. 29/06/2017 noisolation.com Why React Native? We are a small tech team making many systems 
 (even if AV1 looks so simple…). Our back end systems are written in Node.js, so using JavaScript as much as possible makes sense. ◦ iOS apps ◦ Android apps ◦ Back Office Systems ◦ Payment ◦ Customer Self Service ◦ Web ◦ Embedded Code running HW
20. noisolation.com WebRTC in React Native
21. 29/06/2017 noisolation.com How to use WebRTC in React Native There are two ways to get WebRTC to run in React Native • Include the native code and write your own native module • Use an open source component: react-native-webrtc
22. 29/06/2017 noisolation.com Native Module – A story of a lot of pain We first implemented our own native module,
 using the code we had from our native apps.
23. 29/06/2017 noisolation.com github.com/oney/react-native-webrtc • Follows the browser API (sans promises) • Good support for Android and iOS • So you can almost use the same code in the browser and the React Native
24. 29/06/2017 noisolation.com Conclusion • WebRTC has become a stable, working system • React Native is stable and ready for production apps • WebRTC integrates nicely with React Native
 No Isolation is hiring React (native) developers!!!
25. 29/06/2017 noisolation.com We help people out of loneliness aabel@noisolation.com doyle@noisolation.com