webApp迅速的发展，各种跨平台框架如雨后春笋般的成倍增长着；使用H5去开发跨平台APP，经常会遇到调用系统底层接口的一些问题：如摄像头、拍照、支付、打电话、短信等等一系列功能，这里简单介绍一部分，以后会持续更新；
1. H5 调用本地摄像头
plus.camera.getCamera( index );
index可取1、2。
1代表主摄像头
2代表副摄像头，方法返回一个摄像头的管理对象Camera。
Camera的静态属性：
Camera.supportedImageResolutions:
字符串数组，摄像头支持的拍照分辨率
Camera.supportedVideoResolutions: 字符串数组，摄像头支持的摄像分辨率
Camera.supportedImageFormats: 字符串数组，摄像头支持的拍照文件格式
Camera.supportedVideoFormats: 字符串数组，摄像头支持的摄像文件格式
Camera的方法：
①Camera.captureImage( successCB, errorCB, option );调用摄像头进行拍照动作
successCB(capturedFile )：调用摄像头操作成功的回调函数，在拍照或摄像操作成功时调用，用于返
回图片或视频文件的路径capturedFile 。
errorCB：调用摄像头操作失败的回调函数。
option ：拍照的拓展参数
filename:拍照文件保存的路径、format:拍照的文件格式、index拍照默认使用的摄像头、popover拍照或摄像界面弹出指示区域（top,left….）;
②Camera.startVideoCapture( successCB, errorCB, option );调用摄像头进行摄像操作
successCB（capturedFile ）：调用摄像头进行摄像操作成功的回调函数，用于返回视频文件的路径capturedFile 。
errorCB：调用摄像头操作失败的回调函数。
option ：摄像的拓展参数 filename:拍照文件保存的路径、format:拍照的文件格式、index拍照默认使用的摄像头、popover拍照或摄像界面弹出指示区域（top,left….）;
③Camera.stopVideoCapture(); 结束摄像动作
代码测试：
if(window.plus) {
plusReady();
document.addEventListener("plusready", plusReady, false);
function plusReady() {
var camera = plus.camera.getCamera( 1 );
var supportedImageResolutions = camera.supportedImageR
var supportedVideoResolutions = camera.supportedVideoR
var supportedImageFormats = camera.supportedImageF
var supportedVideoFormats = camera.supportedVideoF
console.log("supportedImageResolutions:" + supportedImageResolutions);
console.log("supportedVideoResolutions:" + supportedVideoResolutions);
console.log("supportedImageFormats:" + supportedImageFormats);
console.log("supportedVideoFormats:" + supportedVideoFormats);
打印结果：
supportedImageResolutions:
4160*3120,4000*3000,4160*2340,3840*2160.....
supportedVideoResolutions:
4096*2160,3840*2160,1920*1080.....
supportedImageFormats:
supportedVideoFormats:
var camera = plus.camera.getCamera( 1 );
camera.captureImage(function(capturedFile){
console.log("capturedFile:"+capturedFile);
}, function(e){
console.log("拍照错误："+e.message);
top:'0px',
left:'0px'
打印结果：capturedFile:
_doc/6.jpg
var camera = plus.camera.getCamera( 1 );
camera.startVideoCapture(function(capturedFile){
console.log("capturedFile:"+capturedFile);
}, function(e){
console.log("摄像错误："+e.message);
top:'0px',
left:'0px'
打印结果： capturedFile: _doc/3.mp4
本文已收录于以下专栏：
相关文章推荐
html5概念啥的就不废话了，不知道的
百度， 谷歌一堆。。今天学了学html5中的Canvas结合新增的标签来获取本地摄像头，在html5之前，要在浏览器获取本地摄像头只有通过插件（Active...
HTML5实现摄像头调用并拍照，兼容各大浏览器，需要的来拿
（为便于阅读，对原文进行了不失原意的适当修改，包括代码中一些错误的重复，并作了注释）
　　HTML5技术支持WebApp在手机上拍照，显示在页面上并上传到服务器。这是手机微博应用中常见的功能，当然你也...
主要介绍了采用HTML5plus（HTML5+）的方式调用手机摄像头并拍照，将具体的代码和一些注意事项进行了讲解，并对不同的开发环境使用简单进行了介绍。
public class ControlFragment extends BaseFragment {
    private static ProgressWebView webV
  ...
最近用MUI做了个移动端项目，设计中涉及到调用手机摄像头拍照等功能需求，然而在PLUS环境下才能直接调用，这就让人有点头疼了，后经查询资料学习了解到有一个很简单的方法就是input:file标签，不需...
## 在webapp上使用input:file, 指定capture属性调用默认相机，摄像，录音功能
在iOS6下开发webapp，使用inputz之file，很有用
在切图网一个客户的webapp项目中需要用到 html5调用手机摄像头，找了很多资料，大都是 js调用api  然后怎样怎样，做了几个demo测试发现根本不行， 后来恍然大悟，用html5自带的 in...
html5概念啥的就不废话了，不知道的
百度， 谷歌一堆。。今天学了学html5中的Canvas结合新增的标签来获取本地摄像头，在html5之前，要在浏览器获取本地摄像头只有通过插件（Active...
虽然看了也没完全明白，对视频的一些操作不了解，还有对于底层的一些调用方法不熟悉，这里先保存下了。
视频捕获设置
CAPTUREPARMS 数据结构包括了视频流的控制参数。它允许完...
他的最新文章
讲师：姜飞俊
讲师：汪木铃
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)20698人阅读
------【Web APP】（1）
前端时间使用HTML5做了一个WEB端APP，其中用到了H5页面调用手机摄像头的功能，当时也是花了不少时间去研究。最终是采用了HTML5plus（HTML5+）的方式完成了该功能，现将具体方法简单介绍下，并讲解下使用的注意事项。
具体流程：点击触发选择拍照或相册--&拍照或相册选择照片--&拿到图片路径进行压缩--&读取文件并显示在页面上
首先是html代码，很简单，就是给一个添加按钮，点击触发事件，这里我就不把css文件放出来，大家知道是一个添加按钮就行。&h2 class=&title-detail&&
&input type=&hidden& id=&picIndex& value=&0&&
&div id='image-list' class=&row image-list&&
&!-- &input id=&upload_image& type=&file& name=&image& accept=&image/*& /& --&
&div class=&image-item space& onclick=&showActionSheet()&&
&div class=&image-up&&&/div&
后面我们来看下具体的js代码，按照上面我们说的方法共分为5个方法，具体如下：//图片显示
function showPics(url,name){
//根据路径读取到文件
plus.io.resolveLocalFileSystemURL(url,function(entry){
entry.file( function(file){
var fileReader = new plus.io.FileReader();
fileReader.readAsDataURL(file);
fileReader.onloadend = function(e) {
var picUrl = e.target.result.toString();
var picIndex = $(&#picIndex&).val();
var nowIndex = parseInt(picIndex)+1;
$(&#picIndex&).val(nowIndex);
var html = '';
html += '&div class=&image-item & id=&item'+nowIndex+'&&';
html += '&div class=&image-close& onclick=&delPic('+nowIndex+')&&X&/div&';
html += '&div&&img src=&'+picUrl+'& class=&upload_img& style=&width:100%;height:100%;&/&&/div&';
html += '&/div&';
html += $(&#image-list&).html();
$(&#image-list&).html(html);
//压缩图片
function compressImage(url,filename){
var name=&_doc/upload/&+
pressImage({
src:url,//src: (String 类型 )压缩转换原始图片的路径
dst:name,//压缩转换目标图片的路径
quality:40,//quality: (Number 类型 )压缩图片的质量.取值范围为1-100
overwrite:true//overwrite: (Boolean 类型 )覆盖生成新文件
function(zip) {
//页面显示图片
showPics(zip.target,name);
},function(error) {
plus.nativeUI.toast(&压缩图片失败，请稍候再试&);
//调用手机摄像头并拍照
function getImage() {
var cmr = plus.camera.getCamera();
cmr.captureImage(function(p) {
plus.io.resolveLocalFileSystemURL(p, function(entry) {
compressImage(entry.toLocalURL(),entry.name);
}, function(e) {
plus.nativeUI.toast(&读取拍照文件错误：& + e.message);
}, function(e) {
filter: 'image'
//从相册选择照片
function galleryImgs() {
plus.gallery.pick(function(e) {
var name = e.substr(e.lastIndexOf('/') + 1);
compressImage(e,name);
}, function(e) {
filter: &image&
//点击事件，弹出选择摄像头和相册的选项
function showActionSheet() {
var bts = [{
title: &拍照&
title: &从相册选择&
plus.nativeUI.actionSheet({
cancel: &取消&,
buttons: bts
function(e) {
if (e.index == 1) {
getImage();
} else if (e.index == 2) {
galleryImgs();
有几点进行说明下：(1)：压缩图片方法，这里我采用的是重新写一个新文件 &(2)：图片显示方法，该方法很重要。因为我这边坐的是WEB端APP，页面都由服务器返回，我们可以拿到的是手机本地的图片，网上很多说法是直接拿文件路径就显示了，但是我却怎么都没显示出来。所以才用了FileReader将本地文件读取过来，e.target.result.toString();这个方法返回的就是我们的图片的base64编码，所以你看到下面我是动态拼HTML页面，直接将该内容赋值给img标签的src就可以直接显示图片。【这里曾经纠结很久】有了这个base64编码的url，我们就可以直接上传到后台。
使用注意：
这里主要讲打包工具不同需要做的工作也不太一样。我这边是用的Hbuilder在线打包，当然外壳也可以是Android环境打包，下面具体讲下要注意的地方。
Hbuilder：这个是一个很方便的web开发工具，可以在线打包APP。【由于网络问题，我上传不了图片，尽量文字描述】我们需要在Hbuilder里面建一个APP项目，点开manifest.json文件，这个文件就是我们APP的配置信息，下面导航栏分别为：应用信息、图标配置、启动Flash配置、SDK配置、权限模块配置等。一般我们需要配下应用信息（APP的名字、入口），图标，启动flash(可以选择启动图片)，SDK配置一般是一些地图、支付、推送等。重点来了，我们如果使用HTML5+，需要在模块权限配置里面，选择我们用到的功能，比如我们用到了plus.nativeUI.*，就需要选择NativeUI(原生UI)模块，也就是说，我们用了plus.xx.*，就需要勾选相应的模块。【这个manifest.json是可视化界面，大家下载安装就能明白】Android环境：相对Hbuilder，Android环境稍微复杂一点，由于我没有在Android环境里搞过这个，这里只是介绍下Hbuilder官网的一些使用说明。
举例说明：例如我们需要使用Camera对象，需要做如下配置：
2.1：添加camera.jar。
2.2：AndroidManifest.xml permission节点中添加：
&uses-permission android:name=&android.permission.CAMERA&/&
&&&&&&&&&& &uses-feature android:name=&android.hardware.camera&/&
2.3：properties.xml features节点中添加：
&&&&&&&&&& &featurename=&Camera& value=&io.dcloud.js.camera.CameraFeatureImpl&/&
这个配置方式在Hbuilder的官网上可以下载，里面包含所有的jar包和不同的权限所需的配置。
由于不能上传图片，很多东西描述的也不是很清晰，如果大家有问题，欢迎交流。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：58697次
排名：千里之外
原创：41篇
评论：11条
阅读：2837
(1)(6)(3)(2)(3)(4)(2)(3)(12)(6)(2)(4)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'39524人阅读
html5（10）
php编程（4）
移动终端web（8）
闲话不说，直接上代码，本人测试通过！
&!DOCTYPE html&
&html&&head&
&title&HTML5 code Reader&/title&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312&&
&style type=&text/css&&
html, body { height: 100%; width: 100%; text-align: }
&script src=&jquery-1.9.1.js&&&/script&
//这段代 主要是获取摄像头的视频流并显示在Video 签中
var canvas=null,context=null,video=
window.addEventListener(&DOMContentLoaded&, function ()
canvas = document.getElementById(&canvas&);
context = canvas.getContext(&2d&);
video = document.getElementById(&video&);
var videoObj = { &video&: true,audio:false},
flag=true,
MediaErr = function (error)
if (error.PERMISSION_DENIED)
alert('用户拒绝了浏览器请求媒体的权限', '提示');
} else if (error.NOT_SUPPORTED_ERROR) {
alert('对不起，您的浏览器不支持拍照功能，请使用其他浏览器', '提示');
} else if (error.MANDATORY_UNSATISFIED_ERROR) {
alert('指定的媒体类型未接收到媒体流', '提示');
alert('系统未能获取到摄像头，请确保摄像头已正确安装。或尝试刷新页面，重试', '提示');
//获取媒体的兼容代码，目前只支持（Firefox,Chrome,Opera）
if (navigator.getUserMedia)
//qq浏览器不支持
if (navigator.userAgent.indexOf('MQQBrowser') & -1) {
alert('对不起，您的浏览器不支持拍照功能，请使用其他浏览器', '提示');
navigator.getUserMedia(videoObj, function (stream) {
video.src =
video.play();
}, MediaErr);
else if(navigator.webkitGetUserMedia)
navigator.webkitGetUserMedia(videoObj, function (stream)
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, MediaErr);
else if (navigator.mozGetUserMedia)
navigator.mozGetUserMedia(videoObj, function (stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
}, MediaErr);
else if (navigator.msGetUserMedia)
navigator.msGetUserMedia(videoObj, function (stream) {
$(document).scrollTop($(window).height());
video.src = window.URL.createObjectURL(stream);
video.play();
}, MediaErr);
alert('对不起，您的浏览器不支持拍照功能，请使用其他浏览器');
alert('为了获得更准确的测试结果，请尽量将二维码置于框中，然后进行拍摄、扫描。 请确保浏览器有权限使用摄像功能');
//这个是拍照按钮的事件，
$(&#snap&).click(function () {startPat();}).show();
}catch(e){
printHtml(&浏览器不支持HTML5 CANVAS&);
}, false);
//打印内容到页面
function printHtml(content){
$(window.document.body).append(content+&&br/&&);
//开始拍照
function startPat(){
setTimeout(function(){//防止调用过快
if(context)
context.drawImage(video, 0, 0, 320, 320);
CatchCode();
//抓屏获取图像流，并上传到服务器
function CatchCode() {
if(canvas!=null)
//以下开始编 数据
var imgData = canvas.toDataURL();
//将图像转换为base64数据
var base64Data = imgD//.substr(22); //在前端截取22位之后的字符串作为图像数据
//开始异步上
$.post(&saveimg.php&, { &img&: base64Data },function (result)
printHtml(&解析结果：&+result.data);
if (result.status == &success& && result.data!=&&)
printHtml(&解析结果成功！&);
startPat();//如果没有解析出来则重新抓拍解析
},&json&);
&div id=&support&&&/div&
&div id=&contentHolder&&
&video id=&video& width=&320& height=&320& autoplay&
&canvas style=&display: background-color:#F00;& id=&canvas& width=&320& height=&320&&
&/canvas& &br/&
&button id=&snap& style=&display: height:50 width:120&&开始扫描&/button&
&/body&&/html&
php(saveimg)
include_once(&utils.php&);
$base64_image_content=$_POST['img'];
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result))
$type = $result[2];
$new_file = &./2.{$type}&;
if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))){
$code=utils::deCodeBitMap(&2.png&,&192.168.46.123&,20147);
echo '{&status&:&success&,&data&:&'.trim($code).'&}';
echo '{&status&:&write error&,&data&:&NO&}';
echo '{&status&:&preg error&,&data&:&NO&}';
php(utils)
* @access static
$imagepath String 图片的完整路径
String 主机如：127.0.0.1
String 端口号如：20147
* @return string 解析出的URL
static function deCodeBitMap($imagepath,$host,$port){
$socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP) or die($imagepath.& Could not connet server create\n&); // 创建一个Socket
if(!$socket){
return &&;
$connection = socket_connect($socket, $host, $port) or die($imagepath.& Could not connet server connection\n&);
if(!$connection){
return &&;
socket_write($socket, $imagepath) or die(&Write failed\n&); // 数据传送 向服务器发送消息
$buff = socket_read($socket, 1024, PHP_NORMAL_READ);
}java扩展使用说明
该解析过程需要java环境支持，jar包启动后在本机的20147端口接受socket监听，因此网络编程语言都可以调用。
1 命令行启动jar包
java -jar xxxxx.jar
启动成功应该能看到20147端口的应用
2服务socket调用
暂提供php调用代码
最终效果：
程序已打包：在我的资源里面，可自行下载！
浏览器支持情况
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：65703次
排名：千里之外
原创：17篇
转载：23篇
评论：22条
(1)(1)(10)(1)(1)(2)(2)(3)(10)(6)(5)(1)
(window.slotbydup = window.slotbydup || []).push({
id: '4740881',
container: s,
size: '200,200',
display: 'inlay-fix'