首页 网络编程 前端制作 数据库 CMS教程 脚本编程 微信开发 小程序开发 服务器

html5

热门: ASP.NET PHP编程 ASP编程 JSP编程

HTML5 Canvas+JS控制电脑或手机上的摄像头实例

来源:未知 发布时间:2017-05-13
点评:移动设备和桌面电脑上的客户端API起初并不是同步的。最初总是移动设备上先拥有某些功能和相应的API,但慢慢的,这些API会出现在桌面电脑上。其中一个应用接口技术就是getUserMedia API,它能让应用开发者访问用户的摄像头或内置相机

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

HTML代码X6LHTML5中文学习网 - HTML5先行者学习网

下面的代码里我写了一部分注释,请阅读:X6LHTML5中文学习网 - HTML5先行者学习网

复制代码代码如下:X6LHTML5中文学习网 - HTML5先行者学习网
<!--X6LHTML5中文学习网 - HTML5先行者学习网
理想情况下我们应该先判断你的设备上是否X6LHTML5中文学习网 - HTML5先行者学习网
有摄像头或相机,但简单起见,我们在这里直接X6LHTML5中文学习网 - HTML5先行者学习网
写出了HTML标记,而不是用JavaScript先判断X6LHTML5中文学习网 - HTML5先行者学习网
然后动态生成这些标记X6LHTML5中文学习网 - HTML5先行者学习网
-->X6LHTML5中文学习网 - HTML5先行者学习网
<video id="video" width="640" height="480" autoplay></video>X6LHTML5中文学习网 - HTML5先行者学习网
<button id="snap">Snap Photo</button>X6LHTML5中文学习网 - HTML5先行者学习网
<canvas id="canvas" width="640" height="480"></canvas>X6LHTML5中文学习网 - HTML5先行者学习网
在写出上面这些标记前应该判断用户的客户端是否有摄像头支持,但这里为了不那么麻烦,这里直接写出了这些HTML标记,需要注意的是我们这里使用的长宽是640×480。X6LHTML5中文学习网 - HTML5先行者学习网

JavaScript代码X6LHTML5中文学习网 - HTML5先行者学习网

因为我们是手工写出的HTML,所以下面的js代码会比你想象的要简单了很多。X6LHTML5中文学习网 - HTML5先行者学习网

复制代码代码如下:X6LHTML5中文学习网 - HTML5先行者学习网
// Put event listeners into placeX6LHTML5中文学习网 - HTML5先行者学习网
window.addEventListener("DOMContentLoaded", function() {X6LHTML5中文学习网 - HTML5先行者学习网
// Grab elements, create settings, etc.X6LHTML5中文学习网 - HTML5先行者学习网
var canvas = document.getElementById("canvas"),X6LHTML5中文学习网 - HTML5先行者学习网
context = canvas.getContext("2d"),X6LHTML5中文学习网 - HTML5先行者学习网
video = document.getElementById("video"),X6LHTML5中文学习网 - HTML5先行者学习网
videoObj = { "video": true },X6LHTML5中文学习网 - HTML5先行者学习网
errBack = function(error) {X6LHTML5中文学习网 - HTML5先行者学习网
console.log("Video capture error: ", error.code); X6LHTML5中文学习网 - HTML5先行者学习网
};X6LHTML5中文学习网 - HTML5先行者学习网
// Put video listeners into placeX6LHTML5中文学习网 - HTML5先行者学习网
if(navigator.getUserMedia) { // StandardX6LHTML5中文学习网 - HTML5先行者学习网
navigator.getUserMedia(videoObj, function(stream) {X6LHTML5中文学习网 - HTML5先行者学习网
video.src = stream;X6LHTML5中文学习网 - HTML5先行者学习网
video.play();X6LHTML5中文学习网 - HTML5先行者学习网
}, errBack);X6LHTML5中文学习网 - HTML5先行者学习网
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixedX6LHTML5中文学习网 - HTML5先行者学习网
navigator.webkitGetUserMedia(videoObj, function(stream){X6LHTML5中文学习网 - HTML5先行者学习网
video.src = window.webkitURL.createObjectURL(stream);X6LHTML5中文学习网 - HTML5先行者学习网
video.play();X6LHTML5中文学习网 - HTML5先行者学习网
}, errBack);X6LHTML5中文学习网 - HTML5先行者学习网
}X6LHTML5中文学习网 - HTML5先行者学习网
else if(navigator.mozGetUserMedia) { // Firefox-prefixedX6LHTML5中文学习网 - HTML5先行者学习网
navigator.mozGetUserMedia(videoObj, function(stream){X6LHTML5中文学习网 - HTML5先行者学习网
video.src = window.URL.createObjectURL(stream);X6LHTML5中文学习网 - HTML5先行者学习网
video.play();X6LHTML5中文学习网 - HTML5先行者学习网
}, errBack);X6LHTML5中文学习网 - HTML5先行者学习网
}X6LHTML5中文学习网 - HTML5先行者学习网
}, false);X6LHTML5中文学习网 - HTML5先行者学习网
一旦判断出用户浏览器支持getUserMedia ,下面就非常简单了,只需要将那个video元素的src设置为用户的摄像头视频直播连接。这就是用浏览器访问摄像头需要做的所有的事情!X6LHTML5中文学习网 - HTML5先行者学习网

拍照的功能只能说是稍微复杂一点点。我们在按钮上加入一个监听器,将视频画面画到画布上。X6LHTML5中文学习网 - HTML5先行者学习网

复制代码代码如下:X6LHTML5中文学习网 - HTML5先行者学习网
// 触发拍照动作X6LHTML5中文学习网 - HTML5先行者学习网
document.getElementById("snap")X6LHTML5中文学习网 - HTML5先行者学习网
.addEventListener("click", function() {X6LHTML5中文学习网 - HTML5先行者学习网
context.drawImage(video, 0, 0, 640, 480);X6LHTML5中文学习网 - HTML5先行者学习网
});X6LHTML5中文学习网 - HTML5先行者学习网
当然,你还可以在图片上加一些滤镜效果….X6LHTML5中文学习网 - HTML5先行者学习网

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

X6LHTML5中文学习网 - HTML5先行者学习网
网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 微信开发 | 小程序开发 | 服务器 |

程序员学习网,提供最新的微信开发教程,小程序开发教程,网络编程、php教程、asp.net教程、微信公众平台二次开发教程、脚本编程、网页制作、网页设计、网页特效,为站长与网络编程从业者提供学习资料,凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2018 程序员学习网 版权所有,并保留所有权利。

电脑版 | 移动版