用HTML5打开摄像头

最新推荐文章于 2024-08-20 15:15:38 发布

置顶

夏日绝句

最新推荐文章于 2024-08-20 15:15:38 发布

阅读量6.7k

点赞数

分类专栏： HTML5 文章标签： html5 摄像头 video canvas

本文链接：https://blog.csdn.net/Jerryjyuan/article/details/40180787

版权

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

摘要由CSDN通过智能技术生成

网上很多关于用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.