uniapp video 视频录制

### UniApp 中实现视频录制功能

在 UniApp 开发环境中，对于视频录制的支持主要依赖于 `uni.createCameraContext` 和 `<camera>` 组件。通过这些组件可以方便地集成摄像头访问权限并完成视频拍摄操作。

#### 使用 Camera 组件进行视频录制

为了启动摄像机以及控制录像过程，在页面布局文件中需引入 `<camera>` 标签，并设置其属性以便指定设备方向和其他配置选项[^1]：

<template>
  <view class="container">
    <!-- 摄像头 -->
    <camera device-position="back" flash="off" :style="{ width: '100%', height: cameraHeight }"></camera>

    <!-- 控制按钮 -->
    <button type="primary" @click="startRecord">开始录像</button>
    <button type="warn" @click="stopRecord">停止录像</button>
  </view>
</template>

接着定义 JavaScript 方法来处理用户的交互事件，比如点击“开始录像”或“结束录像”。这里会涉及到调用相机上下文对象的相关接口来进行实际的操作[^2]:

<script>
export default {
  data() {
    return {
      cameraHeight: '300px',
      context: null,
      tempFilePath: ''
    };
  },
  onLoad() {
    this.context = uni.createCameraContext();
  },
  methods: {
    async startRecord() {
      try {
        await this.context.startRecord({
          success(res) {
            console.log('Start recording');
          }
        });
      } catch (err) {
        console.error(err);
      }
    },

    stopRecord() {
      this.context.stopRecord({
        success: (res) => {
          this.tempFilePath = res.tempVideoPath;
          console.log(`Stop recording, video saved at ${this.tempFilePath}`);
        }
      });
    }
  }
};
</script>

上述代码展示了如何初始化相机环境并通过简单的 UI 元素触发视频录制流程。当用户按下相应的按钮时，程序将会执行对应的逻辑——即开启/关闭摄录状态并将最终生成的媒体文件路径保存下来以备后续使用[^3]。