javascript 摄像头,javascript调用手机摄像头

　　移动设备和桌面计算机上的客户端API最初是不同步的。一开始，移动设备总是有一定的功能和对应的API，但是慢慢的，这些API就会出现在桌面电脑上。应用程序接口技术之一是getUserMedia API，它允许应用程序开发人员访问用户的摄像头或内置摄像头。让我告诉你如何通过浏览器访问你的相机，并提取截图。

　　HTML代码

　　我在下面的代码里写了一些注释，请阅读：复制代码如下：

　　！-

　　理想情况下，我们应该首先确定您的设备是否

　　有相机或摄像机，但为了简单起见，我们直接在这里

　　写HTML标签而不是用JavaScript判断。

　　然后动态生成这些标签。

　　-

　　视频id=视频宽度=640 高度=480 自动播放/视频

　　button id=snap 快照照片/button

　　canvas id=canvas 宽度=640 高度=480/canvas

　　在写上面的标签之前，你要判断用户的客户端是否有摄像头支持，但是这里为了省事，直接在这里写这些HTML标签。需要注意的是，我们这里使用的长宽是640480。

　　JavaScript代码

　　因为我们手写HTML，下面的js代码会比你想象的简单很多。复制代码如下：

　　//将事件侦听器放到适当的位置

　　window . addevent listener( DOMContentLoaded ，function() {

　　//抓取元素，创建设置等。

　　var canvas=document . getelementbyid( canvas )，

　　context=canvas.getContext(2d )，

　　video=document . getelementbyid( video )，

　　videoObj={ video: true }，

　　errBack=函数(错误){

　　console.log(视频捕获错误： ，error . code)；

　　};

　　//将视频监听器放置到位

　　if(navigator.getUserMedia) { //标准

　　navigator . getuser media(video obj，function(stream) {

　　video.src=stream

　　video . play()；

　　}，errBack)；

　　} else if(navigator . WebKit getuser media){//WebKit-前缀

　　navigator . webkitgetusermedia(video obj，function(stream){

　　video . src=window . webkiturl . createobjecturl(stream)；

　　video . play()；

　　}，errBack)；

　　}

　　else if(navigator . mozgetusermedia){//Firefox-前缀

　　navigator . mozgetusermedia(video obj，function(stream){

　　video.src=window。URL.createObjectURL(流)；

　　video . play()；

　　}，errBack)；

　　}

　　}，假)；

　　一旦判断出用户的浏览器支持getUserMedia，下面就很简单了，只需要将那个视频元素的src设置为用户摄像头的视频直播连接即可。这就是你用浏览器访问相机所需要做的一切！

　　拍照的功能只能说稍微复杂一点。我们在按钮上添加一个监视器，并在画布上绘制视频图片。复制代码如下：

　　//触发拍照动作

　　document . getelementbyid(“snap”)。addEventListener(click ，function() {

　　context.drawImage(视频，0，0，640，480)；

　　});

　　当然，你也可以给图片添加一些滤镜效果。

　　以前我们要用第三方插件从浏览器访问用户的摄像头，有些复杂。现在只需要HTML5和javaScript的canvas技术，就可以简单快速的操作用户的摄像头。不仅仅是为了接入摄像头，更因为HTML5的画布技术和它的强大，我们可以给图片添加各种迷人的滤镜效果。现在，在浏览器里用自己的相机给自己拍一张照片吧！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。