首页 > 其他分享> 文章详细

如何用uniapp+vue开发自定义相机插件——拍照+录像功能

2021-11-17 01:02:53 阅读：533 来源： 互联网

标签：uniapp 插件自定义闪光灯拍照 wrapper 相机录像

调用手机的相机功能并实现拍照和录像是很多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">
                <view
                    class="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 } = res
  switch (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

前端显示的时候需要这样写

注意这里是3个斜杆，因为安卓这类移动端系统都是基于类unix开发的，因此都是从 / 根开始检索文件的，所以前端需要使用file协议，并且以/开头。

ok，到这里uniapp实现自定义相册的拍照和视频录制的功能就可以实现啦，下一次就分享如何自定义相册与压缩的功能！对于这部分的代码使用到的原生插件，可以参考uniapp插件市场中的插件，在插件市场也有开源的代码工程哦，也可以添加QQ群755910061定制更多个性化的功能。

插件地址：智密相册-自定义相册相机-自由布局相机

标签：uniapp,插件,自定义,闪光灯,拍照,wrapper,相机,录像
来源： https://www.cnblogs.com/zhimitec/p/15564588.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9