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


Posted in HTML / CSS onMay 03, 2014

移动设备和桌面电脑上的客户端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 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的画布技术及其强大,我们可以给图片上加入各种迷人的滤镜效果。现在,在浏览器里用自己的摄像头给自己拍张照片吧!

HTML / CSS 相关文章推荐
CSS3轻松实现清新 Loading 效果的简单实例
Jun 06 HTML / CSS
css3中背景尺寸background-size详解
Sep 02 HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
Apr 25 HTML / CSS
Css3新特性应用之形状总结
Dec 08 HTML / CSS
CSS3动画:5种预载动画效果实例
Apr 05 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
May 09 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
May 06 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
Sep 14 HTML / CSS
HTML5实现移动端点击翻牌功能
Oct 23 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
Apr 29 #HTML / CSS
HTML5中5个简单实用的API
Apr 28 #HTML / CSS
会走动的图形html5时钟示例
Apr 27 #HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 #HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 #HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 #HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 #HTML / CSS
You might like
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
通过php快速统计某个数据库中每张表的数据量
2012/09/04 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
学习ExtJS Window常用方法
2009/10/07 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
基于jstree使用AJAX请求获取数据形成树
2017/08/29 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
微信小程序dom操作的替代思路实例分析
2018/12/06 Javascript
详解如何使用webpack打包多页jquery项目
2019/02/01 jQuery
fastadmin中调用js的方法
2019/05/14 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
python文件和目录操作函数小结
2014/07/11 Python
python django 增删改查操作 数据库Mysql
2017/07/27 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
南非领先的在线旅行社:Travelstart南非
2016/09/04 全球购物
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
“四风”问题整改措施和努力方向
2014/09/20 职场文书
毕业生的自我鉴定表范文
2019/05/16 职场文书
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android
Python实现滑雪小游戏
2021/09/25 Python