HTML5调用手机摄像头拍照的实现思路及代码


Posted in HTML / CSS onJune 15, 2014

小编将思路提供给了大家,学编程最重要的是实践,我这虽然有完善的代码,但是希望大家都可以自己写出属于自己的代码
HTML5 The Media Capture API提供了对摄像头的可编程访问,用户可以直接用getUserMedia获得摄像头提供的视频流。但实际上用html5调用手机摄像头存在很多问题:
1)谷歌的发布的Chrome到了21版本后,才新增了一个用于高质量视频音频通讯的getUserMedia API,该API允许Web应用程序访问摄像头和麦克风,其他手机浏览器只有opera支持html5调用本地拍照功能
2)两个浏览器均不支持访问多个摄像头:chrome不支持访问后置摄像头,pera支持访问后置摄像头的

android手机,浏览器chrome32版本下实现了浏览器调用设备摄像头进行拍照。主要分3个步骤来完成:

1)获取视频流
添加一个HTML5的Video标签,并将从摄像头获得视频作为这个标签的输入来源

复制代码
代码如下:

var video = document.getElementByIdx_x_x("video");
navigator.getUserMedia({video:true}, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
}, function (error) { alert(error); });

2)拍照
关于拍照功能,采用HTML5的Canvas实时捕获Video标签的内容,Video元素能作为Canvas图像的输入
复制代码
代码如下:

function scamera() {
var videoElement = document.getElementByIdx_x_x('video');
var canvasObj = document.getElementByIdx_x_x('canvas1');
var context1 = canvasObj.getContext('2d');
context1.fillStyle = "#ffffff";
context1.fillRect(0, 0, 320, 240);
context1.drawImage(videoElement, 0, 0, 320, 240);
}

3)图片获取
要从Canvas获取图片数据,其核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像
复制代码
代码如下:

var imgData=canvas.toDataURL(“image/png”);

imgData格式如下:”data:image/png;base64,xxxxx“
真正图像数据是base64编码逗号之后的部分
HTML / CSS 相关文章推荐
CSS3弹性伸缩布局之box布局
Jul 12 HTML / CSS
使用CSS3实现圆角,阴影,透明
Dec 23 HTML / CSS
使用CSS禁止textarea调整大小功能的方法
Mar 13 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
使用CSS变量实现炫酷惊人的悬浮效果
Apr 26 HTML / CSS
css3 实现元素弧线运动的示例代码
Apr 24 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
Jun 27 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
html5使用canvas绘制一张图片
Dec 15 HTML / CSS
HTML5 Canvas入门学习教程
Mar 17 HTML / CSS
canvas像素点操作之视频绿幕抠图
Sep 11 HTML / CSS
AmazeUI 面板的实现示例
Aug 17 HTML / CSS
html5在移动端的屏幕适应问题示例探讨
Jun 15 #HTML / CSS
HTML5 创建canvas元素示例代码
Jun 04 #HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
Jun 04 #HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 #HTML / CSS
HTML5图片预览实例分享
Jun 04 #HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
Jun 03 #HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
May 31 #HTML / CSS
You might like
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
解密效果
2006/06/23 Javascript
javascript offsetX与layerX区别
2010/03/12 Javascript
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
jquery特效 幻灯片效果示例代码
2013/07/16 Javascript
ParseInt函数参数设置介绍
2014/01/02 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
javascript向后台传送相同属性的参数即数组参数
2014/02/17 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
Node中使用ES6语法的基础教程
2018/01/05 Javascript
puppeteer库入门初探
2019/01/09 Javascript
详解jQuery中的getAll()和cleanData()
2019/04/15 jQuery
vue自定义树状结构图的实现方法
2020/10/18 Javascript
python控制台显示时钟的示例
2014/02/24 Python
Python进阶篇之字典操作总结
2016/11/16 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
PyCharm更改字体和界面样式的方法步骤
2019/09/27 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
秘书专业自荐信范文
2013/12/26 职场文书
50岁生日感言
2014/01/23 职场文书
洗发水广告词
2014/03/13 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL