Camera模块管理设备的摄像头,可用于拍照、摄像操作,通过plus.camera获取摄像头管理对象。
5+功能模块(permissions)
{
// ...
"permissions":{
// ...
"Camera": {
"description": "摄像头"
}
}
}
摄像头对象
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();
}
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表示辅摄像头。
popover: _(PopPosition 类型 )_拍照或摄像界面弹出指示区域
对于大屏幕设备如iPad,拍照或摄像界面为弹出窗口,此时可通过此参数设置弹出窗口位置,其为JSON对象,格式如{top:“10px”,left:“10px”,width:“200px”,height:“200px”},默认弹出位置为屏幕居中。
JSON对象,弹出拍照或摄像界面指示位置
top: _(String 类型 )_指示区域距离容器顶部的距离
弹出拍照或摄像窗口指示区域距离容器顶部的距离,支持像素值(如"100px")和百分比(如"50%")。
left: _(String 类型 )_指示区域距离容器左侧的距离
弹出拍照或摄像窗口指示区域距离容器左侧的距离,支持像素值(如"100px")和百分比(如"50%")。
width: _(String 类型 )_指示区域的宽度
弹出拍照或摄像窗口指示区域的宽度,支持像素值(如"100px")和百分比(如"50%")。
height: _(String 类型 )_指示区域的高度
弹出拍照或摄像窗口指示区域的高度,支持像素值(如"100px")和百分比(如"50%")。
调用摄像头操作成功回调
void onSuccess( capturedFile ) {
// Caputre image/video file code.
}
调用摄像头操作成功的回调函数,在拍照或摄像操作成功时调用,用于返回图片或视频文件的路径。
void : 无
摄像头操作失败回调
void onError( error ) {
// Handle camera error
var code = error.code; // 错误编码
var message = error.message; // 错误描述信息
}
void : 无
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0, user-scalable=yes" />
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<title>Hello H5+</title>
<script type="text/javascript">
var w = null;
// H5 plus事件处理
function plusReady() {}
if (window.plus) {
plusReady();
} else {
document.addEventListener('plusready', plusReady, false);
}
function imgLoaded() {
w && (w.close(), w = null);
var b = document.body;
var img = document.getElementById('img');
var pb = b.clientHeight / b.clientWidth,
pi = img.clientHeight / img.clientWidth;
if (pb > pi) {
img.style.width = '100%';
} else {
img.style.height = '100%';
}
b.style.lineHeight = b.clientHeight + 'px';
}
function imgError() {
w && (w.close(), w = null);
document.getElementById('img').style.display = 'none';
plus.nativeUI.alert('无效的图片资源', function () {
back();
});
}
function loadMedia(src) {
document.getElementById('img').src = src;
}
</script>
</head>
<body style="text-align:center;background:#000000;">
<img id="img" onclick="back()" onload="imgLoaded()" onerror="imgError()" />
</body>
</html>