HTML5+camera

HTML5+camera

camera常见问题我要提意见

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

方法:

对象:

回调方法:

权限:

5+功能模块(permissions)


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

getCamera

获取摄像头管理对象


Camera plus.camera.getCamera( index );
				

说明:

获取需要操作的摄像头对象,如果要进行拍照或摄像操作,需先通过此方法获取摄像头对象。

参数:

  • index: ( Number ) 可选 要获取摄像头的索引值指定要获取摄像头的索引值,1表示主摄像头,2表示辅摄像头。如果没有设置则使用系统默认主摄像头。

返回值:

Camera : 摄像头对象

示例:


<!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>
				

uni-app使用plus注意事项

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

字符串数组,摄像头支持的拍照分辨率

说明:

Array 类型 只读属性

属性类型为String[],若不支持此属性则返回空数组对象。 摄像头支持的拍照图片分辨率字符串形式“WIDTH*Height”,如“400*800”;如果支持任意自定义分辨率则“*”。

示例:


<!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>
						

uni-app使用plus注意事项

supportedVideoResolutions

字符串数组,摄像头支持的摄像分辨率

说明:

Array 类型 只读属性

属性类型为String[],若不支持此属性则返回空数组对象。 摄像头支持的视频分辨率字符串形式为“WIDTH*Height”,如“400*800”;如果支持任意自定义分辨率则“*”。

示例:


<!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>
						

uni-app使用plus注意事项

supportedImageFormats

字符串数组,摄像头支持的拍照文件格式

说明:

Array 类型 只读属性

属性类型为String[],若不支持此属性则返回空数组对象。 摄像头支持的图片文件格式字符串形式为文件格式后缀名,如“jpg”、“png”、“bmp”。

示例:


<!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>
						

uni-app使用plus注意事项

supportedVideoFormats

字符串数组,摄像头支持的摄像文件格式

说明:

Array 类型 只读属性

属性类型为String[],若不支持此属性则返回空数组对象。 摄像头支持的视频文件格式字符串形式为文件格式后缀名,如“3gp”、“mp4”、“avi”。

示例:


<!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>
						

uni-app使用plus注意事项

captureImage

进行拍照操作


cmr.captureImage(successCB, errorCB, options);
						

说明:

摄像头资源为独占资源,如果其它程序或页面已经占用摄像头,再次操作则失败。 拍照操作成功将通过successCB返回拍照获取的图片路径。 可通过option设置摄像头的各种属性参数。

参数:

返回值:

void : 无

示例:


<!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>
						

uni-app使用plus注意事项

startVideoCapture

调用摄像头进行摄像操作


cmr.startVideoCapture(successCB, errorCB, option);
						

说明:

摄像头资源为独占资源,如果其它程序或页面已经占用摄像头,再次操作则失败。 拍照操作成功将通过successCB返回摄像获取的视频文件路径。 可通过option设置摄像头的各种属性参数。

参数:

返回值:

void : 无

示例:


<!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>
						

uni-app使用plus注意事项

stopVideoCapture

结束摄像操作


cmr.stopVideoCapture();
						

说明:

开始调用摄像头进行摄像操作后,可在后台结束摄像操作,与用户在界面结束操作效果一致。 摄像操作成功将通过startVideoCapture函数中的successCB返回拍照获取的图片路径。 用户如果没有进行摄像操作关闭摄像头页面则调用失败回调函数。

参数:

返回值:

void : 无

平台支持:

  • Android – ALL (不支持) : 暂不支持调用此API停止摄像,需要手动操作停止。
  • iOS – ALL (不支持) : 暂不支持调用此API停止摄像,需要手动操作停止,也可通过videoMaximumDuration属性设置视频长度。

示例:


<!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>
						

uni-app使用plus注意事项

CameraOptions

JSON对象,调用摄像头的参数


interface CameraOptions {
	attribute CameraCropStyles crop;
	attribute String filename;
	attribute String format;
	attribute String index;
	attribute Number videoMaximumDuration;
	attribute Boolean optimize;
	attribute String resolution;
	attribute PopPosition popover;
}
				

