html5中调用摄像头拍照

方法：

getCamera: 获取摄像头管理对象

对象：

Camera: 摄像头对象

CameraOption: JSON对象。调用摄像头的參数

PopPosition: JSON对象，弹出拍照或摄像界面指示位置

回调方法：

CameraSuccessCallback: 调用摄像头操作成功回调

CameraErrorCallback: 摄像头操作失败回调

权限：

功能模块（permissions）

{

// ...

"permissions":{

    // ...

    "Camera": {

        "description": "摄像头"

    }

}

}

getCamera

获取摄像头管理对象

Camera plus.camera.getCamera( index );

说明：

获取须要操作的摄像头对象。假设要进行拍照或摄像操作，需先通过此方法获取摄像头对象。

參数：

index: ( Number ) 可选要获取摄像头的索引值

指定要获取摄像头的索引值。1表示主摄像头。2表示辅摄像头。

假设没有设置则使用系统默认主摄像头。

返回值：

Camera : 摄像头对象

平台支持：

Android - 2.2+ (支持)

iOS - 4.3+ (支持)

演示样例：

<!DOCTYPE html>

<html>

    <head>

    <meta charset="utf-8">

    <title>Camera Example</title>

    <script type="text/javascript">

// 扩展API载入完成后调用onPlusReady回调函数

document.addEventListener( "plusready", onPlusReady, false );

var r = null;

// 扩展API载入完成，如今能够正常调用扩展API

function onPlusReady() {

    // 获取设备默认的摄像头对象

    var cmr = plus.camera.getCamera();

    // ......

}

    </script>

    </head>

    <body>

    </body>

</html>

Camera

摄像头对象

interface Camera {

    readonly attribute String[] supportedImageResolutions;

    readonly attribute String[] supportedVideoResolutions;

    readonly attribute String[] supportedImageFormats;

    readonly attribute String[] supportedVideoFormats;

    function void captureImage( successCB, errorCB, option );

    function void startVideoCapture( successCB, errorCB, option );

    function void stopVideoCapture();

}

属性：

 supportedImageResolutions: 字符串数组，摄像头支持的拍照分辨率

    supportedVideoResolutions: 字符串数组，摄像头支持的摄像分辨率

    supportedImageFormats: 字符串数组，摄像头支持的拍照文件格式

    supportedVideoFormats: 字符串数组。摄像头支持的摄像文件格式

方法：

  captureImage: 进行拍照操作

    startVideoCapture: 调用摄像头进行摄像操作

    stopVideoCapture: 结束摄像操作

supportedImageResolutions

字符串数组，摄像头支持的拍照分辨率

说明：

Array 类型仅仅读属性

属性类型为String[]，若不支持此属性则返回空数组对象。摄像头支持的拍照图片分辨率字符串形式“WIDTH*Height”，如“400*800”；假设支持随意自己定义分辨率则“*”。

平台支持：

Android (支持)

iOS (不支持): 返回空数组对象

演示样例：

<!DOCTYPE html>

<html>

    <head>

    <meta charset="utf-8">

    <title>Camera Example</title>

    <script type="text/javascript">

// 扩展API载入完成后调用onPlusReady回调函数

document.addEventListener( "plusready", onPlusReady, false );

// 扩展API载入完成，如今能够正常调用扩展API

function onPlusReady() {

    var cmr = plus.camera.getCamera();

    alert( "Camera supperted image resolutions: " + cmr.supportedImageResolutions );

}

    </script>

    </head>

    <body>

    </body>

</html>

supportedVideoResolutions

字符串数组，摄像头支持的摄像分辨率

说明：

Array 类型仅仅读属性

属性类型为String[]，若不支持此属性则返回空数组对象。

摄像头支持的视频分辨率字符串形式为“WIDTH*Height”，如“400*800”；假设支持随意自己定义分辨率则“*”。

平台支持：

Android (支持)

iOS (不支持): 返回空数组对象

演示样例：

<!DOCTYPE html>

