1 of 55

Making a call via the internet?

Let's use Google Cloud and WebRTC!

Singapore

2 of 55

Making a call via the internet?

Let's use Google Cloud and WebRTC!

Singapore

such handsome

suck thumb

wow

much swag

so fa

3 of 55

I liek “bad photos”, feel free to tag me lol

4 of 55

1 year ago … a production application

5 of 55

Speed … POC

6 of 55

Hi I’m Weiyuan

​

And I work in team dealing with

calling features

7 of 55

Why not build

a POC myself?

​

Voice over Internet Protocol (VoIP)

8 of 55

9 of 55

10 of 55

WebRTC

11 of 55

WebRTC

VoIP

The “How”

The “What”

12 of 55

Let’s break down the problem statement!

  • Create a calling function in a mobile application

13 of 55

Let’s break down the problem statement!

  • Create a calling function in a mobile web application

14 of 55

Let’s break down the problem statement!

  • Create a calling function in a mobile web application
    • Frontend web application
    • Backend server

15 of 55

Let’s break down the problem statement!

  • Create a calling function in a mobile web application
    • Frontend web application
      • Call functionality
        • WebRTC
    • Backend server

16 of 55

Let’s break down the problem statement!

  • Create a calling function in a mobile web application
    • Frontend web application
      • Call functionality
        • WebRTC
    • Backend server

17 of 55

Let’s break down the problem statement!

  • Create a calling function in a mobile web application
    • Frontend web application
      • Call functionality
        • WebRTC
    • Backend server
      • Identification functionality - Who am I? Who are you?

18 of 55

Let’s break down the problem statement!

  • Create a calling function in a mobile web application
    • Frontend web application
      • Call functionality
        • WebRTC
    • Backend server
      • Identification functionality - Who am I? Who are you?
      • Data negotiation functionality - Before WebRTC call

19 of 55

Let’s break down the problem statement!

  • Create a calling function in a mobile web application
    • Frontend web application
      • Call functionality
        • WebRTC
    • Backend server
      • Identification functionality - Who am I? Who are you?
      • Data negotiation functionality - Before WebRTC call

20 of 55

Translating to implementation

Step by step…

21 of 55

Designing the VoIP call system

  • Create a calling function in a mobile web application
    • Frontend web application
      • Call functionality
        • WebRTC
    • Backend server
      • Identification functionality - Who am I? Who are you?
      • Data negotiation functionality - Before WebRTC call

22 of 55

23 of 55

Designing the VoIP call system

  • Create a calling function in a mobile web application
    • Frontend web application
      • Call functionality
        • WebRTC
    • Backend server
      • Identification functionality - Who am I? Who are you?
      • Data negotiation functionality - Before WebRTC call

24 of 55

Both caller and callee logic must be present

25 of 55

Designing the VoIP call system

  • Create a calling function in a mobile web application
    • Frontend web application
      • Call functionality
        • WebRTC
    • Backend server
      • Identification functionality - Who am I? Who are you?
      • Data negotiation functionality - Before WebRTC call

26 of 55

Designing the VoIP call system

  • Create a calling function in a mobile web application
    • Frontend web application
      • Call functionality
        • WebRTC
    • Backend server
      • Identification functionality - Who am I? Who are you?
      • Data negotiation functionality - Before WebRTC call
        • Push notifications is one choice
        • WebSockets!

27 of 55

Add Websocket server!

28 of 55

Tools and Infrastructure?

29 of 55

Tools and Infrastructure?

  • Web application stack - NextJS (simple choice for web application, esp if familiar with React)

30 of 55

Tools and Infrastructure?

  • Web application stack - Next.JS
  • Backend - Node.js (Backend and frontend on Javascript - easy for a single developer)

31 of 55

Tools and Infrastructure?

  • Web application stack - Next.JS
  • Backend - Node.js
  • Hosting providers - Google Cloud

32 of 55

33 of 55

34 of 55

35 of 55

36 of 55

Demo

37 of 55

38 of 55

Video in case the “Demo god” doesn’t bless me today >.<

39 of 55

Etc. WebRTC tips

40 of 55

How to use WebRTC too!

  • Understanding how to properly use WebRTC was really tough!

41 of 55

https://stackoverflow.com/questions/11794305/i-am-not-able-to-receive-remote-video-stream

42 of 55

43 of 55

44 of 55

https://webrtc.github.io/samples/

45 of 55

But… I also made some mistakes

46 of 55

WebRTC

47 of 55

source: medialooks.com

48 of 55

source: medialooks.com

49 of 55

source: medialooks.com

50 of 55

source: medialooks.com

51 of 55

https://github.com/coturn/coturn

https://hub.docker.com/r/coturn/coturn

52 of 55

Etc. Google Cloud tips

​

53 of 55

54 of 55

55 of 55

Making a call via the internet?

Let's use Google Cloud and WebRTC!

Liu Weiyuan

Special thanks to the Chat and Voice team that I work with for the learning experiences to inspire this

​

bit.ly/weiyuan | or find me on LinkedIn: