uni-app 支持H5端直接录制视频上传

发布于 1周前 作者 htzhanglong 来自 Uni-App

uni-app 支持H5端直接录制视频上传

项目需求

  • 开发环境：未提及
  • 版本号：未提及
  • 项目创建方式：未提及

uniapp开发项目发布成H5方式访问，通过链接挂载企业微信访问，有业务需求可以上传视频支持从相册选择和直接录制的方式。目前官方组件不支持H5方式（大部分手机不支持，少部分可以录制）。需要一个针对开发的插件可以兼容市面主流手机访问H5都能录制视频上传。

Harmonyos Next教程
3 回复

还需要吗？


专业插件开发 q 1196097915 https://ask.dcloud.net.cn/question/91948

在uni-app中实现H5端直接录制视频并上传的功能，你可以利用HTML5的媒体录制API（MediaRecorder）结合uni-app的API来完成。以下是一个简单的代码示例，展示了如何在H5端实现视频录制和上传功能。

1. 页面结构（pages/index/index.vue）

<template>
  <view>
    <button @click="startRecording">开始录制</button>
    <button @click="stopRecording" :disabled="!isRecording">停止录制</button>
    <video v-if="videoUrl" :src="videoUrl" controls></video>
    <button @click="uploadVideo" :disabled="!videoUrl">上传视频</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      mediaRecorder: null,
      videoChunks: [],
      videoUrl: null,
      isRecording: false,
    };
  },
  methods: {
    async startRecording() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
        this.mediaRecorder = new MediaRecorder(stream);
        this.mediaRecorder.ondataavailable = (event) => {
          this.videoChunks.push(event.data);
        };
        this.mediaRecorder.onstop = () => {
          const blob = new Blob(this.videoChunks, { type: 'video/webm' });
          this.videoUrl = URL.createObjectURL(blob);
          this.videoChunks = [];
          this.isRecording = false;
        };
        this.mediaRecorder.start();
        this.isRecording = true;
      } catch (error) {
        console.error("Error accessing media devices.", error);
      }
    },
    stopRecording() {
      this.mediaRecorder.stop();
    },
    async uploadVideo() {
      if (!this.videoUrl) return;
      const blob = await fetch(this.videoUrl).then(res => res.blob());
      const formData = new FormData();
      formData.append('file', blob, 'video.webm');

      uni.uploadFile({
        url: 'https://your-server-upload-url', // 替换为你的服务器上传接口
        filePath: '', // 这里不需要，因为使用的是Blob对象
        name: 'file',
        formData,
        success: (uploadFileRes) => {
          console.log('Upload success:', uploadFileRes);
        },
        fail: (error) => {
          console.error('Upload failed:', error);
        },
      });
    },
  },
};
</script>

注意事项

  1. 权限问题：确保用户在浏览器中授予了访问摄像头和麦克风的权限。
  2. 兼容性：MediaRecorder API 在现代浏览器中支持良好，但在一些老旧浏览器中可能不兼容。
  3. 服务器接口：确保你的服务器能够接收并处理上传的视频文件，同时设置正确的CORS策略。
  4. 文件大小限制：考虑视频文件的大小限制，可能需要前端进行压缩处理或提示用户。

这个示例展示了如何在H5端使用MediaRecorder录制视频，并通过uni.uploadFile上传视频。你可以根据实际需求对代码进行调整和优化。

回到顶部