How to make your mobile... to call? Is it easy to create another Skype or Whatsapp? This talk will walk you through the various aspects of creating "the calling app". Starting with what the VoIP actually is, going through some theory of WebRTC connections, and ending with the CallKit of iOS vs Android way of handling calls with the React Native. It will give you a sneak peek of what is required to make a production app that handles outgoing and incoming calls and what kind of infrastructure you need. The talk is based on the experience taken from the phone app made for sales and support teams around the world.

1. Creating a VoIP app in React Native - the beginner’s guide
WOJCIECH KWIATEK
Sep 1-2, 2021

2. Wojciech Kwiatek
wkwiatek
WojciechKwiatek
CTO at Channels
JavaScript developer, trainer, and mentor
Recently bridging the gap between tech and business

3. What is an VoIP app?

5. Ingredients

6. Ingredients
Microphone / camera access
Connection between two endpoints
Connection to the native phone APIs (call screen)

7. Permissions

9. WebRTC

10. WebRTC 1.0 came out this year!

11. WebRTC connection scheme
Source: https://www.html5rocks.com/en/tutorials/webrtc/infrastructure/#after-signaling-using-ice-to-cope-with-nats-and-firewalls

12. WebRTC implementation details
Get and share local and remote descriptions (metadata about local media in SDP format)
Get and share network information (ICE candidates)
Add the local stream from getUserMedia()

13. WebRTC implementation details
Sender:
async function makeCall() {
const configuration = {'iceServers': [{'urls': 'stun:stun.l.google.com:19302'}]}
const peerConnection = new RTCPeerConnection(configuration);
signalingChannel.addEventListener('message', async message => {
if (message.answer) {
const remoteDesc = new RTCSessionDescription(message.answer);
await peerConnection.setRemoteDescription(remoteDesc);
}
});
const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);
signalingChannel.send({'offer': offer});
}

14. WebRTC implementation details
Receiver:
const peerConnection = new RTCPeerConnection(configuration);
signalingChannel.addEventListener('message', async message => {
if (message.offer) {
peerConnection.setRemoteDescription(new RTCSessionDescription(message.offer));
const answer = await peerConnection.createAnswer();
await peerConnection.setLocalDescription(answer);
signalingChannel.send({'answer': answer});
}
});

15. WebRTC implementation details
Both sender and reciever:
// Listen for local ICE candidates on the local RTCPeerConnection
peerConnection.addEventListener('icecandidate', event => {
if (event.candidate) {
signalingChannel.send({'iceCandidate': event.candidate});
}
});
// Listen for remote ICE candidates and add them to the local RTCPeerConnection
signalingChannel.addEventListener('message', async message => {
if (message.iceCandidate) {
try {
await peerConnection.addIceCandidate(message.iceCandidate);
} catch (e) {
console.error('Error adding received ice candidate', e);
}
}
});

16. WebRTC implementation details
Both sender and reciever:
// Listen for connectionstatechange on the local RTCPeerConnection
peerConnection.addEventListener('connectionstatechange', event => {
if (peerConnection.connectionState === 'connected') {
// Peers connected!
}
});

17. Things start getting complicated…

18. SIP
Set up a session between endpoints
Negotiate the media parameters and specifications using the SDP protocol
Manage a session (substitute, terminate, adjust parameters)

19. SIP
there are also libraries for JS: JsSIP, SIP.js
effectively - you don’t need to use pure WebRTC
however, you need a SIP server like Kamailio, FreeSWITCH, or Asterisk

20. Is signaling enough?

21. But where is the React Native?

22. React native WebRTC
Makes the WebRTC API available for the React Native

23. We can write the app!

24. But what if the app goes background?

25. (VoIP) Push notifications / Android vs iOS

26. Introduction of the CallKit
https://www.youtube.com/watch?v=JGJNN5VeOdw

27. React Native CallKeep

29. Now we covered all pieces

30. Recap
Think of permissions
WebRTC is a must
SIP may be helpful
CallKit / Connection Services
You may find already working solution as a CPaaS

31. Thank you!

32. Links
https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection
https://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-simple
https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Protocols
https://codelabs.developers.google.com/codelabs/webrtc-web/#1
https://www.html5rocks.com/en/tutorials/webrtc/infrastructure/