码迷，mamicode.com
首页 > Web开发 > 详细

html5中拍照camera

时间：2016-11-08 23:32:46      阅读：475      评论：0      收藏：0      [点我收藏+]

标签：callback   one   json对象   ror   llb   路径   failed   array   opp   

方法：

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中拍照camera

标签：callback   one   json对象   ror   llb   路径   failed   array   opp   

原文地址：http://blog.csdn.net/xiejunna/article/details/53086261
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！