『从零开始学小程序』媒体组件camera组件

CSDN话题挑战赛第2期
参赛话题：面试宝典

👨‍🎓作者简介：一位喜欢写作，计科专业大三菜鸟
🏡个人主页：starry陆离
🕒首发日期：2022年9月21日星期三
如果文章有帮到你的话记得点赞👍+收藏💗支持一下哦

多媒体包括音频、视频和相机等，为了更好地在小程序中使用这些多媒体功能，微信官方也为开发者提供了一系列多媒体组件和API接口。多媒体组件如下所示：

• video组件：视频组件
• camera组件：相机组件
• audio组件：音频组件
• image组件：图片组件

1.简介

camera，相机组件。用于启动系统相机并拍摄照片，相关的API是 wx.createCameraContext。如果要启动扫描二维码功能，需用户授权scope.camera权限，并升级微信客户端至6.7.3及以上。

2.简单案例

首先我们来看看相机组件常见的两个属性，通过mode属性我们可以设置相机的应用模式，通过device-position属性可以设置摄像头朝向。

属性	类型	默认值	必填	说明
mode	string	normal	否	应用模式，只在初始化时有效，不能动态变更。取值为normal(相机模式)、scanCode(扫码模式)
device-position	string	back	否	摄像头朝向。取值为front(前置)、back(后置)
flash	string	auto	否	闪光灯，值为 auto , on, off，torch（常亮）

通过此三个属性我们来做一个拍照的小案例，要注意的是 同一页面只能插入一个 camera 组件。

<!--pages/mycamera/mycamera.wxml-->
<view class="container">
  <view class="page-body">
    <view class="h1" style="text-align: center; font-size: large;">媒体组件camera的简单应用</view>
    <view class="demo-box">
      <view class="title">1.使用createCameraContext绑定相机并操作</view>
      <camera device-position="back" flash="off" style="width: 100%; height: 300px;"></camera>
      <view class="btn-area" style="text-align: center; margin: 10px;">
        <button type="primary" size="mini" bindtap="takePhoto">拍照</button>
      </view>
    </view>
    <view class="show-imageVideo">
      <view class="title">2.查看保存的照片和视频</view>
      <text>(1)照片路径</text>
      <image mode="aspectFill" src="{{src}}" wx:if="{{src}}"></image>
    </view>
  </view>
</view>

// pages/mycamera/mycamera.js
Page({
  // 拍照
  takePhoto() {
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath
        })
      }
    })
  }
})

如果要调用前置摄像头，将device-position设置为front即可，我就不再做演示。

除了上面的三种属性，相机组件还有如下几种属性。

属性	类型	默认值	必填	说明
frame-size	string	medium	否	指定期望的相机帧数据尺寸。取值为small(小尺寸帧数据)、medium(中尺寸帧数据)、large(大尺寸帧数据)
bindstop	eventhandle		否	摄像头在非正常终止时触发，如退出后台等情况
binderror	eventhandle		否	用户不允许使用摄像头时触发
bindinitdone	eventhandle		否	相机初始化完成时触发，e.detail = {maxZoom}
bindscancode	eventhandle		否	在扫码识别成功时触发，仅在 mode=“scanCode” 时生效

3.CameraContext类方法

CameraContext 实例，可通过 wx.createCameraContext 获取。

CameraContext与页面内唯一的 camera组件绑定，操作对应的 camera组件。

类方法	说明
onCameraFrame(onCameraFrameCallback callback)	获取 Camera 实时帧数据
takePhoto(Object object)	拍摄照片
setZoom(Object object)	设置缩放级别
startRecord(Object object)	开始录像
stopRecord(Object object)	结束录像

在上面的案例中我们其实已经使用了takePhoto(Object object)方法进行照片的拍摄。现在我们通过startRecord(Object object)和stopRecord(Object object)方法来实现录像功能。

4.录像案例

与takePhoto的使用相同，首先我们要通过 wx.createCameraContext 获取到CameraContext 实例，通过实例对象去操控这些方法。

// 开始录像
  startRecord(){
    const ctx = wx.createCameraContext()
    var that=this;
    ctx.startRecord({
      timeoutCallback(){that.ctx.stopRecord()},
      success: (res) => {console.log(res)}
    })
  },
  // 停止录像
  stopRecord(){
    const ctx = wx.createCameraContext()
    ctx.stopRecord({
      success: (res) => {
        console.log(res)
        this.setData({videoSrc:res.tempVideoPath})
      }
    })
  }

5.扫码模式

通过上面的两个案例，相信大家都明了相机组件的常见属性和CameraContext类方法。除了调用摄像头拍照、录像，我们生活中用的最多的可能就是扫码功能，那么我们来康康这个功能又如何实现。

首先哈，我们定义一个文本组件来存放扫码后得到的内容。一个按钮来触发扫码功能。

<text  style="margin-top: 30px; border: 5px solid #11eeff;" >{{scanCode}}</text>
<button style="margin-top: 30px;" bindtap="scanCodeEvent" type="primary">扫码</button>

我们再来看看js文件怎么写，定义了一个空字符串数据scanCode，用来接收扫码得到的内容，并通过Mustache语法（类似Vue的插值语法）将数据绑定到文本组件上。

Page({
  data: {
    scanCode:''
  },
  scanCodeEvent:function(options){
    var that = this;
    wx.scanCode({
      onlyFromCamera: true,// 只允许从相机扫码
      success(res){
        console.log("扫码成功："+JSON.stringify(res))
 
        // 扫码成功后  在此处理接下来的逻辑
        that.setData({
          scanCode: res.result
        })
      }
    })
  }
})

扫码成功后返回的内容有：

• res.result：所扫码的内容；

• res.scanType：所扫码的类型；

• res.charSet：所扫码的字符集；

• res.path：当所扫的码为当前小程序二维码时，会返回此字段，内容为二维码携带的 path；

• res.rawData：原始数据，base64编码。

这里我们主要用到的就是res.result：所扫码的内容；将其赋值给scanCode，最终渲染到了我们的文本控件上。

可以看到我扫描校园卡，成功将二维码的内容渲染到了文本控件上。

7.小试牛刀