如何用uniapp+vue开发自定义相机插件——拍照+录像功能
调用手机的相机功能并实现拍照和录像是很多APP与插件都必不可少的一个功能,今天智密科技就来分享一下如何基于uniapp + vue实现自定义相机界面,并且实现:
1: 自定义拍照
2: 自定义录像
3: 时长控制
4: 闪光灯控制
本文主要先分享前两条最基本的功能实现
先看效果:
技术实现
- 开发环境:HbuilderX + nodejs
- 技术框架:uniapp + vue2.x
- 测试环境:App端(Android + IOS)
- 代码:开源
效果概览
界面布局
这里主要是以自定义的样式为主,功能上使用了“智密相册-自定义相册相机”插件,插件提供了一个自定义相册的wrapper控件,因此我们只需要专注于ui即可,布局的代码如下
<view class="camera-container"><zhimi_camera_view ref="camera" class="camera-elem"></zhimi_camera_view><view class="camera-methods"><view class="camera-methods-item is-left" @click="doSwitchFlashLight()"><image v-if="useFlashLight" class="camera-methods-item-image" src="../../static/icon_flash_start.png"></image><image v-else class="camera-methods-item-image" src="../../static/icon_flash_stop.png"></image></view><view class="camera-methods-capture"><viewclass="camera-methods-capture-elem":class="{'camera-methods-capture-elem-recording': recording}"@click="doAction"></view></view><view class="camera-methods-item is-right" @click="doSwitchCamera()"><image class="camera-methods-item-image" src="../../static/icon_switch_camear.png"></image></view></view><text class="fit-left-btn" @click="doBack">退出</text><view class="fit-right-btn"><text class="fit-right-btn-item" :class="{ 'fit-right-btn-item-is-active': cameraMode == 1 }" @click="setWrapperType(1)">拍照</text><text class="fit-right-btn-item" :class="{ 'fit-right-btn-item-is-active': cameraMode == 2 }" @click="setWrapperType(2)">录像</text></view></view>
这里有个重点,由于我们去掉了原生的标题栏,这需要在pages.json中进行配置,具体配置如下
{"path":"pages/index/camera","style": {"navigationStyle":"custom"}
},
相机控件初始化
在这里我们主要是操作原生控件“zhimi_camera_view”提供的方法,首先我们需要设置回调事件以及相机的类型,比如摄像还是录像,前置还是后置相机
设置回调事件
let wrapper = this.$refs.camera
wrapper.setEventCallback(({ type, data }) => {console.log(type, data)
});
设置相机类型
let wrapper = this.$refs.camera
// 设置相机模式 1 = 拍照模式,2 = 录像模式
wrapper.changeType(1)
设置前后置摄像头
let wrapper = this.$refs.camera
// 是否使用前置相机 true = 开启,false = 关闭
wrapper.useFrontCamera(false)
串联起来完整的初始化相机控件的代码就是这样的
let wrapper = this.$refs.camera
wrapper.setEventCallback(({ type, data }) => {console.log(type, data)
});
wrapper.changeType(1) // 设置拍照
wrapper.useFrontCamera(false) // 设置后置摄像头
拍照录像与闪光灯控制
完成了相机的初始化之后,我们需要做一些业务上面的,比如拍照,录像,闪光灯开关等功能
闪光灯控制
let wrapper = this.$refs.camera
// 是否开启闪光灯 true = 开启,false = 关闭
wrapper.flashLightAction(true) // 开启闪光灯
拍照
let wrapper = this.$refs.camera
wrapper.takePhotoAction();
录像
let wrapper = this.$refs.camera
// true = 开始录像, false = 结束录像
wrapper.takeVideoAction(true);
对于闪光灯而言,开关闪光灯是控制闪光灯是否持续开启,也就是手电筒模式,而不是拍照的时候才闪的,效果上参考下面2张对比图
无闪光灯(无光点)/有闪光灯(有光点)
获取拍照/录像结果
在前面我们已经通过setEventCallback绑定了回调事件,一般来说拍照/录像完成之后会通过回调事件反馈拍照录像结果,具体代码如下
cameraEventHanlder (res) {let { type, data } = resswitch (type){// 拍照模式返回图片路径数据case 'imageType':// 注意:此处返回的为平台路径,前端显示请加file://前缀console.log(data)break;// 录像模式返回视频路径数据case 'videoType':// 注意:此处返回的为平台路径,前端显示请加file://前缀console.log(data)break;default:console.log(data)break;}
}
注意看注释,这里最大的重点是路径,如果说获取到的路径前端需要显示在界面前面,需要添加file://前缀,比如获取到的文件路径如下:
/var/data/Android/Album/timeStamp.png
前端显示的时候需要这样写
<image src="file:///var/data/Android/Album/timeStamp.png"/>
注意这里是3个斜杆,因为安卓这类移动端系统都是基于类unix开发的,因此都是从 / 根开始检索文件的,所以前端需要使用file协议,并且以/开头。
ok,到这里uniapp实现自定义相册的拍照和视频录制的功能就可以实现啦,下一次就分享如何自定义相册与压缩的功能!
对于这部分的代码使用到的原生插件,可以参考uniapp插件市场中的插件,在插件市场也有开源的代码工程哦,也可以添加QQ群755910061定制更多个性化的功能。
插件链接:
智密相册-自定义相册相机-自由布局相机https://ext.dcloud.net.cn/plugin?id=5848
如何用uniapp+vue开发自定义相机插件——拍照+录像功能相关推荐
- uniapp小程序开发自定义相机、拍照、上传
功能背景 项目开发小程序,想要实现一个自定义相机的功能,需要可以拍照,并且显示经纬度等一些其他信息在相机画面上.而且拍照上传,是可以将文字叠加在图片上(目前我这里是由后端实现的,前端应该也是可以做的, ...
- 记录--uniapp自定义相机 自定义界面拍照录像闪光灯切换摄像头
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 因公司业务需要,需要开发水印相机功能,而项目代码用的uniapp框架,App端只能简单调用系统的相机,无法自定义界面,在此基础上,只能开发 ...
- iOS开发-自定义相机(仿微信)拍照、视频录制
网上有很多自定义相机的例子,这里只是我临时写的一个小demo,仅供参考: 用到了下面几个库: #import <AVFoundation/AVFoundation.h> #import & ...
- iOS 自定义相机,拍照旋转
1 , 自定义相机,拿到照片,校正方向 AVCapturePhotoCaptureDelegate 的这个代理方法 func photoOutput(_ output: AVCapturePhotoO ...
- Android 自定义相机 身份证拍照 自定义身份证相机
项目中需要用到拍摄身份证,拍完照片后直接拿到和身份证比例一致的图片,做成功的结果如下: 拍完照后直接拿到裁剪好的图本文的核心技术来自: https://yq.aliyun.com/article ...
- 安卓 自定义相机,身份证拍照
最近项目需要实现身份证拍照的功能,系统的相机并不能满足需求,故需要自定义相机,先上效果图,使用了Camera+ SurfaceView; 布局文件 <?xml version="1.0 ...
- 自定义相机旋转拍照角度
自定义相机拍照时有时会把手机倾斜着拍或者倒过来拍,怎么能在浏览拍摄的照片时看到的是一张正立的图片呢? 先利用传感器获得手机的拍照时的角度 private SensorManager sm = null ...
- Android开发自定义相机,自定义拍照界面
1.目的 :开发时产品需求自己定义拍照界面,拍照处理.如下图:自定义一个拍照界面 可以看到,底部拍照按钮,和相册选择.整个界面和系统相机不一样.这时我们就要自己去开发定义自己的相机处理. 2.实现思路 ...
- uniapp 系统广播、自定义广播插件 Ba-Broadcast
简介(下载地址) Ba-Broadcast 是一款可监听系统广播的uniapp插件,如息屏.亮屏.声音.电量等等.支持监听系统广播:支持自定义广播:支持发送广播. 支持系统广播(支持设备支持的所有广播 ...
最新文章
- java序列化的作用-这个挺有用的,不妨学学
- 研究一个新的功能的时候,如何获取该资源的文档
- Java多线程(review)
- Java工作笔记-Java函数参传值传引用问题
- 基于mycat高可用方案——数据库负载
- 右击计算机管理出现乱码,win10系统右键菜单出现乱码的处理方案
- 吴恩达深度学习课程练习题汇总(第二周)
- Windows最简单的重装系统
- 11个超实用的创意设计思维训练方法
- widows计算器恢复
- gcc cross compiler 问题
- 基于SSM整合阿里直播服务----java代码实现
- Controlling the Amount of Verbatim Copying in Abstractive Summarization
- 计算机 竞赛 甘肃,甘肃省第三届创新杯计算机应用能力大赛获奖名单
- 祖源分析相关链接推荐
- 210127 课内整理
- 夕阳的余辉却把近山显露得清清楚楚
- 数字罗列模拟水题-郑轻 2438
- 微软亚洲研究院论文解读:基于动态词表的对话生成研究(PPT+视频)
- 第十一届蓝桥软件类JavaB组