Android 上的 getUserMedia 绿屏

Question

我正在尝试使用 getUserMedia 在网页上显示摄像头直播。它可以工作（如果我将流保存到文件中，那就可以了），但视频标签仅显示静态绿色图像作为预览。有人面临同样的问题吗？

我的设置：

• 三星 S8 (SM-G950F)
• 安卓9
• 铬107.0.5304.91

超文本标记语言

<video autoplay="true" width="100%" id="video-test"></video>

JS

var video = document.querySelector("#video-test");

navigator.mediaDevices.getUserMedia({
      video: {
        mandatory: { minFrameRate: 10, minWidth: 100, minHeigth: 100  },
      }
 })
 .then(function (stream) {
      video.srcObject = stream;
 })
 .catch(function (err0r) {
      console.log("Something went wrong!", err0r);
 });

结果

谢谢

Answer 1

啊，绿屏死机。为什么是绿色的？因为它试图显示全零的 YUV 图像。

您对.getUserMedia()的调用中的限制不正确。mandatory不再是一件事了。你需要这样的东西：

{
  video: {
    width: { min: 100, ideal: 320 },
    height: { min: 100, ideal: 240 },
    frameRate: { min: 10, ideal: 10 }
  }
}

这是一个令人难以忽视的事实，您必须绞尽脑汁才能获得适用于许多不同平台的约束值。而且，你必须接受gUM给你的东西。如果您需要使用类似的精确约束，frameRate: { exact: 10 }您可能会遇到 OverconstrainedError 异常或其他异常。