网站首页 > 开源技术 正文
我们想在应用中增加拍照上传头像功能或者发布短视频等,都需要用到移动设备的摄像头。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日期选择控件)
你 发表评论:
欢迎- 最近发表
- 标签列表
-
- 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)
本文暂时没有评论,来添加一个吧(●'◡'●)