标签：mediaDevices 网页 微信 获取 getUserMedia navigator 摄像头
绕了很大一圈其实解决方法很简单。
如果有类似业务需求的思路可以参考。
最近获得了一个需求，微信公众号网页开发，要做一个页面获取手机的摄像头功能，显示在页面里，然后再加样式，效果就下图，视频内容仅显示在黄圈中。我一个后端研究这么个破东西查了一上午资料。
最初的想法是，通过微信的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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。