This is continue from part 3 .

STUN server and TURN server

1. Understand the need of STUN server and TURN server

WebRTC works on p2p connection but that's not so possible given all people is behind some router nowdays. Thus, we need the STUN server for public IP discovery and TURN server to relay the traffic between the participants behind the router.

There are some free STUN servers online. The one I use is stun:stun.l.google.com:19302 . For TURN server, you will need to host your own. As you can see, all the video streams will actually go through the TURN server to reach the target participant. TURN server will need to handle a very high load of traffic. That's why you can find a public STUN server but not a TURN server. The TURN server will cost a bomb if it's made public.

2. Create a TURN server

There are a few Open Source project for the TURN servers. The one I use is coturn . I will just use Docker to set it up. This is the docker-compose.yml :

version: "3.8"
services: 
    coturn:
        image: boldt/coturn
        ports:
            - 3478:3478
            - 3478:3478/udp
            - 40000-41000:40000-41000/udp
        environment: 
            - USERNAME=turn
            - PASSWORD=turnpass
            - MIN_PORT=40000
            - MAX_PORT=41000

Run docker-compose up to start the server. Make sure all the ports are opened and reachable from the Internet.

3. Modify browser application to use STUN server and TURN server

Open ./src/app/app.component.ts in your editor and modify the setupRtcPeerConnection function:

  private setupRtcPeerConnection(target: string) {
    ...
    const turnServer = `turn:${url.hostname}:3478`;
    const rtc = this.rtcList[target] = new RTCPeerConnection({
      iceServers: [{
        urls: ['stun:stun.l.google.com:19302']
      }, {
        urls: [turnServer + '?transport=tcp', turnServer + '?transport=udp'],
        username: 'turn',
        credential: 'turnpass'
      }]
    });
    ...
  }

This assume the TURN server is together with the signaling server.

For the browser application to be able to access the webcam on the client machine, the browser application has to be hosted on a HTTPS server. I'm not going into the details of these but these are what you can do:

1. Get a free host name at http://www.noip.com .
2. Get free SSL certificate using Certbot from https://certbot.eff.org/ .

That's all for it. This is not a good solution to do video conference because the client machine will have to send the same traffic to all the participants. It will congest the network very fast. It won't be able to support a lot of participants, but it's enough for fun.

You can get the full source code here .