html5+ camera_image-摄像头拍照

锺离伟彦
2023-12-01

camera 摄像头拍照/摄像

Camera模块管理设备的摄像头,可用于拍照、摄像操作,通过plus.camera获取摄像头管理对象。

方法:

对象:

回调方法:

权限:

5+功能模块(permissions)

{
// ...
"permissions":{
	// ...
	"Camera": {
		"description": "摄像头"
	}
}
}

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();
}

属性:

方法:

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表示辅摄像头。

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

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

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 : 无

CameraErrorCallback

摄像头操作失败回调

void onError( error ) {
	// Handle camera error
	var code = error.code; // 错误编码
	var message = error.message; // 错误描述信息
}

参数:

  • error: ( Exception ) 必选 摄像头操作的错误信息
    可通过error.code(Number类型)获取错误编码; 可通过error.message(String类型)获取错误描述信息。

返回值:

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>

 类似资料: