29/06/2017 noisolation.com 

29/06/2017 noisolation.com Who we are Marius Aabel
 CTO, Founder
 [email protected]
 Matias Doyle
 Developer, Founder
 [email protected]
 

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 

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 

noisolation.com WebRTC 

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. 

29/06/2017 noisolation.com 

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
 

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) 

29/06/2017 noisolation.com The hard parts • Terminology • Signaling • Linking WebRTC up with other parts of your apps • Event order • Different network topology
 

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

29/06/2017 noisolation.com let pc = new RTCPeerConnection({ iceServers: [ { url: 'stun2.l.google.com:19302' } ] }); 

29/06/2017 noisolation.com navigator.mediaDevices.getUserMedia({ audio: true, video: true }) .then(event => pc.addStream(event.stream)) .catch(err => console.error(err)); 

29/06/2017 noisolation.com pc.onnegotiationneeded = () => { pc.createOffer() .then(offer => pc.setLocalDescription(offer)) .then(() => signaling.emit(pc.localDescription)); .catch(err => console.error(err)); }; 

29/06/2017 noisolation.com pc.onicecandidate = event => signaling.emit({ type: 'icecandidate', candidate: candidate.candidate }); 

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

29/06/2017 noisolation.com pc.onaddstream = stream => { remoteVideo.srcObject = event.stream; }; 

29/06/2017 noisolation.com React Native 

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 

noisolation.com WebRTC in React Native 

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 

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. 

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 

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

29/06/2017 noisolation.com We help people out of loneliness [email protected] [email protected]