vue+h5调用相机getUserMedia()后没反应？

Question

环境：vue2.0+h5+uniapp 本地测试环境，使用的是uc浏览器，微信测试环境不支持；

我是想做一个微信公众号的自定义的拍照界面，通过video+getUserMedia()方法实现，代码如下；

 <template>
     <div>
         <video  id="camera"  autoplay></video>
         <button @click="startCamera">启动摄像头</button>
         <button @click="stopCamera">停止摄像头</button>
     </div>
 </template>

startCamera() {
const constraints = {
    audio: false,
    video: {
     // 前置摄像头
     facingMode: "user",
     // 该属性相当于手机端的高
     width: Math.max(windowWidth, windowHeight) - 120, // 减去 120 用于在页面底部放置拍照等功能按钮
     // 该属性相当于手机端的宽
     height: Math.min(windowWidth, windowHeight),
 ·  },
};

navigator.mediaDevices.getUserMedia(constraints)
      .then(function(stream) {
            const video = document.querySelector("video");
            alert(video)
            video.srcObject = stream;
            video.onloadedmetadata = function(e) {
             video.play();
         };
      })
.catch(function(err) {
         console.log(err.name + ": " + err.message);
         alert(err.name + ": " + err.message);

 });
}

启动摄像头后弹出alert(video对象)之后就没有反应了，为什么

Answer 1

引用 皆我百晓生 小程序回复内容作答：

在调用 getUserMedia() 方法后，可能有几个原因导致摄像头未能正常启动。

1. 浏览器权限：确保浏览器有权限访问摄像头。在移动设备上，您可能需要在浏览器设置中打开摄像头权限。在桌面浏览器上，在使用 HTTPS 协议时，通常会自动询问权限。如果你正在使用的是 HTTP 协议，摄像头可能无法在某些浏览器上使用。

2. 约束参数设置：在您的代码中，约束参数看起来是正确的，但是您可能需要根据不同的设备和浏览器进行调整。请确保 facingMode、width 和 height 属性的值适用于您的设备和浏览器。

3. 兼容性问题：getUserMedia() 方法在不同的浏览器和设备上的支持程度不同。您可以使用库或框架来处理跨浏览器兼容性问题，如 adapter.js 或 webrtc-adapter。

您可以尝试以下几个步骤来排查问题：

1. 检查浏览器权限：确保浏览器有权限访问摄像头，并且您的代码执行在 HTTPS 协议下。

2. 验证约束参数：尝试使用其他设备和浏览器进行测试，或者尝试调整约束参数的值。

3. 添加错误处理：在 catch 块中添加更详细的错误处理代码，以便查看 getUserMedia() 返回的错误信息。

4. 检查兼容性：确保您的浏览器和设备支持 getUserMedia() 方法。您可以在 Can I use (https://caniuse.com/) 网站上查看 getUserMedia() 的兼容性。

如果您仍然遇到问题，您可以在开发者社区或相关论坛上寻求帮助，提供更详细的代码和错误信息，以便其他人能够更好地帮助您解决问题。