WebRTC视频通话部署至IP后getUserMedia未定义报错求助

开发者阿泽

2026-8-18

问题分析与解决方案

核心原因

浏览器的媒体设备API（getUserMedia）仅允许在安全上下文中调用。本地运行时用localhost/127.0.0.1属于浏览器默认信任的安全环境，所以能正常工作；但直接用HTTP协议部署到外部IP地址时，浏览器会判定为非安全上下文，直接禁用navigator.mediaDevices，导致你看到的Cannot read properties of undefined错误。

解决步骤

1. 切换到HTTPS协议部署

这是最关键的解决办法，所有现代浏览器都要求媒体设备API必须在HTTPS环境下运行。你可以：

给部署的IP地址配置SSL证书（比如用免费的Let's Encrypt证书）
在Node后端启用HTTPS服务，前端通过https://你的IP访问

2. 增加浏览器兼容性处理

部分旧版本浏览器可能需要前缀兼容，同时先判断mediaDevices是否存在，避免报错：

const constraints = { audio: true, video: audioOnly ? false : true };
console.log(navigator);

// 兼容不同浏览器的mediaDevices对象
const mediaDevices = navigator.mediaDevices || 
  (navigator as any).webkitMediaDevices || 
  (navigator as any).mozMediaDevices;

if (!mediaDevices) {
  console.error("当前浏览器不支持媒体设备访问");
  return;
}

mediaDevices.getUserMedia(constraints).then((stream) => {
  console.log(stream);
  store.dispatch(setLocalStream(stream) as any);
  if (callback) callback();
}).catch((err) => {
  console.log(err);
  console.log("获取本地流失败");
});