<html>

    <head>

    <meta charset="utf-8">

    <title>Camera Example</title>

    <script type="text/javascript">

// 扩展API载入完成后调用onPlusReady回调函数

document.addEventListener( "plusready", onPlusReady, false );

// 扩展API载入完成，如今能够正常调用扩展API

function onPlusReady() {

    var cmr = plus.camera.getCamera();

    alert( "Camera supperted image resolutions: " + cmr.supportedImageResolutions );

}

    </script>

    </head>

    <body>

    </body>

</html>

supportedImageFormats

字符串数组，摄像头支持的拍照文件格式

说明：

Array 类型仅仅读属性

属性类型为String[]，若不支持此属性则返回空数组对象。

摄像头支持的图片文件格式字符串形式为文件格式后缀名，如“jpg”、“png”、“bmp”。

平台支持：

Android (支持)

iOS (不支持): 返回空数组对象

演示样例：

<!DOCTYPE html>

<html>

    <head>

    <meta charset="utf-8">

    <title>Camera Example</title>

    <script type="text/javascript">

// 扩展API载入完成后调用onPlusReady回调函数

document.addEventListener( "plusready", onPlusReady, false );

// 扩展API载入完成。如今能够正常调用扩展API

function onPlusReady() {

    var cmr = plus.camera.getCamera();

    alert( "Camera supperted image formats: " + cmr.supportedImageFormats );

}

    </script>

    </head>

    <body>

    </body>

</html>

supportedVideoFormats

字符串数组。摄像头支持的摄像文件格式

说明：

Array 类型仅仅读属性

属性类型为String[]，若不支持此属性则返回空数组对象。摄像头支持的视频文件格式字符串形式为文件格式后缀名，如“3gp”、“mp4”、“avi”。

平台支持：

Android (支持)

iOS (不支持): 返回空数组对象

演示样例：

<!DOCTYPE html>

<html>

    <head>

    <meta charset="utf-8">

    <title>Camera Example</title>

    <script type="text/javascript">

// 扩展API载入完成后调用onPlusReady回调函数

document.addEventListener( "plusready", onPlusReady, false );

// 扩展API载入完成。如今能够正常调用扩展API

function onPlusReady() {

    var cmr = plus.camera.getCamera();

    alert( "Camera supperted video formats: " + cmr.supportedVideoFormats );

}

    </script>

    </head>

    <body>

    </body>

</html>

captureImage

进行拍照操作

cmr.captureImage( successCB, errorCB, option );

说明：

摄像头资源为独占资源。假设其他程序或页面已经占用摄像头。再次操作则失败。拍照操作成功将通过successCB返回拍照获取的图片路径。

可通过option设置摄像头的各种属性參数。

參数：

 successCB: ( CameraSuccessCallback ) 必选 拍照操作成功的回调函数

    errorCB: ( CameraErrorCallback ) 可选 拍照操作失败的回调函数

    option: ( CameraOption ) 必选 摄像头拍照參数

返回值：

void : 无

平台支持：

Android - 2.2+ (支持)

iOS - 4.3+ (支持)

演示样例：

<!DOCTYPE html>

<html>

    <head>

    <meta charset="utf-8">

    <title>Camera Example</title>

    <script type="text/javascript">

// 扩展API载入完成后调用onPlusReady回调函数

document.addEventListener( "plusready", onPlusReady, false );

// 扩展API载入完成，如今能够正常调用扩展API

function onPlusReady() {

    console.log("plusready");

}

// 拍照

function captureImage(){

    var cmr = plus.camera.getCamera();

    var res = cmr.supportedImageResolutions[0];

    var fmt = cmr.supportedImageFormats[0];

    console.log("Resolution: "+res+", Format: "+fmt);

    cmr.captureImage( function( path ){

            alert( "Capture image success: " + path );

        },

        function( error ) {

            alert( "Capture image failed: " + error.message );

        },

        {resolution:res,format:fmt}

    );

}

    </script>

    </head>

    <body>

        <button onclick="captureImage()">拍照</button>

    </body>

</html>

startVideoCapture

