mui-app开发05:调用相机功能

关于相机调用的API文档参见HTML5+ API Reference (html5plus.org)中的camera模板,本文设计的所有API的接口帮助文档均参见上述连接,这里只介绍API的应用,接口的帮助请查看具体帮助手册。

目录

1 配置相机权限

 2. 编写拍照代码

2.1 获取相机并拍照

2.2 在真机上找到图片

3. 拍照问题处理


1 配置相机权限

mui-app开发05:调用相机功能

 2. 编写拍照代码

2.1 获取相机并拍照

在mui.plusReady()函数中,添加如下代码:

                // 拍照
				var paizhaoNode = document.getElementById('GalleryPaiZhao');
				paizhaoNode.addEventListener('tap', function(){
					
					// 如果不指定参数,则默认使用主摄像头
					// https://www.html5plus.org/doc/zh_cn/camera.html
					var cmr = plus.camera.getCamera();
					var fmt = cmr.supportedImageFormats[0];
					var res = cmr.supportedImageResolutions[0];
					console.log('分辨率:'+res);
					
					cmr.captureImage(
						function(rs){
							var path = "file://"+plus.io.convertLocalFileSystemURL(eval(JSON.stringify(rs)));
							// mui.toast('图片路径:'+path,{ duration:'long', type:'div' }); 
							mui.confirm('图片路径:'+path);						
						},
						function(e){
							
							alert(e.message+'拍照失败');
						},
						{resolution:res, format:fmt}
					);
				});

效果展示:

mui-app开发05:调用相机功能

2.2 在真机上找到图片

在真机测试时,弹出的路径为:

mui-app开发05:调用相机功能

以红米note9Pro为例,寻找该路径的方法为:

忽略file:///storage/emulated/0;然后按照剩余路径提示的目录,即可找到拍摄的图片。

3. 拍照问题处理

在测试的时候,出现了以下错误:

mui-app开发05:调用相机功能

 mui-app开发05:调用相机功能

主要原因是:相机权限是独占权限,只能为一个应用所使用;如果摄像头已井被其他应用打开,将会报上面的错误。

上一篇:c++生成随机数


下一篇:Android常见输入法的包名和主类名