如何用js调用网络摄像头并有效处理常见错误？

本文共计1433个文字，预计阅读时间需要6分钟。

由于业务原因，需要在Web端页面接入各类网络摄像头，遇到了不少问题。主要问题是难以准确识别摄像头品牌和分辨率（即读取不出摄像头的品牌和分辨率）。

最近由于业务的原因，需要在Web端页面接入调试各类的网络摄像头，遇到了很多匪夷所思的问题（说的就是读得出摄像头的品牌，读不出摄像头的分辨率）。于是整理了这篇文章作为备忘录，也希望能帮到有类似的小伙伴们。

基础代码

navigator.mediaDevices.getUserMedia({ audio: false, video: true }).then(async (stream) => { let video = document.getElementById('#video') // 兼容性监测 if( 'srcObject' in video ) { video.srcObject = stream } else { // 在支持srcObject的浏览器上，不再支持使用这种方式 video.src = URL.createObjectURL(stream) } await video.play() })

兼容性

从caniuse的兼容性来看，整体兼容性一般，IE系列浏览器完全不支持，iOS不仅需要iOS 11以上的版本，而且在APP的嵌入式页面也无法通过api进行调用。