基于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中的Transition
Jul 15 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
Aug 31 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 HTML / CSS
HTML5语音识别标签写法附图
Nov 18 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
HTML5地理定位_动力节点Java学院整理
Jul 12 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
Jan 29 HTML / CSS
wordpress添加Html5的表单验证required方法小结
Aug 18 HTML / CSS
canvas 绘图时位置偏离的问题解决
Sep 16 HTML / CSS
css display table 自适应高度、宽度问题的解决
May 07 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
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
基于PHP文件操作的详细诠释
2013/06/21 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
Bootstrap实现省市区三级联动(亲测可用)
2019/07/26 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
python3中str(字符串)的使用教程
2017/03/23 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
解析python实现Lasso回归
2019/09/11 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
数组越界问题
2015/10/21 面试题
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
政风行风建设责任书
2014/07/23 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
2014年连锁店圣诞节活动方案
2014/12/09 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android
「SHOW BY ROCK!!」“雫シークレットマインド”组合单曲MV公开
2022/03/21 日漫
你真的会用Mysql的explain吗
2022/03/31 MySQL