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媒体查询(Media Queries)介绍
Sep 12 HTML / CSS
HTML5实现视频直播功能思路详解
Nov 16 HTML / CSS
详解rem 适配布局
Oct 31 HTML / CSS
Html5页面在微信端的分享的实现方法
Aug 30 HTML / CSS
html5中canvas学习笔记2-判断浏览器是否支持canvas
Jan 06 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 HTML / CSS
简单html5代码获取地理位置
Mar 31 HTML / CSS
html5 更新图片颜色示例代码
Jul 29 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
Mar 20 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
Jul 25 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 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中常用编辑器推荐
2007/01/02 PHP
Symfony2联合查询实现方法
2016/03/18 PHP
php时间戳转换代码详解
2019/08/04 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
检测是否已安装 .NET Framework 3.5的js脚本
2009/02/14 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
关于微信中a链接无法跳转问题
2016/08/02 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
2017/03/23 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
2017/10/27 jQuery
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
详解iview的checkbox多选框全选时校验问题
2019/06/10 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
Vue内部渲染视图的方法
2019/09/02 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
python 快速排序代码
2009/11/23 Python
Python 文件和输入输出小结
2013/10/09 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
简单介绍python封装的基本知识
2019/08/10 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
html+css3实现的登录界面
2020/12/09 HTML / CSS
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
C语言基础笔试题
2013/04/27 面试题
2015年幼儿园班务工作总结
2015/05/12 职场文书
2015年学校总务处工作总结
2015/05/19 职场文书
圣诞晚会主持词开场白
2015/05/28 职场文书
中秋晚会致辞
2015/07/31 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby