关于相机调用的API文档参见HTML5+ API Reference (html5plus.org)中的camera模板,本文设计的所有API的接口帮助文档均参见上述连接,这里只介绍API的应用,接口的帮助请查看具体帮助手册。
目录
1 配置相机权限
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}
);
});
效果展示:
2.2 在真机上找到图片
在真机测试时,弹出的路径为:
以红米note9Pro为例,寻找该路径的方法为:
忽略file:///storage/emulated/0;然后按照剩余路径提示的目录,即可找到拍摄的图片。
3. 拍照问题处理
在测试的时候,出现了以下错误:
主要原因是:相机权限是独占权限,只能为一个应用所使用;如果摄像头已井被其他应用打开,将会报上面的错误。