如何在MacBook Pro上用WebRTC实现外接摄像头直播？代码触发内置摄像头问题求解

问题描述 #

我正在开发一个直播视频应用，使用连接到MacBook的外接摄像头采集视频，采用WebRTC技术实现。但运行代码时，触发的是内置摄像头而非外接摄像头。我的代码如下：

var video = document.querySelector("#videoElement"); 
var constraints = { audio:true,video: { facingMode:"environment" } 
var promise = navigator.mediaDevices.getUserMedia(constraints); 
promise.then(function(mediaStream) { 
  video.srcObject = mediaStream; 
  video.onloadedmetadata = function(e) { 
    video.play(); 
  }; 
}) 
.catch(function(err) { 
  console.log(err.name + ": " + err.message); 
});

请问如何触发连接的外接摄像头？

解决方案 #

这是个很常见的小坑——facingMode: "environment"其实是为移动设备的后置摄像头设计的，桌面端的外接摄像头并不受这个属性控制，所以浏览器会默认调用内置摄像头。要精准指定外接摄像头，你需要通过**设备ID（deviceId）**来定位，具体步骤如下：

1. 枚举所有可用的视频输入设备 #

先调用navigator.mediaDevices.enumerateDevices()获取系统里所有的媒体设备，然后筛选出视频输入类型的设备，找到外接摄像头对应的条目。

2. 用deviceId替代facingMode指定目标摄像头 #

在getUserMedia的约束参数里，把facingMode替换成deviceId，直接传入外接摄像头的设备ID即可。

完整可运行代码示例 #

var video = document.querySelector("#videoElement");

// 先枚举设备，定位外接摄像头
navigator.mediaDevices.enumerateDevices()
.then(devices => {
  // 筛选出所有视频输入设备
  const videoDevices = devices.filter(device => device.kind === "videoinput");
  
  // 通过设备名称筛选外接摄像头（比如排除内置的FaceTime摄像头）
  const externalCamera = videoDevices.find(device => !device.label.includes("FaceTime"));
  
  if (!externalCamera) {
    alert("未检测到外接摄像头，请检查连接");
    return;
  }

  // 构建包含目标设备ID的媒体约束
  const constraints = {
    audio: true,
    video: { deviceId: externalCamera.deviceId }
  };

  // 请求媒体流并绑定到视频元素
  return navigator.mediaDevices.getUserMedia(constraints);
})
.then(mediaStream => {
  video.srcObject = mediaStream;
  video.onloadedmetadata = function(e) {
    video.play();
  };
})
.catch(err => {
  console.log(err.name + ": " + err.message);
});

额外提示 #

• 设备的label属性会显示摄像头的具体名称（比如外接摄像头可能显示为"USB Camera"或品牌型号），你可以根据这个属性更精准地筛选，避免依赖设备顺序。
• 第一次访问摄像头时，浏览器会弹出权限请求，只有用户授权后，你才能获取到设备的完整label和deviceId，如果第一次枚举时label为空，可能需要先请求一次基础权限再重新枚举设备。

内容的提问来源于stack exchange，提问作者Johncy Binoy