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

dengbin1028

dengbin1028

2016-02-19 12:34

想不想get新技能酷炫一下,今天图老师小编就跟大家分享个简单的基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码教程,一起来看看吧!超容易上手~

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

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

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)Javascript代码:

代码如下:

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

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

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

展开更多 50%)
分享

猜你喜欢

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

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

html5时钟实现代码

Web开发
html5时钟实现代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

html5 canvas 简单画板实现代码

Web开发
html5 canvas 简单画板实现代码

HTML5上传文件显示进度的实现代码

Web开发
HTML5上传文件显示进度的实现代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

使用HTML5拍照示例代码

Web开发
使用HTML5拍照示例代码

html5 兼容IE6结构的实现代码

Web开发
html5 兼容IE6结构的实现代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

C语言:黑客学员必修课(二)

C语言:黑客学员必修课(二)

HTML5引入的新数组TypedArray介绍

HTML5引入的新数组TypedArray介绍
下拉加载更多内容 ↓