捕获影像的camera组件-微信小程序与云开发(上)

当前位置:　首页>> 技术小册>> 微信小程序与云开发(上)

### 捕获影像的camera组件

在微信小程序的开发中，`camera` 组件是构建具有图像捕获功能应用的关键组件之一。它不仅支持实时预览摄像头画面，还允许用户进行拍照、录制视频等操作，极大地丰富了小程序的交互体验。本章将深入探讨微信小程序中 `camera` 组件的使用方法，包括其基础属性、事件处理、权限管理以及在实际开发中的应用场景。

#### 一、`camera` 组件基础

##### 1.1 组件引入

在小程序的页面 `.wxml` 文件中，通过 `<camera>` 标签引入 `camera` 组件。该组件需要放置在页面的可视区域内，以便用户能够直接与其交互。

```xml
<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
```

##### 1.2 基础属性

- `device-position`：指定摄像头的位置，可选值包括 `back`（后置摄像头）、`front`（前置摄像头）和 `auto`（自动选择，默认是前置）。
- `flash`：控制闪光灯的开关，可选值有 `auto`、`on`、`off`。
- `frame-size`：指定相机的分辨率，不同的设备支持的值可能不同，可通过 `wx.getCameraFrameSizes` 接口获取支持的分辨率列表。
- `aspect`：相机的宽高比，如 `'16:9'` 或 `'4:3'`，默认为 `'16:9'`。
- `mode`：相机的拍摄模式，如 `'normal'`（正常模式）、`'scanCode'`（扫码模式）等，具体支持的模式请参考官方文档。
- `bindstart`、`bindstop`：分别绑定相机开始/停止时的回调函数。
- `bindscancode`：当 `mode` 设置为 `'scanCode'` 时，绑定扫码成功的回调函数。
- `binderror`：绑定相机发生错误时的回调函数。

#### 二、事件处理

`camera` 组件提供了丰富的事件回调，帮助开发者处理用户操作，如拍照、录像等。

##### 2.1 拍照

虽然 `camera` 组件本身没有直接的“拍照”属性，但你可以通过按钮点击事件结合 `wx.createCameraContext` API 来实现拍照功能。

```javascript
Page({
  onReady: function () {
    // 创建 camera 上下文 CameraContext
    this.ctx = wx.createCameraContext()
  },
  takePhoto: function () {
    this.ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        console.log(res.tempFilePath)
      }
    })
  }
})
```

在 `.wxml` 文件中，添加一个按钮绑定 `takePhoto` 方法来触发拍照。

```xml
<button bindtap="takePhoto">拍照</button>
```

##### 2.2 录像

录像功能同样通过 `wx.createCameraContext` API 实现，使用 `startRecord` 和 `stopRecord` 方法来控制录像的开始和结束。

```javascript
Page({
  data: {
    recording: false
  },
  startRecording: function () {
    if (!this.data.recording) {
      this.ctx.startRecord({
        success: () => {
          this.setData({
            recording: true
          })
        }
      })
    }
  },
  stopRecording: function () {
    if (this.data.recording) {
      this.ctx.stopRecord({
        success: (res) => {
          console.log(res.tempVideoPath) // 视频的本地临时文件路径
          this.setData({
            recording: false
          })
        }
      })
    }
  }
})
```

在 `.wxml` 文件中，添加开始和停止录像的按钮。

```xml
<button bindtap="startRecording">开始录像</button>
<button bindtap="stopRecording" disabled="{{recording}}">停止录像</button>
```

#### 三、权限管理

使用 `camera` 组件前，必须确保用户已经授权了相机权限。小程序提供了 `wx.authorize` API 来请求用户授权。

```javascript
Page({
  onLoad: function () {
    wx.authorize({
      scope: 'scope.camera',
      success: () => {
        // 用户同意授权
        console.log('用户已授权');
      },
      fail: () => {
        // 用户拒绝授权
        wx.showModal({
          title: '提示',
          content: '相机权限被拒绝，请前往设置页面授权',
          showCancel: false,
          success: function (res) {
            if (res.confirm) {
              wx.openSetting({
                success: function (res) {
                  if (res.authSetting['scope.camera']) {
                    console.log('用户已重新授权');
                  }
                }
              })
            }
          }
        })
      }
    })
  }
})
```

#### 四、应用场景

##### 4.1 扫码功能

将 `camera` 组件的 `mode` 设置为 `'scanCode'`，可以方便地实现扫码功能，如二维码扫描、条形码扫描等。

##### 4.2 用户头像上传

在用户注册或编辑资料时，使用 `camera` 组件让用户拍照上传头像，提升用户体验。

##### 4.3 实时视频通话

虽然 `camera` 组件本身不直接支持实时视频通话，但可以作为视频通话界面的一部分，显示本地视频流，结合小程序的实时通信能力（如 WebSocket 或 WebSocket API 封装库）实现视频通话功能。

##### 4.4 商品拍摄与分享

在电商类小程序中，允许用户拍摄商品照片并分享至社交平台，增加商品的曝光度和用户互动性。

#### 五、最佳实践

- **优化用户体验**：确保在调用相机功能前，清晰地向用户说明为何需要此权限，避免引起用户反感。
- **处理权限拒绝**：当用户拒绝相机权限时，提供明确的指引，引导用户前往设置页面重新授权。
- **资源管理**：合理使用相机资源，避免不必要的资源占用，如在不需要时及时停止相机预览。
- **适配性测试**：在不同设备上进行测试，确保相机功能的兼容性和稳定性。

#### 六、结语

微信小程序中的 `camera` 组件为开发者提供了强大的图像捕获能力，通过合理配置属性和事件处理，可以轻松实现拍照、录像、扫码等多种功能。在实际开发中，注意权限管理、用户体验以及资源优化，将 `camera` 组件的潜力最大化，为用户提供更加丰富和便捷的功能体验。

该分类下的相关小册推荐：

微信小程序全栈开发实战(上)

微信小程序底层框架实现原理

微信小程序与云开发(中)

微信小程序全栈开发实战(中)

微信小程序全栈开发实战(下)

微信小程序与云开发(下)