【实战技巧】前端利用 ffmpeg 播放本地视频

npm install @ffmpeg/ffmpeg @ffmpeg/core -S

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

const ffmpeg = createFFmpeg({})

(async () => {
  await ffmpeg.load();
})();

(async () => {
  /* 等价于执行了 `$ ffmpeg -i flame.avi -s 1920x1080 output.mp4` */
  await ffmpeg.run('-i', 'flame.avi', '-s', '1920x1080', 'output.mp4');
})();

/* Write data to MEMFS, need to use Uint8Array for binary data */
// 把文件存入内存中
ffmpeg.FS('writeFile', 'video.avi', new Uint8Array(...));
/* Read data from MEMFS */
// 在内存中读取
ffmpeg.FS('readFile', 'video.mp4');
/* Delete file in MEMFS */
// 在内存中删除
ffmpeg.FS('unlink', 'video.mp4');

ffmpeg.setLogging(true);

ffmpeg.setLogger(({ type, message }) => {
  console.log(type, message);
  /*
   * type can be one of following:
   *
   * info: internal workflow debug messages
   * fferr: ffmpeg native stderr output
   * ffout: ffmpeg native stdout output
   */
});

ffmpeg.setProgress(({ ratio }) => {
  console.log(ratio);
  /*
   * ratio is a float number between 0 to 1. 0 到 1之间的数字
   */
});

(async () => {
  const data = await fetchFile('https://github.com/ffmpegwasm/testdata/raw/master/video-3s.avi');
  /*
   * data will be in Uint8Array format
   */
})();

const ffmpeg = createFFmpeg({
  corePath: 'https://unpkg.com/@ffmpeg/core@0.8.5/dist/ffmpeg-core.js',
})

const ffmpeg = createFFmpeg({
  corePath: 'ffmpeg-core.js',
})

const ffmpeg = createFFmpeg({
  log: true,
})

ffmpeg.setLogger(({ type, message }) => {
  console.log('🚀🚀 ~ message', message);
  console.log('🚀🚀 ~ type', type);
});

const ffmpeg = createFFmpeg({
  corePath: 'ffmpeg-core.js',
  log: false,
  logger: ({ type, message }) => {
    console.log('🚀🚀 ~ message', message);
    console.log('🚀🚀 ~ type', type);
  }
})

ffmpeg.setProgress(({ ratio }) => {
  console.log('🚀🚀 ~ ratio', ratio);
});

const ffmpeg = createFFmpeg({
  corePath: 'ffmpeg-core.js',
  log: false,
  progress: ({ ratio }) => {
    console.log('🚀🚀 ~ ratio', ratio);
  }
})

devServer: {
    headers: {
      "Cross-Origin-Opener-Policy": "same-origin",
      "Cross-Origin-Embedder-Policy": "require-corp",
    },
}

 plugins: [
      vue(), 
      vueJsx(),
      {
        name: 'configure-response-headers',
        configureServer: server => {
          server.app.use('/node_modules/',(_req, res, next) => {
            res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
            res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
            next();
          });
        }
      }
    ],

add_header Cross-Origin-Opener-Policy same-origin; 
add_header Cross-Origin-Embedder-Policy require-corp;

<template>
  <div style="width:100%; height:100%; background-color: #DAE4E4;padding:50px">
    <upload-btn @before-upload="beforeUpload"></upload-btn>
    <video-ref :video-file-url="videoFileUrl"></video-ref>
  </div>
</template>

<script>

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg'
import videoRef from '../../components/video/Video.vue'
import UploadBtn from '../../components/video/UploadBtn.vue'

export default {
  data() {
    return {
      ffmpeg: {},
      videoFileUrl: "",
    }
  },
  components: {
    videoRef,
    UploadBtn
  },
  computed: {},
  methods: {
    // 页面初始化逻辑
    async init() {
      await this.initFfmpeg()
    },
    // 初始化 ffmpeg 功能
    async initFfmpeg() {
      this.ffmpeg = createFFmpeg({
        corePath: 'ffmpeg-core.js',
        log: true,
      })
    },
    // 上传文件前的钩子
    async beforeUpload(file) {
      console.log('🚀🚀 beforeUpload ~ file', file);
      await this.ffmpeg.load();
      await this.getVideoFileUrl(file)
    },
    async getVideoFileUrl(file) {
      // 获取资源文件
      const result = await fetchFile(file)
      console.log('🚀🚀 ~ result', result);
      // 对于 ffmpeg.wasm 的输入/输出文件，需要先将它们保存到 MEMFS 以便 ffmpeg.wasm 能够使用它们
      this.ffmpeg.FS('writeFile', `${file.name}`, result);
      await this.ffmpeg.run('-i', `${file.name}`, '-acodec', 'aac', '-vcodec', 'libx264', '-y', `${file.name.split('.')[0]}.mp4`);
      // 在内存中读取文件
      const data = this.ffmpeg.FS('readFile', `${file.name.split('.')[0]}.mp4`);
      // 获取内存中的播放地址
      this.videoFileUrl = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }))
      console.log('🚀🚀 ~  this.videoFileUrl', this.videoFileUrl);
    }
  },
  async mounted() {
    // 页面初始化逻辑
    await this.init()
  }
}
</script>

<template>
  <div class="upload-btn">
    <i-upload :before-upload="beforeUpload"
               :show-upload-list="false"
               action=""
               name="file"
               accept="video/*">
      <i-button>点击上传视频</i-button>
      <br>
      <br>
    </i-upload>
  </div>
</template>

<script>
export default {
  methods: {
    // 上传文件前的钩子
    async beforeUpload(file) {
      this.$emit("before-upload", file)
    },
  }
}
</script>

// 播放视频我们采用 `HTML5` 原生标签 `video`。
<template>
  <div class="video-box">
    <video id="videoRef"
           ref="videoRef"
           v-if="videoFileUrl"
           class="videoRef"
           controls>
      <source :src="videoFileUrl"
              type="video/mp4" />
    </video>
  </div>
</template>

<script>
export default {
  props: {
    videoFileUrl: {
      default: () => (''),
    },
  },
}
</script>