How to make webrtc application works on the internet

Question

everyone! I'm trying to learn javascript and webrtc using nodejs. I follow the tutorial of google code lab in this link https://codelabs.developers.google.com/codelabs/webrtc-web/#6. The source code is here https://github.com/googlecodelabs/webrtc-web/tree/master/step-05. Every thing is fine, but now I want to try to see if it works on the Internet. I learned to deploy the web on Heroku. https://simple-videochat-test.herokuapp.com/. But I received this error:

Access to XMLHttpRequest at 'https://computeengineondemand.appspot.com/turn?username=41784574&key=4080218913' from origin 'https://simple-videochat-test.herokuapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

I checked and it turned out the server doesn't work anymore. So I tried to add another turn server currently working for apprtc in this code to the main.js file:

var pcConfig = {
      'iceServers': [
    {
      'urls': 'stun:stun.l.google.com:19302'
    },
    {
      'urls': 'turn:192.158.29.39:3478?transport=udp',
      'credential': 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
      'username': '28224511:1379330808'
  },
  {
      'urls': 'turn:192.158.29.39:3478?transport=tcp',
      'credential': 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
      'username': '28224511:1379330808'
   }
  ]
};

The package.json for nodejs is below:

{
    "name": "webrtc-codelab",
    "version": "0.0.1",
    "description": "WebRTC codelab",
    "scripts": {
    "start": "node index.js"
    },
    "dependencies": {
       "node-static": "^0.7.10",
       "socket.io": "^2.0.4"
    }
}

I can see the client receive message from each other but there is no video display. Can anyone help me here? Sorry for my English if it's bad. I'm not a native speaker. Thanks

Answer 1

Check if you have a Content-Security-Policy tag like <meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-eval' 'unsafe-inline' 'self' data: gap: ws: 'https://simple-videochat-test.herokuapp.com'> in your html files and add 'https://simple-videochat-test.herokuapp.com' to it, like above.

Answer 2

After looking around, I manage to get it worked! I'll put it here, so any newbie like me in the future can run it. First, is the package.json. Turn out I forgot to add os package.

{
    "name": "webrtc-codelab",
    "version": "0.0.1",
    "description": "WebRTC codelab",
    "scripts": {
        "start": "node index.js"
    },
    "dependencies": {
        "node-static": "^0.7.10",
        "socket.io": "^2.0.4",
        "os": "0.1.1"
    }
}

2. Set up the port for the server in the index.js file, don't use just the port:8080 like in the example.

var PORT = process.env.PORT || 8080;
var fileServer = new(nodeStatic.Server)();
var app = http.createServer(function(req, res) {
    fileServer.serve(req, res);
}).listen(PORT);

Everything else is the same for this file. 3. In the file main.js, add the iceservers like in my question. Next change this line from

    pc = new RTCPeerConnection(null);

to

    pc = new RTCPeerConnection(pcConfig);

And that's it. Thanks, everyone for helping me. You guys can go to the link of the app to test. It still need some adjust, but at least a start for newbies like me.

UPDATE: setting the RTCPeerConnection like above cause 2 pc connected to the same wifi cannot connect to each other. So I change this to

if (location.hostname !== 'localhost') {
  pc = new RTCPeerConnection(pcConfig);
} else {
  pc = new RTCPeerConnection(null);
}