调用摄像头进行摄像操作

cmr.startVideoCapture( successCB, errorCB, option );

说明：

摄像头资源为独占资源，假设其他程序或页面已经占用摄像头。再次操作则失败。拍照操作成功将通过successCB返回摄像获取的视频文件路径。

可通过option设置摄像头的各种属性參数。

參数：

  successCB: ( CameraSuccessCallback ) 必选 摄像操作成功的回调函数

    errorCB: ( CameraErrorCallback ) 可选 拍摄像操作失败的回调函数

    option: ( CameraOption ) 必选 摄像头拍照參数

返回值：

void : 无

平台支持：

Android - 2.2+ (支持)

iOS - 4.3+ (支持)

演示样例：

<!DOCTYPE html>

<html>

    <head>

    <meta charset="utf-8">

    <title>Camera Example</title>

    <script type="text/javascript">

// 扩展API载入完成后调用onPlusReady回调函数

document.addEventListener( "plusready", onPlusReady, false );

// 扩展API载入完成。如今能够正常调用扩展API

function onPlusReady() {

    console.log("plusready");

}

// 摄像

function videoCapture(){

    var cmr = plus.camera.getCamera();

    var res = cmr.supportedVideoResolutions[0];

    var fmt = cmr.supportedVideoFormats[0];

    console.log("Resolution: "+res+", Format: "+fmt);

    cmr.startVideoCapture( function( path ){

            alert( "Capture video success: " + path );

        },

        function( error ) {

            alert( "Capture video failed: " + error.message );

        },

        {resolution:res,format:fmt}

    );

}

    </script>

    </head>

    <body>

        <button onclick="videoCapture()">摄像</button>

    </body>

</html>

stopVideoCapture

结束摄像操作

cmr.stopVideoCapture();

说明：

開始调用摄像头进行摄像操作后，可在后台结束摄像操作，与用户在界面结束操作效果一致。摄像操作成功将通过startVideoCapture函数中的successCB返回拍照获取的图片路径。

用户假设没有进行摄像操作关闭摄像头页面则调用失败回调函数。

參数：

返回值：

void : 无

平台支持：

Android - ALL (不支持): 暂不支持调用此API停止摄像。须要手动操作停止。

iOS - ALL (不支持): 暂不支持调用此API停止摄像。须要手动操作停止。

演示样例：

<!DOCTYPE html>

<html>

    <head>

    <meta charset="utf-8">

    <title>Camera Example</title>

    <script type="text/javascript">

// 扩展API载入完成后调用onPlusReady回调函数

document.addEventListener( "plusready", onPlusReady, false );

// 扩展API载入完成。如今能够正常调用扩展API

function onPlusReady() {

    console.log("plusready");

}

var cmr=null;

// 摄像

function videoCapture(){

    cmr = plus.camera.getCamera();

    var res = cmr.supportedVideoResolutions[0];

    var fmt = cmr.supportedVideoFormats[0];

    console.log("Resolution: "+res+", Format: "+fmt);

    cmr.startVideoCapture( function( path ){

            alert( "Capture video success: " + path );

        },

        function( error ) {

            alert( "Capture video failed: " + error.message );

        },

        {resolution:res,format:fmt}

    );

    // 拍摄10s后自己主动完成

    setTimeout( stopCapture, 10000 );

}

// 停止摄像

function stopCapture(){

    console.log("stopCapture");

    cmr.stopVideoCapture();

}

    </script>

    </head>

    <body>

        <button onclick="videoCapture()">摄像</button><br/>

        <button onclick="stopCapture()">停止摄像</button>

    </body>

</html>

CameraOption

JSON对象。调用摄像头的參数

interface CameraOption {

    attribute String filename;

    attribute String format;

    attribute String index;

    attribute PopPosition popover;

}

属性：

filename: (String 类型 )拍照或摄像文件保存的路径

可设置详细文件名称（如"_doc/camera/a.jpg"）；也可仅仅设置路径，以"/"结尾则表明是路径（如"_doc/camera/"）。如未设置文件名称称或设置的文件名称冲突则文件名称由程序程序自己主动生成。