属性:

  • crop: (CameraCropStyles 类型 )配置裁剪图片 设置裁剪图片项后,在拍照后会进入裁剪编辑界面,确认后返回裁剪后的图片。
    注意:HBuilderX3.1.19及以上版本支持。
  • filename: (String 类型 )拍照或摄像文件保存的路径 可设置具体文件名(如”_doc/camera/a.jpg”);也可只设置路径,以”/”结尾则表明是路径(如”_doc/camera/”)。 如未设置文件名称或设置的文件名冲突则文件名由程序程序自动生成。
  • format: (String 类型 )拍照或摄像的文件格式 可通过Camera对象的supportedImageFormats或supportedVideoFormats获取,如果设置的参数无效则使用系统默认值。
  • index: (String 类型 )拍照或摄像默认使用的摄像头 拍照或摄像界面默认使用的摄像头编号,1表示主摄像头,2表示辅摄像头。

    平台支持

    • Android – 2.2+ (不支持) :暂不支持设置默认使用的摄像头,忽略此属性值。打开拍摄界面后可操作切换。
    • iOS – 4.3+ (支持)
  • videoMaximumDuration: (Number 类型 )视频长度 单位为秒(s),小于等于0表示不限定视频长度。 默认值为0(不限定视频长度)。 注意:仅在调用拍摄视频(startVideoCapture)时有效。

    平台支持

    • Android – ALL (不支持) : HBuilderX1.9.7及以上版本支持。 取决于ROM的拍照组件是否实现此功能,如果没实现此功能则忽略此属性。
    • iOS – ALL (支持)
  • optimize: (Boolean 类型 )是否优化图片 自动调整图片的方向,在部分设备上可能出现图片方向不正确的问题,此参数将配置是否自动调整图片方向。 可取值: true – 自动调整图片方向; false – 不调整。 默认值为true。 注意:自动调整图片方向将消耗部分系统资源,可能会导致拍照后回调触发时机延迟,将此值设置为false则可避免延迟问题。

    平台支持

    • Android – ALL (支持)
    • iOS – ALL (不支持) : 忽略此属性。
  • resolution: (String 类型 )拍照或摄像使用的分辨率 可通过Camera对象的supportedImageResolutions或supportedVideoResolutions获取,如果设置的参数无效则使用系统默认值。

    平台支持

    • Android – 2.2+ (不支持) : 忽略此属性。
    • iOS – 4.3+ (支持) : 设置摄像的分辨率,分辨率越高越清晰,文件也越大。
  • popover: (PopPosition 类型 )拍照或摄像界面弹出指示区域 对于大屏幕设备如iPad,拍照或摄像界面为弹出窗口,此时可通过此参数设置弹出窗口位置,其为JSON对象,格式如{top:”10px”,left:”10px”,width:”200px”,height:”200px”},默认弹出位置为屏幕居中。

    平台支持

    • Android – ALL (不支持) :忽略此属性值
    • iOS – 5.0+ (支持) :仅iPad设备支持此属性,iPhone/iTouch上忽略此属性值

CameraCropStyles

裁剪图片设置项

说明:

注意:HBuilderX3.1.19及以上版本支持。

属性:

  • quality: (Number 类型 )裁剪后保存图片的质量 取值范围为1-100,数值越小,质量越低(仅对jpg格式有效)。 默认值为80。
  • width: (Number 类型 )裁剪的宽度 单位为px,用于计算裁剪宽高比。 必须设置此值。
  • height: (Number 类型 )裁剪的高度 单位为px,用于计算裁剪宽高比。 必须设置此值。
  • resize: (Boolean 类型 )是否将图片保存为指定的宽高像素 true表示将width和height作为裁剪保存图片的像素值,false表示使用图片编辑操作的真实像素值。
    默认值为true。
    设置为false时在裁剪编辑界面显示图片的像素值,设置为true时不显示。
  • saveToAlbum: (Boolean 类型 )裁剪后的图片是否保存到相册中 true表示将裁剪后的图片保存到相册中,false表示不将裁剪后的图片保存到相册中。 默认值为false。
    HBuilder3.3.0+版本支持。

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