使用js调用摄像头拍照

scarecrowlxb 2021-11-14 原文

webRTC，浏览器里拍照

在一些浏览器里已经可以使用web api调用摄像头功能了。
基于此可以经行拍照摄像功能，网上找了些资料，然后实现了简单的拍照功能
演示地址 bingxl.cn/webrtc.html

代码

<!DOCTYPE html>
<html lang="ZH-CN">
<head>
  <meta charset="utf-8">
  <title>web RTC 测试</title>
  <style>
    .booth {
	  width:400px;
	 
	  background:#ccc;
	  border: 10px solid #ddd;
	  margin: 0 auto;
	}
  </style>
</head>
<body>
  <div class="booth">
    <video id="video" width="400" height="300"></video>
	<button id=\'tack\'> snap shot</button>
	<canvas id=\'canvas\' width=\'400\' height=\'300\'></canvas>
	<img id=\'img\' src=\'\'>
  </div>
 
 
  <script>
    var video = document.getElementById(\'video\'),
		canvas = document.getElementById(\'canvas\'),
		snap = document.getElementById(\'tack\'),
		img = document.getElementById(\'img\'),
		vendorUrl = window.URL || window.webkitURL;
		
	//媒体对象
	navigator.getMedia = navigator.getUserMedia ||
						 navagator.webkitGetUserMedia ||
						 navigator.mozGetUserMedia ||
						 navigator.msGetUserMedia;
	navigator.getMedia({
		video: true, //使用摄像头对象
		audio: false  //不适用音频
	}, function(strem){
		console.log(strem);
		video.src = vendorUrl.createObjectURL(strem);
		video.play();
	}, function(error) {
		//error.code
		console.log(error);
	});
	snap.addEventListener(\'click\', function(){
	
		//绘制canvas图形
		canvas.getContext(\'2d\').drawImage(video, 0, 0, 400, 300);
		
		//把canvas图像转为img图片
		img.src = canvas.toDataURL("image/png");
		
	})
  </script>
</body>
</html>

demo演示;

特别说明