How to supply a STUN server for webRTC

Question

I have made a very basic WebRTC based videoconferencing app and it works great when accessing from my own local network. Now the next step is to supply it with STUN/TURN servers so that it could be used publicly.

There are a lot of tutorials out there for how to setup WebRTC for local area teleconferencing, but barely any for when it comes to using STUN/TURN servers.

const iceConfiguration = {}
iceConfiguration.iceServers = [
  {
    urls: 'stun:stun1.l.google.com:19302'
  },
  {
    urls: 'stun:stun3.l.google.com:19302'
  },
  {
    urls: 'stun:stun4.l.google.com:19302'
  }
];

// some stuff happens...

localConnection = new RTCPeerConnection(iceConfiguration);

so, this works locally, but when I tested this with some pals remotely it didn't work. It could be the case that they were all behind symmetric NATs, and that I would need to use a TURN server, but I hear that NAT configuration is somewhat rare so it seems likely that it would work with at least one person. Is this the right way to set STUN servers? I really could only find one tutorial on this, the most content online is about how to build your own TURN/STUN server and not how to use one...

github.com/jesup/nightly-gupshup/blob/master/static/js/chat.js — StackSlave

Yair Cohen Yair Cohen · Accepted Answer · 2021-01-11T02:41:53

There's a difference between a STUN and a TURN server, Google provides free STUN servers to use, while it's not recommended for an app because you want to have control when things go wrong, it's definitely fine for a small project that's for learning if that's your case and can reduce your project complexity. (I also don't think it's that bad to use it on small projects that have some users)
If that's not the case, you are going to need to set these up yourself. There's plenty of tutorials online on how to do it, but you do need a server. The gist of it is opening certain ports and installing it using some basic tools like coturn. I'd recommend you follow a guide like that from start to finish, like this one:

https://medium.com/av-transcode/what-is-webrtc-and-how-to-setup-stun-turn-server-for-webrtc-communication-63314728b9d0

Once it's setup, you need to use this in your app, like this:

const iceConfiguration = {
    iceServers: [
        {
            urls: 'turn:my-turn-server.mycompany.com:19403',
            username: 'optional-username',
            credentials: 'auth-token'
        }
    ]
}

const peerConnection = new RTCPeerConnection(iceConfiguration);

There are a lot of steps involved, and a lot of different nuances you need to know about, this question is pretty general so I tried to give you some direction but you will need to keep reading yourself as it's a huge and complex subject, so be prepared for that.

How to supply a STUN server for webRTC

1 Answers