使用html打开电脑前置摄像头并拍照

无效格式

已于 2022-02-18 16:28:28 修改

阅读量1.4k

点赞数 1

分类专栏： js 文章标签： html5 html javascript

于 2021-10-18 15:21:05 首次发布

本文链接：https://blog.csdn.net/m0_46466194/article/details/120827242

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用html打开电脑前置摄像头，并拍照

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <video id="video" width="300" height="300" poster="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F14%2F62%2F59043cebb703f_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637115934&t=cd4ebc01b4b11fb45ce65a3b2dc7e933"></video>
	<canvas id="canvas" width="300" height="300"></canvas><br>
    <button id="camera">摄像头</button><button id="snap">拍照</button>
</body>
<script>
    	//用来匹配不同的浏览器
		function getUserMedia(constraints,success,error){
			if(navigator.mediaDevices.getUserMedia){
				navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
			}else if (navigator.webkitGetUserMedia) {
				navigator.webkitGetUserMedia(constraints,success,error);
			}else if (navigator.mozGetUserMedia) {
				navigator.mozGetUserMedia(constraints,success,error);
			}else if (navigator.getUserMedia) {
				navigator.getUserMedia(constraints,success,error)
			}
		}

		//成功回调
		function success(stream){
			video.srcObject = stream;
			video.play();
		}
		//失败回调
		function error(error) {
			console.log("访问用户媒体失败");
		}

        document.getElementById('camera').addEventListener('click',function(){
			//视频窗口尺寸
            let size = 300;
            let video = document.getElementById('video');
            let canvas = document.getElementById('canvas');
            let context = canvas.getContext('2d');

            //开启摄像头
            if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
                getUserMedia({video:{width:size,height:size}},success,error)
            }else {
                alert("不支持");
            }
            //实现拍照的功能
            document.getElementById('snap').addEventListener('click',function(){
                context.drawImage(video,0,0,size,size);
            });

		});
</script>
</html>