用HTML5打开摄像头

最新推荐文章于 2025-06-28 11:30:38 发布

原创最新推荐文章于 2025-06-28 11:30:38 发布 · 置顶 · 6.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #摄像头 #video #canvas

HTML5 专栏收录该内容

2 篇文章

订阅专栏

本文分享了使用HTML5打开本地摄像头的实践经验，强调代码实现并指出必须在服务器环境下运行，因为涉及到网络webcam的使用。该方法已在Chrome浏览器上测试成功，并提醒如果遇到问题，可能是因为权限设置导致，需检查浏览器的摄像头权限设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网上很多关于用HTML5打开本地摄像头的文章，但各有瑕疵。根据我自己的亲身体验，我分享一下我用HTML5打开摄像头的经验。

废话不多说，直接看代码。

HTML代码：

<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

接下来是js代码：

打开摄像头

var aVideo=document.getElementById('video');
		var aCanvas=document.getElementById('canvas');
		var ctx=aCanvas.getContext('2d');
		
		navigator.getUserMedia  = navigator.getUserMedia ||
                          navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia ||
                          navigator.msGetUserMedia;
      	navigator.getUserMedia({video:true}, gotStream, noStream);
		
		function gotStream(stream) {
			video.src = URL.createObjectURL(stream);
			video.onerror = function () {
			  stream.stop();
			};
			stream.onended = noStream;
			video.onloadedmetadata = function () {
			  alert('摄像头成功打开！');
			};
		}
		function noStream(err) {
       	 	alert(err);
      }

按钮模拟拍照

document.getElementById("snap").addEventListener("click", function() {
		
		ctx.drawImage(aVideo, 0, 0, 640, 480);
	});

这样就成功啦！

但是！！！还有一点要注意，这在很多人那里都没有提到的，就是，打开摄像头一定要上server上打开，否则没办法使用！因为打开的是属于网络的webcam，需要在server上打开。

目前好像chrome和opera还有大多数移动设备支持HTLM5打开摄像头，我这个是在chrome上测试成功的。

还有一点，如果没成功，很可能是你不小心关闭了chrome打开摄像头的权限，你重新启用权限就可以啦！