Android 上的 getUserMedia 绿屏答案

【问题标题】：getUserMedia green screen on AndroidAndroid 上的 getUserMedia 绿屏
【发布时间】：2022-11-14 11:26:10
【问题描述】：

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

我的设置：

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

HTML

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

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);
 });

结果

谢谢

【问题讨论】：

标签： android google-chrome video getusermedia

【解决方案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 异常或其他一些异常。

【讨论】：