H5通过getUserMedia拍照黑屏原因

项目需求背景：如同我上篇文章，解决H5通过getUserMedia拍照被中断问题

问题场景：

        小米手机中访问H5，网页已获得摄像头授权（左上角相机出现图标），但页面黑屏。

        

原因排查：

        一：怀疑getUserMedia初始化过程中出错，于是在video各个事件（如onloadedmetadata、oncanplay、onplay、onplaying、onabort、onended、onwaiting、onpause、onerror等）中都打印日志，但日志显示video正在播放onplaying，并无异常。

        二：怀疑video元素或其父元素没有宽或高导致样式问题，于是给video加了红色背景，但能明显看到video区域由红色变成了黑色。

        三：从getUserMedia初始化参数设置开始查，仅设置必须参数，最终发现问题在navigator.mediaDevices.getUserMedia(constraints)中的constraints对象，由于给video设置了width和height中的ideal属性，可能ideal值过高导致小米手机摄像头无法适配。

        原代码如下：

//调用用户媒体设备，访问摄像头
getUserMedia(
  {
    video: {
      facingMode: "environment", // 后置摄像头
      // 注：仅配置width/height中ideal属性，某些机型（如小米）会出现黑屏
      width: { ideal: 3024 },
      height: { ideal: 4032 },
    },
    audio: false,
  },
  success,
  error
);

解决方案：

        1、video不配置width和height。默认像素为360*480，但像素过低，拍出来的图模糊。

        2、video配置width时，将min、ideal、max属性同时配置。手机会自动适配最佳像素，拍出来的图也比较清晰。

        新代码如下：

//调用用户媒体设备，访问摄像头
getUserMedia(
  {
    video: {
      facingMode: "environment", // 后置摄像头
      width: { min: 640, ideal: 1280, max: 1920 },
    },
    audio: false,
  },
  success,
  error
);

API文档：navigator.getUserMedia - Web API 接口参考 | MDN