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

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

复制代码代码如下:

<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 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 = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
else if(navigator.mozGetUserMedia) { // Firefox-prefixed
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.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的画布技术及其强大，我们可以给图片上加入各种迷人的滤镜效果。现在，在浏览器里用自己的摄像头给自己拍张照片吧！

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

使用HTML5技术控制电脑或手机上的摄像头
移动设备和桌面电脑上的客户端API起初并不是同步的.最初总是移动设备上先拥有某些功能和相应的API,但慢慢的,这些API会出现在桌面电脑上.其中一个应用接口技术就是getUserMedia API,它 ...
使用HTML5技术控制电脑或手机上的摄像头（转载）
移动设备和桌面电脑上的客户端API起初并不是同步的.最初总是移动设备上先拥有某些功能和相应的API,但慢慢的,这些API会出现在桌面电脑上.其中一个应用接口技术就是getUserMedia API,它 ...
基于socket实现虚拟手柄使用手机控制电脑游戏（上）-电脑服务端
基于socket实现虚拟手柄使用手机控制电脑游戏(上)-电脑服务端这个是关于利用socket套接字实现手机控制电脑按键的一个实例,完成这个项目可以实现用手机控制狂野飙车等游戏,就是一个简易的手机虚拟 ...
java canvas 缩放图片_详解如何用HTML5 Canvas API控制图片的缩放变换
摘要:这篇HTML5栏目下的"详解如何用HTML5 Canvas API控制图片的缩放变换",介绍的技术点是"html5_canvas.canvas.Html5.控制图片 ...
html5 canvas+js实现ps钢笔抠图（速抠图 www.sukoutu.com）
html5 canvas+js实现ps钢笔抠图(速抠图 www.sukoutu.com) 根据html5 canvas+js实现ps钢笔抠图的实现,aiaito 开发者开发了一套在线抠图工具,速抠 ...
html5 canvas+js实现ps钢笔抠图
html5 canvas+js实现ps钢笔抠图原文:https://www.cnblogs.com/guozefeng/p/3719915.html 1. 项目要求需要用js实现photoshop中 ...
html5 retina 1像素,HTML5 canvas 在 iPhone 4 retina 屏幕上的优化
HTML5 canvas 在 iPhone 4 retina 屏幕上的优化 mac52ipod· 2011-02-11 阅读数 7793 随着 iPhone4 的推出, retina 屏在移动设备中被 ...
java连接电脑可以把整个文件下载到手机里然后直接用么,如果是山寨机支持java如何用电脑往手机上下载软件...
如果是山寨机支持java如何用电脑往手机上下载软件浏览次数:6388次悬赏分:0|解决时间:2009-4-26 09:09|提问者:李佳朔最佳答案目前国内的大多数国产手机均支持mpr格式软件!也 ...
视频文件 wrf格式，可以通过WRF格式视频转换器_wrf转成wmv 转换成 wmv格式，可以在电脑或手机上观看，且声音也能转换过来。之前wrf用耳机貌似播放不出来，之后是可以播放出来的。
视频文件 wrf格式,可以通过WRF格式视频转换器_wrf转成wmv 转换成 wmv格式,可以在电脑或手机上观看,且声音也能转换过来.之前wrf用耳机貌似播放不出来,之后是可以播放出来的. wmv可以 ...

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

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

最新文章

热门文章