在火狐中获取mediaStreamTrack的实际facingMode

Question

我想知道媒体流轨的实际facingMode，以便根据活动摄像头是在设备的后面还是在设备的前面来反转(镜像)图像。如果实际的环境是“facingMode”，视频的CSS属性将是：transform: scaleX(-1)；如果环境是“facingMode”，我不会反转图像。

这是我的代码片段：

navigator.mediaDevices.getUserMedia({ facingMode: "environment", width: { ideal: 4096 } })
.then (function(mediaStream){
   video.srcObject = mediaStream;
   console.log('facingmode: ' + video.srcObject.getTracks()[0].getSettings().facingMode);
});

在Chrome中，一切都像预期的那样工作:控制台显示“环境”或“用户”，这取决于实际活动的摄像头。

在Firefox中，控制台总是显示“未定义”(这是意想不到的)(在电脑和智能手机上的行为相同)。

有人能帮我在火狐中找回实际的facingMode吗？谢谢

Answer 1

在Firefox for Android和其他仍然不提供MediaTrackSettings.facingMode的客户端中，一种解决方法是检查MediaStreamTrack.label，例如：

const isEnvironment =
  "environment" == video.srcObject.getVideoTracks()[0].getSettings().facingMode
    || video.srcObject.getVideoTracks()[0].label.indexOf("acing back") !== -1;

不幸的是，跨用户代理的labels may vary。

上面的代码片段适用于Firefox Mobile 68。即使在德语中，后置相机的标签也是“相机0，面朝后，方向90”。

Answer 2

火狐可以毫无问题地返回正确的facing mode。我已经使用以下代码对其进行了测试：

navigator.mediaDevices.getUserMedia({ video: true})
.then(function(stream) {
  console.log(stream.getTracks()[0].getSettings().facingMode);
})
.catch(function(err) {
  console.log(err)
});

你遇到的问题可能是你没有授权页面使用摄像头。转到Preferences -> Permissions -> Camera -> Settings ...并取消选中Block new requests asking to access your camera。