Release - v12.11 | v0.12.7

apps/nextjs-app/app/Home.tsx

@@ -1,42 +1,52 @@
-'use client'
+"use client";
 
-import { FFmpeg } from '@ffmpeg/ffmpeg'
-import { fetchFile, toBlobURL } from '@ffmpeg/util'
-import { useRef, useState } from 'react'
+import { FFmpeg } from "@ffmpeg/ffmpeg";
+import { fetchFile, toBlobURL } from "@ffmpeg/util";
+import { useRef, useState } from "react";
 
 export default function Home() {
-  const [loaded, setLoaded] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-  const ffmpegRef = useRef(new FFmpeg())
-  const videoRef = useRef<HTMLVideoElement | null>(null)
-  const messageRef = useRef<HTMLParagraphElement | null>(null)
+  const [loaded, setLoaded] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const ffmpegRef = useRef(new FFmpeg());
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const messageRef = useRef<HTMLParagraphElement | null>(null);
 
   const load = async () => {
-    setIsLoading(true)
-    const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/umd'
-    const ffmpeg = ffmpegRef.current
-    ffmpeg.on('log', ({ message }) => {
-      if (messageRef.current) messageRef.current.innerHTML = message
-    })
+    setIsLoading(true);
+    const baseURL = "https://unpkg.com/@ffmpeg/core@0.12.7/dist/umd";
+    const ffmpeg = ffmpegRef.current;
+    ffmpeg.on("log", ({ message }) => {
+      if (messageRef.current) messageRef.current.innerHTML = message;
+    });
     // toBlobURL is used to bypass CORS issue, urls with the same
     // domain can be used directly.
     await ffmpeg.load({
-      coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
-      wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm')
-    })
-    setLoaded(true)
-    setIsLoading(false)
-  }
+      coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
+      wasmURL: await toBlobURL(
+        `${baseURL}/ffmpeg-core.wasm`,
+        "application/wasm"
+      ),
+    });
+    setLoaded(true);
+    setIsLoading(false);
+  };
 
   const transcode = async () => {
-    const ffmpeg = ffmpegRef.current
+    const ffmpeg = ffmpegRef.current;
     // u can use 'https://ffmpegwasm.netlify.app/video/video-15s.avi' to download the video to public folder for testing
-    await ffmpeg.writeFile('input.avi', await fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/video-15s.avi'))
-    await ffmpeg.exec(['-i', 'input.avi', 'output.mp4'])
-    const data = (await ffmpeg.readFile('output.mp4')) as any
+    await ffmpeg.writeFile(
+      "input.avi",
+      await fetchFile(
+        "https://raw.githubusercontent.com/ffmpegwasm/testdata/master/video-15s.avi"
+      )
+    );
+    await ffmpeg.exec(["-i", "input.avi", "output.mp4"]);
+    const data = (await ffmpeg.readFile("output.mp4")) as any;
     if (videoRef.current)
-      videoRef.current.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }))
-  }
+      videoRef.current.src = URL.createObjectURL(
+        new Blob([data.buffer], { type: "video/mp4" })
+      );
+  };
 
   return loaded ? (
     <div className="fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]">
@@ -72,5 +82,5 @@ export default function Home() {
         </span>
       )}
     </button>
-  )
+  );
 }