原文:怎样让HTML5调用手机摄像头拍照——实践就是一切

NanShan 小编将思路提供给了大家。学编程最重要的是实践,我这尽管有完好的代码,可是希望大家都能够自己写出属于自己的代码

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编码逗号之后的部分

怎样让HTML5调用手机摄像头拍照——实践就是一切的更多相关文章

  1. getUserMedia API及HTML5 调用手机摄像头拍照

    getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件 ...

  2. html5调用手机摄像头,实现拍照上传功能

    今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...

  3. HTML5调用手机摄像头,仅仅支持OPPOHD浏览器

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 利用html5调用本地摄像头拍照上传图片[转]

    利用html5调用本地摄像头拍照上传图片   html5概念啥的就不废话了,不知道的 百度, 谷歌一堆..今天学了学html5中的Canvas结合新增的<video>标签来获取本地摄像头, ...

  5. 使用HTML5+调用手机摄像头和相册

    前言:前端时间使用HTML5做了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了不少时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法简 ...

  6. html5调用手机摄像头

    <input type="file" accept="image/*" capture="camera"><input t ...

  7. 利用html5调用本地摄像头拍照上传图片

    这个是前台HTML的代码. <div id="contentHolder"> <video id="video" width="32 ...

  8. html5调用手机摄像头(图片可多选 限pc)

    html5自带的 input file=”” ,纯html5,并且不涉及到js ,就可以实现.代码如下: <input type="file" accept="im ...

  9. 亲测可用)html5 file调用手机摄像头

    在切图网一个客户的webapp项目中需要用到 html5调用手机摄像头,找了很多资料,大都是 js调用api  然后怎样怎样,做了几个demo测试发现根本不行, 后来恍然大悟,用html5自带的 in ...

随机推荐

  1. Java ClassLoader 原理详细分析(转)

    转载自:http://www.codeceo.com/article/java-classloader.html 一.什么是ClassLoader? 大家都知道,当我们写好一个Java程序之后,不是管 ...

  2. Tips for Planning Your Business Startup

    原文链接:http://domaintree.me/?p=1037 By Robert Thibodeau –  Starting a business can be a very daunting ...

  3. JsRender系列demo(7)compline

    <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery.j ...

  4. 【Android UI设计和开发】动画(Animation)详细说明(一)

    Android开发之动画效果浅析 请尊重他人的劳动成果.转载请注明出处:Android开发之动画效果浅析 程序执行效果图: Android动画主要包括补间动画(Tween)View Animation ...

  5. oracle收集ash和awr性能报告方法

    1.收集ash报告 [oracle@1 ~]$ sqlplus / as sysdbaSQL*Plus: Release 12.1.0.2.0 Production on Fri Sep 21 18: ...

  6. java微信公众号支付示例

    开始之前,先准备好:appid.商家号.商户密匙. 工具类: MD5Util.java package com.yiexpress.core.utils.wechat; import java.sec ...

  7. Python常用的软件包

    下面是Python开发常用的软件包. 名称 用途 安装命令 opengl   sudo pip3 install PyOpenGL  pyqtgraph GUI图形库 sudo pip3 instal ...

  8. ORM--Object Relational Mapping

    ORM 对象关系映射   Object Relational Mapping, 简称ORM,或O/RM,或O/R mapping 一种程序技术 用于实现面向对象编程语言里       不同类型系统   ...

  9. 销售人员的分析,也可以用类似RFM的思路吗?

    本文转自知乎 作者:接地气的陈老师 ————————————————————————————————————————————————————— 有同学问:“销售人员的分析,也可以用类似RFM的思路吗, ...

  10. Linux(Ubuntu) 下如何解压 .tar.gz 文件

    在终端输入以下命令即可解压: tar -zxvf YOUR_FILE_NAME.tar.gz 如果出现“权限不够”的错误提示,在命令前加上 sudo ,即 sudo tar -zxvf YOUR_FI ...