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 圆角效果
Jul 15 HTML / CSS
今天学到的CSS最新技术(与图片背景相关)
Dec 24 HTML / CSS
使用CSS3的appearance属性改变任何元素的浏览器默认风格
Dec 24 HTML / CSS
使用css3制作登录表单的步骤
Apr 07 HTML / CSS
CSS改变网页中鼠标选中文字背景颜色例子
Apr 23 HTML / CSS
详解CSS3中border-image的使用
Jul 18 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
Dec 20 HTML / CSS
CSS3 分类菜单效果
May 27 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
Oct 28 HTML / CSS
HTML5本地存储之Web Storage应用介绍
Jan 06 HTML / CSS
html5 利用canvas实现超级玛丽简单动画
Sep 06 HTML / CSS
详解HTML5中的Communication API基本使用方法
Jan 29 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.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
CentOS下PHP7的编译安装及MySQL的支持和一些常见问题的解决办法
2015/12/17 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
jquery入门—访问DOM对象方法
2013/01/07 Javascript
JS随机生成不重复数据的实例方法
2013/07/17 Javascript
javascript常用方法汇总
2014/12/02 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
jQuery使用方法
2017/02/04 Javascript
jquery.validate.js 多个相同name的处理方式
2017/07/10 jQuery
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python自动格式化json文件的方法
2015/03/11 Python
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
Python 访问限制 private public的详细介绍
2018/10/16 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
50道外企软件测试面试题
2014/08/18 面试题
关于热爱祖国的演讲稿
2014/05/04 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
2016暑期社会实践新闻稿
2015/11/25 职场文书
年终工作总结范文
2019/06/20 职场文书
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android