getUserMedia green screen on Android

Question

I'm trying to use getUserMedia to show the cam live stream on a web page. It works (if I save the stream to a file, it is ok) but the video tag show only a static green image as preview. Is anyone facing the same problem?

My setup:

• Samsung S8 (SM-G950F)
• Android 9
• Chrome 107.0.5304.91

HTML

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

Result

Thank you

Answer 1

Ah, the green screen of death. Why is it green? Because it's trying to display an all-zero YUV image.

Your constraints in your call to .getUserMedia() are incorrect. mandatory is no longer a thing. You need something like this:

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

It's an inconvenient truth that you have to muck around to get constraints values that work on many different platforms. And, you have to accept what gUM gives you. If you demand exact constraints using something like frameRate: { exact: 10 } you may get an OverconstrainedError exception, or some other exception.