h5调用摄像头之webRTC

今天研究了一下web页面打开摄像头的方法，踩了好多坑之后记录一下，以免以后重复踩坑

参考https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices

关键字: webRTC、mediaDevices

项目：vue（其实与vue无关，纯html+js也可以使用）

参考：https://webrtc.github.io/samples/src/content/getusermedia/gum/

源码：https://github.com/webrtc/samples/tree/gh-pages/src/content/getusermedia/gum

注意事项：

1.本地运行项目，在chrome浏览器中访问，浏览器会询问是否允许访问摄像头，点击允许之后就可以看到摄像头画面了

最简单的例子:

deubgLog只是用来写日志，方便在手机上查看，

但是运行在手机上就不行了，

报错：

error.name   NotSupportedError
error.message Only secure origins are allowed(see:https://goo.gl/Y0ZknV)

原因：源不安全

解决方案：项目部署到服务器，并且用https访问

2.部署带服务器之后safari可以访问，但是安卓手机上的浏览器不能访问，

报错：

error.name NotReadableError
error.message Could not start video source

参考了github上的源码之后，修改了部分代码

navigator.mediaDevices.getUserMedia({video:true})

修改为：

const constraints = window.constraints = {
	audio: false,
	video: true
};

navigator.mediaDevices.getUserMedia(constraints)

中间顺便定义了window.constraints

居然成功了

完整的附带测试的代码

但是在ios的微信中还是打不开摄像头，各种方法都未定义，调用不了