基于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 相关文章推荐
CSS实现鼠标滑过鼠标点击代码写法
Dec 26 HTML / CSS
使用CSS3的rem属性制作响应式页面布局的要点解析
May 24 HTML / CSS
CSS3新属性transition-property transform box-shadow实例学习
Jun 06 HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 HTML / CSS
HTML5实现表单自动验证功能实例代码
Jan 11 HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 HTML / CSS
canvas绘制视频封面的方法
Feb 05 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 HTML / CSS
H5离线存储Manifest原理及使用
Apr 28 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
Feb 03 HTML / CSS
如何使用 resize 实现图片切换预览功能
Aug 23 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
ThinkPHP php 框架学习笔记
2009/10/30 PHP
深入php-fpm的两种进程管理模式详解
2013/06/03 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
node.js 用socket实现聊天的示例代码
2017/10/17 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
2020/11/30 Javascript
Python操作MongoDB详解及实例
2017/05/18 Python
利用python将json数据转换为csv格式的方法
2018/03/22 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
Django中create和save方法的不同
2019/08/13 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
TensorFlow自定义损失函数来预测商品销售量
2020/02/05 Python
python简单的三元一次方程求解实例
2020/04/02 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
html5 div布局与table布局详解
2016/11/16 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
nginx日志格式分析和修改
2022/04/28 Servers