用navigator对象访问设备摄像头

来源：华佗小知识

因为手机浏览器一般都会禁止js脚本访问设备，所以这个网页只能在(比较新的)电脑浏览器上正常工作。后端照旧是用flask，这里就不啰嗦了，直接上网页代码：

<body>
	<video id = "video" autoplay style = "width: 480px; height: 320px"></video>
	<div><button id = "capture">拍照</button></div>
	<canvas id = "canvas" width = "480" height = "320"></canvas>
</body>
</html>
<script>
    // 顾名思义，用CSS3选择器选择网页元素
	var video = document.querySelector("#video");
	var canvas = document.querySelector("canvas");
    // 制造一个二维画布对象
	var context = canvas.getContext("2d");
    // constraints是一个控制参数的{video:, audio:}对象，success是成功加载摄像机的数据流后的回调函数，error用来报错
	function capturePicture(constraints, success, error){
		if(navigator.mediaDevices.getUserMedia){
            // .then包含成功后要执行的代码块，.catch用来处理异常
			navigator.mediaDevices.getUserMedia(constraints)
				.then(success)
				.catch(error);
		}
	}
	function success(stream){
		var compatibleURL = window.URL || window.webkitURL;
		console.log(stream);
        // 将video对象的引用对象变成数据流
		video.srcObject = stream;
		video.play(); 
	}
	function error(err){
		console.log("访问媒体信息失败：", err.name, ", ",err.message);
	}

	capturePicture({video: {width:480, height:320}}, success, error);
    // 声明一个监听函数用来绘制图像
	document.querySelector("#capture").addEventListener("click", () => {
		context.drawImage(video, 0, 0, 480, 320);
	});
</script>

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文