node.js 上的视频聊天应用程序与 webRTC（socket.io）在本地主机上工作正常，但在网络上出现错误

Question

I am making a video chat application on node.js with WebRTC(socket.io). This application runs fine on localhost but gives error while running on my network with my IP address. Also, I tried it on Heroku but error remained same

---

Only Top of my server looks like

   const express = require("express");
    const socket = require("socket.io");
    const app = express();
    
    //Starts the server
    
    let server = app.listen(process.env.PORT||4000, function () {
      console.log("Server is running");
    });
    
    app.use(express.static(__dirname+"/public"));
    
    //Upgrades the server to accept websockets.
    
    let io = socket(server);
    
    //Triggered when a client is connected.
    
    io.on("connection", function (socket) {
      console.log("User Connected :" + socket.id);

---

Top part of client side is

let socket = io.connect("//192.168.1.73:4000");
let divVideoChatLobby = document.getElementById("video-chat-lobby");
let divVideoChat = document.getElementById("video-chat-room");
let joinButton = document.getElementById("join");
let userVideo = document.getElementById("user-video");
let peerVideo = document.getElementById("peer-video");
let roomInput = document.getElementById("roomName");
let roomName;
let creator = false;
let rtcPeerConnection;
let userStream;

// Contains the stun server URL we will be using.
let iceServers = {
  iceServers: [
    { urls: "stun:stun.services.mozilla.com"},
    { urls: "stun:stun.l.google.com:19302"},
  ],
};

---

Error on running on running server on 192.168.1.73:4000 is

chat.js:37 Uncaught TypeError: Cannot read property 'getUserMedia' of undefined

    at f.<anonymous> (chat.js:37)
    at f.r.emit (socket.io-3.0.1.min.js:6)
    at f.value (socket.io-3.0.1.min.js:6)
    at f.value (socket.io-3.0.1.min.js:6)
    at f.value (socket.io-3.0.1.min.js:6)
    at b.<anonymous> (socket.io-3.0.1.min.js:6)
    at b.r.emit (socket.io-3.0.1.min.js:6)
    at b.value (socket.io-3.0.1.min.js:6)
    at n.<anonymous> (socket.io-3.0.1.min.js:6)
    at n.r.emit (socket.io-3.0.1.min.js:6)

(anonymous) @ chat.js:37
r.emit @ socket.io-3.0.1.min.js:6
value @ socket.io-3.0.1.min.js:6
value @ socket.io-3.0.1.min.js:6
value @ socket.io-3.0.1.min.js:6
(anonymous) @ socket.io-3.0.1.min.js:6
r.emit @ socket.io-3.0.1.min.js:6
value @ socket.io-3.0.1.min.js:6
(anonymous) @ socket.io-3.0.1.min.js:6
r.emit @ socket.io-3.0.1.min.js:6
value @ socket.io-3.0.1.min.js:6
value @ socket.io-3.0.1.min.js:6
(anonymous) @ socket.io-3.0.1.min.js:6
r.emit @ socket.io-3.0.1.min.js:6
value @ socket.io-3.0.1.min.js:6
(anonymous) @ socket.io-3.0.1.min.js:6
r.emit @ socket.io-3.0.1.min.js:6
value @ socket.io-3.0.1.min.js:6
value @ socket.io-3.0.1.min.js:6
ws.onmessage @ socket.io-3.0.1.min.js:6

---

on Heroku error looks like

GET https://projectnepflix.herokuapp.com:4000/socket.io/?EIO=4&transport=polling&t=NVEwhoG net::ERR_CONNECTION_TIMED_OUT on Chrome

git repo sample: https://github.com/innovatoraakash/nepflix

Answer 1

I've had this same problem a while ago.

This note from getUserMedia documentation describes the reason for your issue on the server:

Note: If the current document isn't loaded securely, navigator.mediaDevices will be undefined, and you cannot use getUserMedia(). See Security for more information on this and other security issues related to using getUserMedia()

This means that, you have run your app with HTTPS (unless you're localhost), or else navigator.mediaDevices will be undefined as stated above, hence when you try to call navigator.mediaDevices.getUserMedia it crashes.

Answer 2

It was difficult to make my public IP HTTPS over my network so I changed the

let socket = io.connect("//192.168.1.73:4000"); 

line with

var socket = io.connect(window.location.href);

This was the reason for the error in Heroku and I Tested finely over Heroku as it runs over https so navigator.mediaDevices.getUserMedi does not crash