format: (String 类型 )拍照或摄像的文件格式

可通过Camera对象的supportedImageFormats或supportedVideoFormats获取，假设设置的參数无效则使用系统默认值。

index: (String 类型 )拍照或摄像默认使用的摄像头

拍照或摄像界面默认使用的摄像头编号。1表示主摄像头，2表示辅摄像头。

平台支持

    Android - 2.2+ (不支持): 暂不支持设置摄像头，忽略此属性值

    iOS - 4.3+ (支持)

popover: (PopPosition 类型 )拍照或摄像界面弹出指示区域

对于大屏幕设备如iPad，拍照或摄像界面为弹出窗体，此时可通过此參数设置弹出窗体位置，其为JSON对象，格式如{top:"10px",left:"10px",width:"200px",height:"200px"}，默认弹出位置为屏幕居中。

平台支持

    Android - ALL (不支持): 暂不支持设置摄像头。忽略此属性值

    iOS - 5.0+ (支持): 仅iPad设备支持此属性，iPhone/iTouch上忽略此属性值

PopPosition

JSON对象，弹出拍照或摄像界面指示位置

属性：

top: (String 类型 )指示区域距离容器顶部的距离

弹出拍照或摄像窗体指示区域距离容器顶部的距离，支持像素值（如"100px"）和百分比（如"50%"）。

left: (String 类型 )指示区域距离容器左側的距离

弹出拍照或摄像窗体指示区域距离容器左側的距离，支持像素值（如"100px"）和百分比（如"50%"）。

width: (String 类型 )指示区域的宽度

弹出拍照或摄像窗体指示区域的宽度，支持像素值（如"100px"）和百分比（如"50%"）。

height: (String 类型 )指示区域的高度

弹出拍照或摄像窗体指示区域的高度。支持像素值（如"100px"）和百分比（如"50%"）。

CameraSuccessCallback

调用摄像头操作成功回调

void onSuccess( capturedFile ) {

    // Caputre image/video file code.

}

说明：

调用摄像头操作成功的回调函数。在拍照或摄像操作成功时调用，用于返回图片或视频文件的路径。

參数：

capturedFile: ( String ) 必选 拍照或摄像操作保存的文件路径

返回值：

void : 无

平台支持：

Android - 2.2+ (支持)

iOS - 4.3+ (支持)

CameraErrorCallback

摄像头操作失败回调

void onError( error ) {

    // Handle camera error

    var code = error.code; // 错误编码

    var message = error.message; // 错误描写叙述信息

}

參数：

error: ( Exception ) 必选 摄像头操作的错误信息

可通过error.code（Number类型）获取错误编码； 可通过error.message（String类型）获取错误描写叙述信息。

返回值：

void : 无

平台支持：

Android - 2.2+ (支持)

iOS - 4.3+ (支持)

html5中调用摄像头拍照的更多相关文章

