问题：
//web rtc 调用摄像头(兼容性写法(谷歌、火狐、ie))
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
//调用成功会回调返回一个stream流 video:true 表示采集视频,audio:true 表示采集声音,反之就都不采集。
navigator.getUserMedia({video:true,audio:false},function(stream){
//将采集到的视频信息显示在video标签中
video.srcObject = stream;
},console.log)原文链接：https://blog.csdn.net/xiehuanbin/article/details/131512316
navigator.mediaDevices is undefined 会报错，得知因为加密的安全性问题：
目前查到的解决办法如下：
1. 使用https协议,需要域名
2. 手动修改本机浏览器配置【chrome://flags/ 】，多个地址用【,】隔开，修改后底部会提示重启浏览器
3.localhost 域
本地文件以file 形式打开时
其他情况下你在浏览器里log这个API都是返回undefined.
如果想要 HTTP 环境下也能使用和调试 MediaDevices.getUserMedia()，通过开启 Chrome 的相应参数，也是可以实现的。
传递相应参数来启动 Chrome,-unsafely-treat-insecure-origin-as-secure="http://example.com"
链接：https://www.jianshu.com/p/b59ac832a00a
1.第一种
业务逻辑需要人脸验证，需要通过调用摄像头获取人脸来调用接口做对比，所以学习了一下js关于调用摄像头拍照。主要通过video调用摄像头和canvas截取画面。
View Code
上述代码看起来并不多，包含了打开-截取图像-关闭 摄像头的功能，足以满足功能需求。
https://blog.csdn.net/m0_72436362/article/details/128321359
外接摄像头没错，笔记本的摄像头报错，放form标签里有问题，不显示
$("img").css("src", canvas.toDataURL("image/png"));
2.第二种，笔记本的摄像头打开没报错
获取用户媒体:
navigator.mediaDevices.getUserMedia({video: true, audio: true}) // 异步操作
枚举媒体数:video,audio输入输出设备
navigator.mediaDevices.enumerateDevices() // 异步操作
View Code
有些浏览器可能不支持此功能
必须通过服务器打开页面，通过files：//打开无效
如果通过远程服务器打开则必须是https协议， http协议也无法使用
转：https://www.cnblogs.com/scarecrowlxb/p/6804747.html
3.第三种
View Code
转：http://www.taodudu.cc/news/show-6195164.html?action=onClick
https://811w1z2xwj.codesandbox.io/
4.第四种
View Code
5. 调用用户的摄像头
调用电脑摄像头功能，经过在网上查找资料有以下三种方案实现。
通过浏览器API来getUserMedia来实现调用用户的摄像头，但有两点限制：部署到生产服务的时候要使用htts协议访问该项目，第二点限制就是第一次获取摄像头时要点击允许弹窗。
通过web端发送websocket请求给客户端，然后客户端调用摄像头应用程序，但每次初始打开摄像头应用时都有个初始化2~3秒左右，用户体验不免友好。
通过客户端获取摄像头的每一帧数据，并通过websocket返回给web端，具体步骤下面有代码讲解。
getUserMedia方式实现代码
View Code
客户端返回视频流方式实现代码
vue前端代码前端接收到H264视频流，需要用JMuxer来转码才能在video标签里播放，需要执行npm install JMuxer来安装这个库。详细代码如下：
View Code
链接：https://www.jianshu.com/p/e929fe5f8c35
6.这个里面比较多
https://blog.csdn.net/Nine_91/article/details/126173990?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0-126173990-blog-80924677.235^v38^pc_relevant_default_base3&spm=1001.2101.3001.4242.1&utm_relevant_index=3
View Code