基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码


Posted in HTML / CSS onDecember 13, 2012

基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码

WebRTC可能是明年最受关注的HTML5标准了,Mozilla为此开发了一套帮助你控制硬件的API,例如,摄像头,麦克风,或者是加速表。你可以不依赖其它的插件来调用你需要的本机硬件设备。

在今天的这篇文章中,我们将介绍来自Wolfram Hempel开发的Photobooth.js,使用这个类库可以帮助你快速的调用摄像头功能,你可以很容易的添加摄像头功能到网站中。并且快速的帮助你拍照,你可以使用这个功能来实现用户的大头照拍摄,是不是非常不错?

主要特性
    对比度设置颜色设置亮度设置色调设置拍照按钮支持最新的chrome, firefox, opera等浏览器支持jQuery插件方式和javascript代码方式

基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码

使用Chrome打开在线演示后,请确认允许浏览器调用你的摄像头,如下:

基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码

Javascript代码:
复制代码
代码如下:

$('#webcam').photobooth().on("image",function( event, dataUrl ){
$('.nopic').hide();
$( "#pictures" ).prepend( '<img src="' + dataUrl + '" >');
});

以上代码将生成的图片数据传递到id=picture的这个标签中。具体说明请参考相关API。
源码下载

希望大家喜欢我们提供的这个在线演示和demo,如果你有任何问题,请给我们留言,谢谢!

HTML / CSS 相关文章推荐
css3中新增的样式使用示例附效果图
Aug 19 HTML / CSS
纯CSS3发光分享按钮的实现教程
Sep 06 HTML / CSS
CSS3简单实现照片墙
Dec 12 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 HTML / CSS
canvas环形倒计时组件的示例代码
Jun 14 HTML / CSS
吃透移动端 Html5 响应式布局
Dec 16 HTML / CSS
详解HTML5常用的语义化标签
Sep 27 HTML / CSS
HTML5拖放API实现自动生成相框功能
Apr 07 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 HTML / CSS
CSS 鼠标选中文字后改变背景色的实现代码
May 21 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
Dec 13 #HTML / CSS
HTML5 实现一个访问本地文件的实例
Dec 13 #HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
Dec 13 #HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
Dec 13 #HTML / CSS
HTML5 新旧语法标记对我们有什么好处
Dec 13 #HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 #HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
Dec 09 #HTML / CSS
You might like
用PHP写的MySQL数据库用户认证系统代码
2007/03/22 PHP
PHP SQLite类
2009/05/07 PHP
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
深入解析php之apc
2013/05/15 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
PHP类的特性实例分析
2016/09/28 PHP
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
[01:35]辉夜杯战队访谈宣传片—LGD
2015/12/25 DOTA
Django在win10下的安装并创建工程
2017/11/20 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
python有几个版本
2020/06/17 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
某公司.Net方向面试题
2014/04/24 面试题
文言文形式的学生求职信
2013/12/03 职场文书
设备动力科岗位职责范本
2014/02/23 职场文书
安全生产标语
2014/06/06 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
电信营业员岗位职责
2015/04/14 职场文书
交通事故代理词范文
2015/05/23 职场文书
秋菊打官司观后感
2015/06/03 职场文书
感恩教育观后感
2015/06/17 职场文书