uni-app 手机摄像头录像及视频播放功能

在uni-app中实现手机摄像头录像及视频播放功能，可以分别利用<camera>组件和<video>组件来完成。以下是一个简单的代码示例，展示了如何实现这两个功能。

录像功能

首先，使用<camera>组件来调用手机摄像头进行录像。你可以设置device-position属性来选择前置或后置摄像头，并通过监听stop事件来获取录像文件。

<template>
  <view>
    <camera device-position="back" @stop="onStop"></camera>
    <button @click="startRecording">开始录像</button>
    <button @click="stopRecording">停止录像</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      context: null,
    };
  },
  methods: {
    startRecording() {
      this.context = uni.createCameraContext();
      this.context.startRecord({
        success: () => {
          console.log('开始录像');
        },
      });
    },
    stopRecording() {
      this.context.stopRecord({
        success: (res) => {
          this.onStop(res.tempVideoPath);
          console.log('录像结束', res.tempVideoPath);
        },
      });
    },
    onStop(videoPath) {
      // 处理录像文件，例如保存到服务器或显示给用户
      console.log('录像文件路径:', videoPath);
    },
  },
};
</script>

视频播放功能

接下来，使用<video>组件来播放录像文件或其他视频。你可以将<video>组件的src属性绑定到录像文件的路径。

<template>
  <view>
    <!-- 录像按钮和相机组件省略 -->
    <video id="myVideo" :src="videoSrc" controls></video>
    <button @click="playVideo">播放视频</button>
    <button @click="pauseVideo">暂停视频</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: '', // 视频文件路径
      videoContext: null,
    };
  },
  methods: {
    onStop(videoPath) {
      this.videoSrc = videoPath;
    },
    playVideo() {
      this.videoContext = uni.createVideoContext('myVideo');
      this.videoContext.play();
    },
    pauseVideo() {
      this.videoContext.pause();
    },
  },
};
</script>

在这个示例中，当录像结束时，onStop方法会被调用，并将录像文件的路径保存到videoSrc中。然后，你可以通过点击播放和暂停按钮来控制视频的播放。

这个代码示例展示了如何在uni-app中实现基本的手机摄像头录像和视频播放功能。你可以根据实际需求进一步扩展和优化这些功能。