【MediaKit】WPF项目中调用摄像头拍照的开发包
今天遇到一个人事的项目,项目中需要调用摄像头给员工照相.如何解决这个问题呢? 介绍一个开发包给你,MediaKit.论坛里头的人都说好,但是黑兔觉得大家好才是真的好.你不妨试试~ 第一步:添加WPF ...
android: 调用摄像头拍照
很多应用程序都可能会使用到调用摄像头拍照的功能,比如说程序里需要上传一张图片作为用户的头像,这时打开摄像头拍张照是最简单快捷的.下面就让我们通过一个例子来学习一下,如何才能在应用程序里调用手机的摄 ...
android ——调用摄像头拍照和相册
先在布局文件中加入两个按钮和一个图片控件 <?xml version="1.0" encoding="utf-8"?> <LinearLayo ...
C# - VS2019调用AForge库实现调用摄像头拍照功能
前言作为一名资深Delphi7程序员,想要实现摄像头扫描一维码/二维码功能,发现所有免费的第三方库都没有简便的实现办法,通用的OpenCV或者ZXing库基本上只支持XE以上的版本,而且一维码的识别 ...
Java乔晓松-android中调用系统拍照功能并显示拍照的图片
android中调用系统拍照功能并显示拍照的图片如果你是拍照完,利用onActivityResult获取data数据,把data数据转换成Bitmap数据,这样获取到的图片,是拍照的照片的缩略图代 ...
AForge调用摄像头拍照时设置分辨率
简单记录下AForge2.2.5.0版本调用摄像头拍照时设置分辨率的方法. FilterInfo info = _videoDevices[0];//获取第一个摄像头 _cameraDevice = ...
vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> &l ...
使用html5绘图技术事项调用摄像头拍照；
在mui框架中调用手机摄像头进行拍照可以直接使用原声的HTML5: 以下是HTML代码 <video id="video" width="640" hei ...
Cordova - 使用Cordova开发iOS应用实战4（调用摄像头拍照，并编辑）
使用Cordova可以很方便的通过js代码来使用设备摄像头拍照,只需把camera插件添加进来即可. 一,添加camera插件首先我们要在“终端”中进入工程所在的目录,然后运行如下命令: 1 cor ...

随机推荐

UVA 11542 Square 高斯消元异或方程组求解
题目链接:点击打开链接白书的例题练练手. . . P161 #include <cstdio> #include <iostream> #include <algori ...
webview同步cookies
目前很多android app都内置了可以显示web页面的界面,会发现这个界面一般都是由一个叫做WebView的组件渲染出来的,学习该组件可以为你的app开发提升扩展性. 先说下WebView的一些优 ...
杂项-Java：Shiro（Java安全架构）
ylbtech-杂项-Java:Shiro(Java安全架构) Apache Shiro是一个强大且易用的Java安全框架,执行身份验证.授权.密码和会话管理.使用Shiro的易于理解的API,您可以 ...
Hessian实例
简述Hessian Hessian是一个由Caucho Technology开发的轻量级RPC框架,由于它使用二进制RPC协议,所以它更快.更简单,很适合于发送二进制数据(访问官网): 在进行基于He ...
Winform WPF 窗体显示位置
WinForm 窗体显示位置窗体显示的位置首先由窗体的StartPosition决定,FormStartPosition这个枚举值由如下几种情况 // 摘要: // 窗体的位置由 System.Wi ...
使用http-server开启一个本地服务器
前言在写前端页面中,经常会在浏览器运行HTML页面,从本地文件夹中直接打开的一般都是file协议,当代码中存在http或https的链接时,HTML页面就无法正常打开,为了解决这种情况,需要在在本地 ...
[C#学习笔记之异步编程模式2]BeginInvoke和EndInvoke方法 (转载)
为什么要进行异步回调?众所周知,普通方法运行,是单线程的,如果中途有大型操作(如:读取大文件,大批量操作数据库,网络传输等),都会导致方法阻塞,表现在界面上就是,程序卡或者死掉,界面元素不动了,不响应 ...
hdu 2795 Billboard 【线段树】
给出一个高为h,宽为w的广告板,有n张广告需要贴,从第一行开始贴,尽量靠左,输出每个广告最后贴在哪一行的先一直想不通这样建树是为什么后来看到一篇题解里面的一句话“直到找到一个满足条件的叶子节点” ...
win7（32位）旗舰版共享HP1010打印机给WINXP专业版
一.状况: 两台电脑,同一网段内,电脑A是WIN7系统(32位),电脑B是WINXP系统. ①电脑A(win7)已经安装完打印机驱动,能正常打印,对该打印机HP1010共享时,提示“无法保存打印机设置 ...
RabbitMQ学习笔记（1）----RabbitMQ简介与安装
·1. 什么是RabbitMQ? RabbitMQ是流行的开源消息队列系统,用erlang语言开发.RabbitMQ是AMQP(高级消息队列协议)的标准实现. 而AMQP协议则是指:即Advanced ...

html5中调用摄像头拍照

html5中调用摄像头拍照的更多相关文章

随机推荐

热门专题