网站首页 > 开源技术 正文
我们想在应用中增加拍照上传头像功能或者发布短视频等,都需要用到移动设备的摄像头。H5+ API为我们提供了Camera模块管理设备的摄像头,可用于拍照、摄像操作。
Step 1 我们需要在页面上放置拍照或摄像的按钮。
<a class="mui-icon mui-icon-camera mui-pull-right" id="camera"></a>
Step 2 然后对按钮进行监听操作
//监听按钮的点击事件
document.getElementById('camera').addEventListener('tap', function() {})
Step 3 初始化摄像头对象
/**
* @description 获取需要操作的摄像头对象
* @example Camera plus.camera.getCamera(index);
* @param {index} 要获取摄像头的索引值 1:主摄像头;2:辅摄像头;默认为系统设置的主摄像头
* @return {Camera} 摄像头对象
*/
var cam = plus.camera.getCamera();
Step 4 使用captureImage()方法进行拍照
/**
* @description 进行拍照操作
* @example cam.captureImage(successCB, errorCB, options);
* @param {successCB} 拍照操作成功的回调函数
* @param {errorCB} 拍照操作失败的回调函数
* @param {options} 摄像头拍照参数
*/
cam.captureImage(function(t) {
//t 拍照操作保存的文件路径
console.log(t)
//预览图片
plus.nativeUI.previewImage([t])
}, function(e) {
}, {
filename: '_downloads/img/',//拍照文件保存的路径
format: cam.supportedImageFormats[0],//拍照的文件格式
index: 1, //拍照默认使用的摄像头
optimize:true,//是否优化图片,true:自动调整图片方向;false:不调整
resolution: cam.supportedImageResolutions[0],//拍照使用的分辨率
popover: {//拍照界面弹出指定区域
top: "10px",
left: "10px",
width: "200px",
height: "200px"
}
})
Step 5 使用startVideoCapture()方法录制视频
/**
* @description 调用摄像头进行摄像操作
* @example cam.startVideoCapture(successCB, errorCB, options);
* @param {successCB} 拍照操作成功的回调函数
* @param {errorCB} 拍照操作失败的回调函数
* @param {options} 摄像头拍照参数
*/
cam.startVideoCapture(function(t) {
//t 摄像操作保存的文件路径
console.log(t)
}, function(e) {
}, {
filename: '_downloads/video/',//录像文件保存的路径
format: cam.supportedVideoFormats[0],//摄像的文件格式
index: 1, //摄像默认使用的摄像头
videoMaximumDuration:10,//视频长度
resolution: cam.supportedVideoResolutions[0],//摄像使用的分辨率
popover: {//摄像界面弹出指定区域
top: "10px",
left: "10px",
width: "200px",
height: "200px"
}
})
截止此处,我们已经完成了拍照或摄像的操作,接着我们需要在拍照或摄像成功后对拍照或摄像的文件进行处理,比如上传文件到服务器需要用到plus.uploader.createUpload()方法。
猜你喜欢
- 2024-09-28 基于MUI的THMA-UWB系统性能分析(miui系统稳定性从大到小的顺序是)
- 2024-09-25 我工资11200,被老板娘降到5580,我果断跳槽,结果公司被罚18万
- 2024-09-25 MIUI 的浏览器还能这样用?(miui12.5 浏览器)
- 2024-09-25 mui切换底部tab选项(mui跳转到指定页面)
- 2024-09-25 「webAPP项目」基于MUI框架开发APP功能点开发详解
- 2024-09-25 整理 | MUI使用H5+ API Video模块
- 2024-09-25 mui框架学习笔记(mui 教程)
- 2024-09-25 芒果TV发布智能电视系统MUI:基于广电TVOS 可装直播软件
- 2024-09-25 震惊!供销社科长不雅聊天曝光,女方直言“勾引太疯狂”
- 2024-09-25 MUI-日期联动-picker(选择器)(mui日期选择控件)
欢迎 你 发表评论:
- 1596℃北京那些看上去很牛的车牌们!(北京厉害车牌)
- 1114℃2025年度视频去水印软件TOP5对比:哪款最值得用
- 600℃新疆话里的“虫子”
- 528℃中兴光猫 Telnet下设置大全(中兴光猫命令大全)
- 520℃蓝牙设备配对失败的系统性解决方案与技术解析
- 518℃未备份电脑文件数据恢复的七种方法
- 497℃工艺管道常用英文缩写 英汉对照
- 453℃是爱情啊!比伯分享度假照 与海莉礁石上甜蜜接吻
- 最近发表
- 标签列表
-
- jdk (81)
- putty (66)
- rufus (78)
- 内网穿透 (89)
- okhttp (70)
- powertoys (74)
- windowsterminal (81)
- netcat (65)
- ghostscript (65)
- veracrypt (65)
- asp.netcore (70)
- wrk (67)
- aspose.words (80)
- itk (80)
- ajaxfileupload.js (66)
- sqlhelper (67)
- express.js (67)
- phpmailer (67)
- xjar (70)
- redisclient (78)
- wakeonlan (66)
- tinygo (85)
- startbbs (72)
- webftp (82)
- vsvim (79)

本文暂时没有评论,来添加一个吧(●'◡'●)