Chrome 83搭建WebRTC视频聊天网站遇navigator.webkitGetUserMedia错误

问题原因 #

你使用的Chrome 83.0.4103.97已经彻底移除了带webkit前缀的旧版getUserMedia API——这是早期WebRTC实验阶段的非标准写法，现在主流浏览器都统一支持W3C标准的媒体设备API了，旧方法自然找不到，所以抛出了类型错误。

修复后的代码 #

把你的旧代码替换成标准API的实现，它返回一个Promise对象，两种写法任你选：

方式1：Promise链式调用

navigator.mediaDevices.getUserMedia({ video: true, audio: false })
  .then(function(stream) {
    // 在这里处理视频流，比如绑定到页面的video元素
    // 示例：document.querySelector('video').srcObject = stream;
  })
  .catch(function(err) {
    console.error('获取媒体设备失败:', err);
  });

方式2：async/await（更简洁易读，推荐）

async function getVideoStream() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
    // 处理视频流的逻辑写在这里
    // 示例：document.querySelector('video').srcObject = stream;
  } catch (err) {
    console.error('获取媒体设备失败:', err);
  }
}

// 调用函数启动流获取
getVideoStream();

额外注意事项 #

• HTTPS限制：除了localhost（本地开发环境），WebRTC API必须在HTTPS协议下才能正常工作，否则浏览器会直接阻止权限请求。
• 权限交互：第一次调用时浏览器会弹出权限请求框，必须让用户允许访问摄像头，才能成功获取到视频流。
• 兼容性：目前所有现代浏览器（Chrome、Firefox、Edge等）都支持标准的navigator.mediaDevices.getUserMedia，不需要再添加任何浏览器前缀。

内容的提问来源于stack exchange，提问作者Bishwa Timilsina