编写 微信小程序关于 开始录像和展示录像的代码

以下是一个简单的微信小程序录像功能的代码示例，包括开始录像和展示录像：

wxml文件：

<view class="container">
  <camera device-position="{{cameraPosition}}" flash="{{flash}}" binderror="error" style="width: 100%; height: 300px;"></camera>
  <view class="controls">
    <button class="btn" type="default" bindtap="toggleCamera">切换摄像头</button>
    <button class="btn" type="default" bindtap="toggleFlash">切换闪光灯</button>
    <button class="btn" type="primary" bindtap="startRecord">开始录像</button>
    <button class="btn" type="warn" bindtap="stopRecord">停止录像</button>
  </view>
  <video class="video" src="{{videoSrc}}" wxif="{{videoSrc}}" controls></video>
</view>

js文件：

Page({
  data: {
    cameraPosition: 'back',
    flash: 'off',
    isRecording: false,
    videoSrc: '',
  },
  onLoad: function () {
    this.ctx = wx.createCameraContext();
  },
  toggleCamera: function () {
    this.setData({
      cameraPosition: this.data.cameraPosition === 'back' ? 'front' : 'back',
    });
  },
  toggleFlash: function () {
    this.setData({
      flash: this.data.flash === 'off' ? 'on' : 'off',
    });
  },
  startRecord: function () {
    this.ctx.startRecord({
      success: () => {
        this.setData({
          isRecording: true,
        });
      },
      fail: () => {
        console.error('startRecord fail');
      },
    });
  },
  stopRecord: function () {
    this.ctx.stopRecord({
      success: (res) => {
        this.setData({
          isRecording: false,
          videoSrc: res.tempVideoPath,
        });
      },
      fail: () => {
        console.error('stopRecord fail');
      },
    });
  },
  error: function (e) {
    console.error('camera error:', e.detail.errMsg);
  },
});

在这个例子中，我们使用了`<camera>`组件来展示摄像头的画面，并通过`wx.createCameraContext()`创建了一个`CameraContext`对象，用于控制摄像头的相关操作。通过`toggleCamera`和`toggleFlash`方法切换摄像头和闪光灯状态，通过`startRecord`和`stopRecord`方法开始和停止录像，并在录像完成后将录像文件的临时路径保存到`videoSrc`变量中，用于展示录像回放。我们使用`<video>`组件来展示录像，通过`wxif`属性来判断是否有录像文件可展示，并通过`controls`属性来显示录像控制条。