Open6

ffmpeg.wasmをブラウザで使う

maruwaremaruware

index.html に 以下追加

<script src="//cdn.jsdelivr.net/npm/@ffmpeg/ffmpeg@0.10.1/dist/ffmpeg.min.js"></script>
maruwaremaruware

型が欲しいので @ffmpeg/mpeg から持ってきてみる。

yarn add --dev @ffmpeg/ffmpeg

import type { createFFmpeg, fetchFile } from "@ffmpeg/ffmpeg";

declare global {
  interface File {
    path: string;
  }

  interface Window {
    FFmpeg: {
      createFFmpeg: typeof createFFmpeg;
      fetchFile: typeof fetchFile;
    };
  }
}

console.log(window.FFmpeg.createFFmpeg())

をしてみてランタイムで動きつつ型も取れてるので良さそう

maruwaremaruware

ViteのdevサーバーでheaderつけないとSharedArrayBuffer が使えないのでセットする。

vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    {
      name: "configure-response-headers",
      configureServer: (server) => {
        server.middlewares.use((_req, res, next) => {
          res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
          res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
          next();
        });
      },
    },
  ],
});
maruwaremaruware

headerつけた影響でCDNからのjsロードができなくなるのでローカルに配置する。