移动设备和桌面电脑上的客户端API起初并不是同步的。最初总是移动设备上先拥有某些
功能和
相应的API,但慢慢的,这些API
会出现在桌面电脑上。其中
一个应用接口技术就是getUserMedia API,它能让应用开发者访问
用户的摄像头或内置相机。下面就让我展示一下如何通过浏览器来访问
你的摄像头,并
提取截屏图形。
HTML代码 下面的
代码里我写了一部分注释,请阅读: 复制
代码代码如下: <!-- 理想情况下我们应该先判断
你的设备上是否 有摄像头或相机,但简单起见,我们
在这里直接 写出了HTML
标记,而不是用JavaScript先判断 然后动态
生成这些
标记 --> <video id="video" width="640" height="480" autoplay></video> <button id="snap">Snap Photo</button> <canvas id="canvas" width="640" height="480"></canvas> 在写出上面这些
标记前应该判断
用户的客户端是否有摄像头
支持,但这里为了不那么麻烦,这里直接写出了这些HTML
标记,
需要注意的是我们这里使用的长宽是640×480。 JavaScript
代码 因为我们是手工写出的HTML,所以下面的js
代码会比你想象的要简单了
很多。 复制
代码代码如下: // Put event listeners into place window.addEventListener("DOMContentLoaded",function()
{ // Grab elements,create set
Tings,etc. var canvas = document.getElementById("canvas"),co
ntext = canva
s.getCo
ntext("2d"),video = document.getElementById("video"),videoObj =
{ "video": true },err
BACk = function(error)
{ console.log("Video capture error: ",error.cod
E); }; // Put video listeners into place if(navigator.getUserMedia)
{ // Standard navigator.getUserMedia(videoObj,function(stream)
{ video.src = stream; video.play(
); },err
BACk
); } else if(navigator.webkitGetUserMedia)
{ // WebKit-prefixed navigator.webkitGetUserMedia(videoObj,function(stream)
{ video.src = window.webkitUR
l.createObjectURL(stream
); video.play(
); },err
BACk
); } else if(navigator.mozGetUserMedia)
{ // Firefox-prefixed navigator.mozGetUserMedia(videoObj,function(stream)
{ video.src = window.UR
l.createObjectURL(stream
); video.play(
); },err
BACk
); } },
fals
E); 一旦判断出
用户浏览器
支持getUserMedia ,下面就非常简单了,只需要将那个video元素的src设置为
用户的摄像头视频直播连接。这就是用浏览器访问摄像头需
要做的所有的事情! 拍照的
功能只能说是稍微复杂一点点。我们在按钮上加入
一个监听器,将视频画面画到画布上。 复制
代码代码如下: // 触发拍照动作 document.getElementById("snap") .addEventListener("click",function()
{ co
ntext.drawImage(video,640,480
); }
); 当然,你还可以在
图片上加一些滤镜
效果…. 以前我们需要使用第三方的
插件才能从浏览器里访问
用户的摄像头,这不免有些复杂。现在只需要HTML5的画布技术和javaScript,我们就能简单
快速的操作
用户的摄像头。不仅仅还是访问摄像头,而且
是因为HTML5的画布技术及其强大,我们可以给
图片上加入各种迷人的滤镜
效果。现在,在浏览器里用自己的摄像头给自己拍张照片吧!