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