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

环境：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对象)之后就没有反应了，为什么

img

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

在调用 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() 的兼容性。

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

没太开发过该功能，但是微信浏览器应该没有document这个概念吧。

【以下回答由 GPT 生成】

优化部分：在启动摄像头之后，拍照界面没有显示视频流。

问题分析： 在Vue 2.0和uniapp中调用相机的getUserMedia()方法后没有反应可能是由于以下几个原因： 1. 浏览器兼容性问题：getUserMedia()方法可能在某些浏览器中不被支持，导致无法获取视频流。 2. 权限问题：浏览器可能没有获取摄像头权限，导致无法打开摄像头。 3. 页面布局问题：视频元素没有正确显示在页面上，导致无法看到视频流。

解决方案： 1. 确保浏览器兼容性：首先确认您使用的浏览器是否支持getUserMedia()方法。可以使用以下代码检测浏览器是否支持该方法：

javascript if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { // 浏览器支持getUserMedia()方法 } else { // 浏览器不支持getUserMedia()方法 }

如果浏览器不支持getUserMedia()方法，您可以尝试在支持该方法的浏览器中测试代码，如Chrome浏览器。

  1. 获取摄像头权限：确保您的浏览器已经授予网页获取摄像头权限的权限。通常，在第一次访问摄像头时，浏览器会提示用户授权。可以通过以下步骤检查权限：
  2. 在浏览器中打开设置界面，找到隐私/权限选项。
  3. 检查摄像头权限是否被禁用或未授权。

  4. 如果未授权，请授权网页访问摄像头。

  5. 页面布局和显示视频流：确保在页面上正确布局和显示视频元素。可以按照以下步骤检查和修复布局问题：

  6. 确保视频元素的id为"camera"，并与HTML代码中的id匹配。
  7. 确保在视频元素上设置了autoplay属性，以便在加载视频流后自动播放。
  8. 确保视频元素的宽度和高度设置正确，以适应页面和摄像头的尺寸要求。

请注意，由于getUserMedia()方法在不同浏览器和操作系统上的兼容性可能存在差异，上述解决方案并不能保证在所有情况下都能解决问题。如果问题仍然存在，您可以尝试使用其他方法来调用相机功能，或者查阅相关的浏览器文档和社区支持来获取更多帮助。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^