html5+ camera_image-摄像头拍照

最新推荐文章于 2023-02-10 09:03:12 发布

weixin_41961749

最新推荐文章于 2023-02-10 09:03:12 发布

阅读量3k

点赞数

分类专栏： html5+

本文链接：https://blog.csdn.net/weixin_41961749/article/details/82969923

版权

html5+ 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

camera 摄像头拍照/摄像

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

方法：

getCamera: 获取摄像头管理对象

对象：

Camera: 摄像头对象
CameraOption: JSON对象，调用摄像头的参数
PopPosition: JSON对象，弹出拍照或摄像界面指示位置

回调方法：

CameraSuccessCallback: 调用摄像头操作成功回调
CameraErrorCallback: 摄像头操作失败回调

权限：

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

属性：

supportedImageResolutions: 字符串数组，摄像头支持的拍照分辨率
supportedVideoResolutions: 字符串数组，摄像头支持的摄像分辨率
supportedImageFormats: 字符串数组，摄像头支持的拍照文件格式
supportedVideoFormats: 字符串数组，摄像头支持的摄像文件格式

方法：

captureImage: 进行拍照操作
startVideoCapture: 调用摄像头进行摄像操作
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>

weixin_41961749

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5+ camera_image-摄像头拍照

camera 摄像头拍照/摄像Camera模块管理设备的摄像头，可用于拍照、摄像操作，通过plus.camera获取摄像头管理对象。方法：getCamera: 获取摄像头管理对象对象：Camera: 摄像头对象CameraOption: JSON对象，调用摄像头的参数PopPosition: JSON对象，弹出拍照或摄像界面指示位置回调方法：CameraSuccessC...
复制链接

扫一扫