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 相关文章推荐
收集的7个CSS3代码生成工具
Apr 17 HTML / CSS
基于css3实现漂亮便签样式
Mar 18 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
Mar 29 HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
Mar 28 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
Oct 23 HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
Jan 03 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 HTML / CSS
sass 常用备忘案例详解
Sep 15 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
PHP数组及条件,循环语句学习
2012/11/11 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
php变量作用域的深入解析
2013/06/03 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
JavaScript实现定时页面跳转功能示例
2017/02/14 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
python和C语言混合编程实例
2014/06/04 Python
详解在Python和IPython中使用Docker
2015/04/28 Python
详解Python中dict与set的使用
2015/08/10 Python
Python编程之string相关操作实例详解
2017/07/22 Python
对python中的float除法和整除法的实例详解
2019/07/20 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
大学四年学习的自我评价分享
2013/12/09 职场文书
个人函授自我鉴定
2014/03/25 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
怎么写工作检讨书
2014/11/16 职场文书
图文详解matlab原始处理图像几何变换
2021/07/09 Python