解决：微信网页开发，通过 navigator.mediaDevices.getUserMedia() 获取摄像头输入流踩的坑

绕了很大一圈其实解决方法很简单。
如果有类似业务需求的思路可以参考。
最近获得了一个需求，微信公众号网页开发，要做一个页面获取手机的摄像头功能，显示在页面里，然后再加样式，效果就下图，视频内容仅显示在黄圈中。我一个后端研究这么个破东西查了一上午资料。

---

最初的想法是，通过微信的jssdk获取手机摄像头的使用权限，调用微信的接口来使用摄像头拍照，一切都是顺理成章，在手机端顺利的调到了摄像头功能。

wx.chooseImage() // 具体的实现见微信 JSSDK 文档

然而。。。这个方法直接调出了摄像功能，效果就是全屏显示照相功能，直接跃出了网页。因此无法在此基础上添加样式。
所以，更改了目标，希望获取视频的输入流，然后显示在网页中。这里就需要了解到，video标签。那么问题就出现了，如何获取到手机的视频输入流。

---

经过网上查阅资料，发现 MDN 文档，其中访问 MediaDevices 单例对象 navigator.mediaDevices 他的 getUserMedia() 方法可以获取到视频流。然后添加样式就让美工解决了。 很好抱着这样的想法，进行测试发现报错。  说没有这个方法。然后就去网上查。是不是微信浏览器不支持 navigator 对象的这个 getUserMedia() 方法。发现有的确实说什么不支持，又说微信浏览器垃圾的。我不信邪！ 看了[官方文档](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia)，注意到了这个问题

使用此方法需要一个安全连接。也就是要 Https 协议请求的网页才能使用这个对象。
然后，就是将本地测试环境更改为 https。具体方法见百度，我的是前后端分离项目，要都更改为 Https 启动

---

VUE 启动以后

SpringBoot 启动以后

然后在微信开发者工具中测试

标签：mediaDevices,网页,微信,获取,getUserMedia,navigator,摄像头
来源： https://blog.csdn.net/weixin_44062052/article/details/110871424