html5中调用摄像头拍照,html5中调用摄像头拍照的方法

摘要：

“Camera”｝｝getCamera获取相机管理对象Cameraplus。相机getCamera（索引）；varr=空；照相机照相机对象接口照相机｛readonlyattributeString[]支持ImageResolutions；｝属性&lt:/title&gt；&书信电报；

方法：

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","200px",height:"200px"}，默认弹出位置为屏幕居中。
平台支持
    Android - ALL (不支持): 暂不支持设置摄像头。忽略此属性值
    iOS - 5.0+ (支持): 仅iPad设备支持此属性，iPhone/iTouch上忽略此属性值

PopPosition

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

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

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

弹出拍照或摄像窗体指示区域距离容器左側的距离，支持像素值（如"100px"）和百分比（如"50%"）。
 (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中调用摄像头拍照

相关文章

VTK 图形基本操作进阶_点云配准技术（迭代最近点ICP算法）

5、用python写一个自己的网页

stm32——NFC芯片--PN532的使用

iframe: 我们来谈一谈

用友GRP-u8 XXE 漏洞复现

git add --all 为啥不能添加空文件夹，这样设计的初衷是

最新文章

随机推荐

思享工具箱导航

JSON工具

格式化转换

加解密编码

文本数字

网络

站长

计算

其他

对照列表