网页调取设备摄像头

最新推荐文章于 2024-07-27 22:26:20 发布

kengjin

最新推荐文章于 2024-07-27 22:26:20 发布

阅读量4.8k

点赞数 1

分类专栏：前端画布文章标签： html html5 javascript

本文链接：https://blog.csdn.net/kengjin/article/details/107658103

版权

本文介绍了如何使用HTML5和JavaScript在网页上调用设备摄像头，并实现拍照功能。通过简单的JS代码，当浏览器支持getUserMedia时，可以直接设置video元素的src为摄像头直播链接。此外，还讲解了如何添加按钮监听器，实现在画布上捕获视频画面以实现拍照。

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

	以前我们需要使用第三方的插件才能从浏览器里访问用户的摄像头，这不免有些复杂。现在只需要HTML5的画布技术和javaScript，我们就能简单快速的操作用户的摄像头。不仅仅还是访问摄像头，而且是因为HTML5的画布技术及其强大，我们可以给图片上加入各种迷人的滤镜效果。

	移动设备和桌面电脑上的客户端API起初并不是同步的。最初总是移动设备上先拥有某些功能和相应的API，但慢慢的，这些API会出现在桌面电脑上。其中一个应用接口技术就是getUserMedia API，它能让应用开发者访问用户的摄像头或内置相机。下面就展示一下如何通过浏览器来访问你的摄像头，并提取截屏图形。

下面的代码里写了一部分注释，请阅读：

1.  <!-- 

2.      理想情况下我们应该先判断你的设备上是否 

3.      有摄像头或相机，但简单起见，我们在这里直接 

4.      写出了HTML标记，而不是用JavaScript先判断 

5.      然后动态生成这些标记 

6.  --> 

7.  <video id="video" width="640" height="480" autoplay></video> 

8.  <button id="snap">Snap Photo</button> 

9.  <canvas id="canvas" width="640" height="480"></canvas>

在写出上面这些标记前应该判断用户的客户端是否有摄像头支持，但这里为了不那么麻烦，这里直接写出了这些HTML标记，需要注意的是我们这