👨‍🎓作者简介：一位喜欢写作，计科专业的大三菜鸟

🏡个人主页：starry陆离 的个人主页

如果文章有帮到你的话记得点赞👍+收藏💗支持一下哦

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

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

1.简介

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

2.简单案例

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

通过此三个属性我们来做一个拍照的小案例，要注意的是 同一页面只能插入一个 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即可，我就不再做演示。

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

3.CameraContext类方法

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

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

在上面的案例中我们其实已经使用了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，最终渲染到了我们的文本控件上。

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