基于Node.js、WebRTC与Socket.io的视频聊天应用本地运行正常，局域网访问及Heroku部署时报错

一、局域网IP访问时触发Cannot read property 'getUserMedia' of undefined报错 #

报错核心原因 #

这是浏览器安全上下文的强制规则导致的：浏览器仅在localhost、HTTPS加密域名两类安全场景下，才会暴露navigator.mediaDevices对象，开放摄像头、麦克风的调用能力。通过局域网HTTP形式的IP地址（如示例中的192.168.1.73）访问页面时，不属于受信任的安全上下文，navigator.mediaDevices对象直接为undefined，读取其下的getUserMedia属性时自然会抛出未定义的错误。

对应修复方案 #

• 本地开发阶段：优先通过localhost路径访问页面调试；如果必须使用局域网IP做跨设备测试，可在Chrome/Edge的浏览器安全设置中，将对应的局域网IP加入受信任的不安全源列表，手动放开媒体设备的调用权限。
• 移除客户端硬编码的Socket连接地址：把let socket = io.connect("//192.168.1.73:4000");修改为let socket = io();，让Socket.io自动匹配当前页面的访问源地址，避免出现端口不匹配的连接问题。
• 生产部署时，所有涉及媒体调用的页面必须通过HTTPS协议访问，才能正常触发浏览器的媒体权限申请流程。

二、Heroku部署后出现Socket连接超时错误 #

报错核心原因 #

• 客户端代码硬编码了4000端口的访问规则，而Heroku平台不会固定开放4000端口，运行时会自动通过环境变量process.env.PORT分配动态服务端口。硬编码请求对应域名的4000端口时，没有对应服务在该端口监听，自然触发连接超时。
• Heroku平台不会开放自定义端口的公网访问入口，所有公网请求都需要走平台默认的80/443端口路由，直连自定义端口的请求会被直接拦截。

对应修复方案 #

• 彻底移除客户端代码中所有硬编码的IP、端口、Socket连接地址，统一使用io()的自动匹配逻辑，让请求自动适配当前页面的访问域名与端口，从根源上避免硬编码请求4000端口的问题。
• 现有服务端的端口读取逻辑（process.env.PORT||4000）是符合Heroku部署要求的，无需额外修改。
• 补充Socket.io初始化的跨域配置，避免部署后出现跨域拦截问题，调整后的初始化代码如下：

  let io = socket(server, {
    cors: {
      origin: "*",
      methods: ["GET", "POST"]
    }
  });
  

提示：Heroku平台默认提供HTTPS访问能力，完全满足WebRTC所需的安全上下文要求，只要修正上述硬编码问题，局域网访问时出现的getUserMedia报错也会在生产环境同步消失。

内容的提问来源于stack exchange，提问作者Aakash Ghimire