关于在uni-app中使用camera组件这档子事

开头先BB两句

之前做的一个小程序，需求迭代，要增加一个活体检测的功能。

前端，拍摄一段视频，转成base64格式，传给后台，后台返回校验结果。

这个小程序的项目是用uni-app框架做的。为了实现这个需求，需要用到unia-pp的组件camera以及API相机组件控制的相关方法。

uni-app组件camera

国际惯例，先看文档

camera组件，官方文档传送门：

uniapp.dcloud.io/component/c…

页面内嵌的区域相机组件。

微信小程序支持，App 和 H5 端不支持。

代码示例:

<template>
    <view>
        <camera device-position="back" flash="off" @error="error" style="width: 100%; height: 300px;"></camera>
        <button type="primary" @click="takePhoto">拍照</button>
        <view>预览</view>
        <image mode="widthFix" :src="src"></image>
    </view>
</template>
复制代码

Tips:

camera 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。可使用 cover-view cover-image 覆盖在上面。

cover-view和cover-image的使用：

代码示例:

 <camera 
  mode="normal" 
  :device-position="device"
  flash="off"  
  >
   <cover-view style="height: 50rpx; position: absolute; top: 40rpx;">
    点击下方录制按钮，用普通话朗读数字：
   </cover-view>
   <cover-image  style="height: 700rpx; position: absolute; top: 150rpx;" 
    src="https://img-blog.csdnimg.cn/20210126152753150.png"/>  
</camera>
复制代码

相关属性说明：

1. mode有效值为 normal, scanCode

2. 可以通过 device-position 属性设置 前置或后置摄像头，值为front, back

3. flash闪光灯，值为auto, on, off

后来，又加上了返回的按钮，拍摄的按钮，以及切换前置或后置摄像头的功能；

页面效果：

uni.createCameraContext()

创建并返回 camera 组件的上下文 cameraContext 对象。

本API为 camera 组件配套的js API，与 camera 组件的平台兼容性相同，可实现非全屏摄像头。

官方文档，传送门： uniapp.dcloud.io/api/media/c…

创建对象

创建cameraContext对象，我是onLoad钩子函数中创建的。

if(uni.createCameraContext) {
  setTimeout(() => {
    this.cameraContext = uni.createCameraContext();
  },200)
}else {
  // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
  uni.showModal({
    title: '提示',
    content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
  })
}
复制代码

拍照 cameraContext.takePhoto

示例

this.cameraContext.takePhoto({
    quality: 'normal',
    success: (res) => {
      //返回照片文件的临时路径
      var url =res.tempImagePath
    },
    fail: (err) => {
      uni.showToast({
        title:'拍照失败，请检查系统是否授权',
        icon: 'none',
        duration: 1200
      })
    }
})
复制代码

如果拍摄的照片需要转换成base64格式，可以使用如下方法：

uni.getFileSystemManager().readFile

编码格式 encoding 参数传 base64

this.cameraContext.takePhoto({
  quality: 'normal',
  success: (res) => {
    var url =res.tempImagePath
    uni.getFileSystemManager().readFile({
      filePath: url, //选择图片返回的相对路径
      encoding: 'base64', //编码格式
      success: res => { //成功的回调
        let base64 = res.data 
        console.log('data:image/jpeg;base64,' + base64)
      },fail: (e) => {
        console.log("图片转换失败");
      }
    })
  },
  fail: (err) => {
    uni.showToast({
      title:'拍照失败，请检查系统是否授权',
      icon: 'none',
      duration: 1200
    })
  }
})
复制代码

开始录像 cameraContext.startRecord()

  this.cameraContext.startRecord({
    quality:'low',
    success: function(res){
     
    },
    fail: (err) => {
      console.log(err)
    }
  })
复制代码

录像结束 cameraContext.stopRecord()

  this.cameraContext.stopRecord({
    //compressed 是否启动视频压缩 
    compressed: true,
    success: function(res){
      uni.showToast({
        title: '停止录制视频',
        icon: 'none',
        mask: true,
        duration: 2000
      })
      //返回结果 size 字段 是btye单位
      console.log(res)
      // byte单位转换为 kb 单位
      let fileSize = res.size / 1024;
      let videoFile = res.tempVideoPath
      
    },
    fail: (err) => {
      console.log(err)
    }
  })
复制代码

压缩视频 uni.compressVideo()

 uni.compressVideo({  
    // videoFile 就是 cameraContext.stopRecord() 返回结果中的 tempVideoPath
    src:videoFile,  
    quality:'low',//'low':低，'medium':中，'high':高  
    success: function (csRes){ 
      // tempFilePath string  压缩后的临时文件地址 
      let tempFilePath  = csRes.tempFilePath
      // size string  压缩后的大小，单位 kB
      let size = csRes.size;
     console.log('压缩后大小：单位 kB')  
      console.log(csRes)
    },  
    fail: function (cfRes) {  
        uni.hideLoading();
        uni.showToast({  
            title:'视频压缩失败',  
            icon:'none'  
        })  
    }  
  });   
复制代码