1 of 46

Making a call via the internet?

Let's use Google Cloud and WebRTC!

Singapore

2 of 46

Hi I’m Weiyuan

​

And I work in team dealing with

calling features

3 of 46

I had a epiphany

4 of 46

Why not build

it myself?

  • Weiyuan (August 2022)

Let’s do it!!!

​

  • Weiyuan (July 2023)

5 of 46

Let’s break down the problem statement!

  • Create a calling function in a mobile application

6 of 46

Let’s break down the problem statement!

  • Create a calling function in a mobile web application

7 of 46

Let’s break down the problem statement!

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

8 of 46

Let’s break down the problem statement!

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

9 of 46

Let’s break down the problem statement!

  • Create a calling function in a mobile web application
    • Frontend web application
      • Call functionality
        • WebRTC - free and open-source project with real-time communication
    • Backend server

10 of 46

Let’s break down the problem statement!

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

11 of 46

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?

12 of 46

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

13 of 46

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

(Note: we haven’t even talk about hosting and tools yet)

14 of 46

System Architecture

And some infrastructure stuffs

15 of 46

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

16 of 46

17 of 46

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

18 of 46

Both caller and callee logic must be present

19 of 46

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

20 of 46

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!

21 of 46

Add Websocket server!

22 of 46

Tools and Infrastructure?

23 of 46

Tools and Infrastructure?

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

24 of 46

Tools and Infrastructure?

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

25 of 46

Tools and Infrastructure?

  • Web application stack - Next.JS
  • Backend - Node.js
  • Hosting providers - Google Cloud (because I had free credits to use)

26 of 46

27 of 46

28 of 46

  • Pros
    • Static files serve from bucket, can be pushed to CDN too
    • No need to worry much on reliability, availability, and scalability
  • Cons
    • No server side render logic

29 of 46

  • Pros
    • Static files serve from bucket, can be pushed to CDN too
    • No need to worry much on reliability, availability, and scalability
  • Cons
    • No server side render logic

30 of 46

31 of 46

32 of 46

  • Pros
    • Using serverless - no need to worry on things like scalability and reliability
    • Can scale to 0

33 of 46

  • Pros
    • Using serverless - no need to worry on things like scalability and reliability
    • Can scale to 0
  • Cons
    • If I wanted to scale up the features in this service, and add more microservices, I would probably use Google Kubernetes Engine (GKE) instead.

34 of 46

35 of 46

36 of 46

Demo

37 of 46

38 of 46

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

39 of 46

What did I learn?

40 of 46

How to use WebRTC too!

  • Understanding how to properly use WebRTC was really tough!

41 of 46

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

42 of 46

43 of 46

44 of 46

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

45 of 46

More improvements to be done with Google Cloud!

  • Loadbalancer - Cloud Storage static website, with proper domains

​

  • IAP — for securing access

​

46 of 46

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: