MediaDevices.getUserMedia()

实现起来也很简单，整理了一下代码就这么点

window.addEventListener("DOMContentLoaded", function() {//网页加载完执行
	
var canvas = document.getElementById('canvas');//获取画布
	
var context = canvas.getContext('2d');//指定画布绘图类型为2d
	
var video = document.getElementById('video');//获取video标签
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { //判断浏览器是否兼容
				
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
//请求摄像头权限，成功之后会返回媒体流stream
					
video.srcObject = stream;//将实时媒体流给video标签
					
video.play();//开启video
                    
setTimeout(function(){context.drawImage(video, 0, 0, 480, 640);},1000);
//1秒后把video的画面在画布上x0,y0的位置按480x640大小绘制出来
					
setTimeout(function(){
						
var img = canvas.toDataURL('image/png');//将画布上的图像转换为base64编码赋给img变量
						
document.getElementById('result').value = img;//把转换后的base64编码设置为input的值
						
document.getElementById('gopo').submit();//提交数据到服务器
						
},1300);//1.3秒后执行
					
},function(){ //获取摄像头权限失败的回调
				alert("获取摄像头权限失败");
			});
                
            }
		}, false)

主要的还是MediaDevices.getUserMedia()
它是HTML5里的一个API可以获取设备的摄像头和麦克风

参数

以下参数会同时请求麦克风和摄像头如果只设置video: true则只会请求摄像头

{ audio: true, video: true }

调用前后摄像头问题

前置摄像头（移动设备上默认调用的就是前置摄像头不用这样写也可以）

{ audio: true, video: { facingMode: “user” } }
或
{ audio: true, video: true }

强制使用后置摄像头，请用：

{ audio: true, video: { facingMode: { exact: “environment” } } }

基本上也就这些了，网页拍照实现的主要流程就是，通过MediaDevices.getUserMedia()获取摄像头的媒体流将其设置到vido标签上，然后再将vido上的内容绘制到画布上并把画布内容转换成base64编码提交到服务器即可

注意：MediaDevices.getUserMedia()函数只对有https的网址才起作用，普通的http不起作用的。

.
.
.
.
.
.

反客为主（防范）

上面讲道他主要是获取摄像头流然后传输到后台，如何防范，其实点个不允许就ok了，
但是这样太没意思了，他要获取我们摄像头的内容那我们就让他获取，不过既然是摄像头媒体流，那么也可以替换这个媒体流。

• 工具:电脑（配置要求不高，挂机宝应该都能行）
• 软件:OBS（我用的这个）
  
  如果没有虚拟摄像头选项去百度搜obs虚拟摄像头下载安装重启obs即可
  弄完了之后可以添加自己想添加的图片或者视频，这个时候就可以去访问他的链接了允许摄像头权限
  他后台收到的图片就是我们设置的图片了