您的位置:首页 > Web前端 > HTML5

HTML5+规范:Camera(管理设备的摄像头)

2016-07-02 17:37 477 查看
Camera模块管理设备的摄像头,可用于拍照、摄像操作,通过plus.camera获取摄像头管理对象。

1、方法

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>


2、对象

2.1、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();

}

(1)、属性:

1)、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>


2)、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>


3)、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>


4)、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>


(2)、方法:

1)、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>


2)、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>


3)、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>


2.2、CameraOption: JSON对象,调用摄像头的参数

interface CameraOption {

attribute String filename;

attribute String format;

attribute String index;

attribute PopPosition popover;

}

属性:

(1)、filename: (String 类型 )拍照或摄像文件保存的路径,可设置具体文件名(如”_doc/camera/a.jpg”);也可只设置路径,以”/”结尾则表明是路径(如”_doc/camera/”)。如未设置文件名称或设置的文件名冲突则文件名由程序程序自动生成。

(2)、format: (String 类型 )拍照或摄像的文件格式、可通过Camera对象的supportedImageFormats或supportedVideoFormats获取,如果设置的参数无效则使用系统默认值。

(3)、index: (String 类型 )拍照或摄像默认使用的摄像头,拍照或摄像界面默认使用的摄像头编号,1表示主摄像头,2表示辅摄像头。

平台支持:Android - 2.2+ (不支持): 暂不支持设置摄像头,忽略此属性值,iOS - 4.3+ (支持)

(4)、popover: (PopPosition 类型 )拍照或摄像界面弹出指示区域对于大屏幕设备如iPad,拍照或摄像界面为弹出窗口,此时可通过此参数设置弹出窗口位置,其为JSON对象,格式如{top:”10px”,left:”10px”,width:”200px”,height:”200px”},默认弹出位置为屏幕居中。

平台支持:Android - ALL (不支持): 暂不支持设置摄像头,忽略此属性值,iOS - 5.0+ (支持): 仅iPad设备支持此属性,iPhone/iTouch上忽略此属性值

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

属性:

(1)、top: (String 类型 )指示区域距离容器顶部的距离,弹出拍照或摄像窗口指示区域距离容器顶部的距离,支持像素值(如”100px”)和百分比(如”50%”)。

(2)、left: (String 类型 )指示区域距离容器左侧的距离,弹出拍照或摄像窗口指示区域距离容器左侧的距离,支持像素值(如”100px”)和百分比(如”50%”)。

(3)、width: (String 类型 )指示区域的宽度,弹出拍照或摄像窗口指示区域的宽度,支持像素值(如”100px”)和百分比(如”50%”)。

(4)、height: (String 类型 )指示区域的高度,弹出拍照或摄像窗口指示区域的高度,支持像素值(如”100px”)和百分比(如”50%”)。

3、回调方法

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

void onSuccess( capturedFile ) {

// Caputre image/video file code.

}

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

参数:

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

返回值:void : 无

平台支持:Android - 2.2+ (支持)、iOS - 4.3+ (支持)

3.2、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+ (支持)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: