Docs and example apps for 0.13

The example apps load @ffmpeg/core 0.13 (single-threaded, no cross-origin
isolation needed); none of them passes workerURL any more, as neither core has
ffmpeg-core.worker.js. The migration guide covers 0.13, and the core
contribution guide the FFmpeg patches and the single-threaded core's green
threads.

Author: lucasgelfond

apps/angular-app/src/app/app.component.ts

@@ -4,7 +4,7 @@ import { RouterOutlet } from '@angular/router';
 import { FFmpeg } from '@ffmpeg/ffmpeg';
 import { fetchFile, toBlobURL } from '@ffmpeg/util';
 
-const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core-mt@0.12.10/dist/esm';
+const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.13.0/dist/esm';
 
 @Component({
   selector: 'app-root',
@@ -28,10 +28,6 @@ export class AppComponent {
         `${baseURL}/ffmpeg-core.wasm`,
         'application/wasm',
       ),
-      workerURL: await toBlobURL(
-        `${baseURL}/ffmpeg-core.worker.js`,
-        'text/javascript',
-      ),
     });
     this.loaded = true;
   }

apps/nextjs-app/app/Home.tsx

@@ -13,7 +13,7 @@ export default function Home() {
 
   const load = async () => {
     setIsLoading(true);
-    const baseURL = "https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/umd";
+    const baseURL = "https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.13.0/dist/umd";
     const ffmpeg = ffmpegRef.current;
     ffmpeg.on("log", ({ message }) => {
       if (messageRef.current) messageRef.current.innerHTML = message;

apps/react-vite-app/src/App.tsx

@@ -9,7 +9,7 @@ function App() {
   const messageRef = useRef<HTMLParagraphElement | null>(null);
 
   const load = async () => {
-    const baseURL = "https://cdn.jsdelivr.net/npm/@ffmpeg/core-mt@0.12.10/dist/esm";
+    const baseURL = "https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.13.0/dist/esm";
     const ffmpeg = ffmpegRef.current;
     ffmpeg.on("log", ({ message }) => {
       if (messageRef.current) messageRef.current.innerHTML = message;
@@ -22,10 +22,6 @@ function App() {
         `${baseURL}/ffmpeg-core.wasm`,
         "application/wasm"
       ),
-      workerURL: await toBlobURL(
-        `${baseURL}/ffmpeg-core.worker.js`,
-        "text/javascript"
-      ),
     });
     setLoaded(true);
   };

apps/solidstart-app/src/entry-server.tsx

@@ -1,14 +1,10 @@
 // @refresh reload
 import { createHandler, StartServer } from '@solidjs/start/server';
-import { HttpHeader, HttpStatusCode } from '@solidjs/start';
 
 export default createHandler(() => (
   <StartServer
     document={({ assets, children, scripts }) => (
       <html lang='en'>
-        {/*necessary because ffmpeg library uses sharedArrayBuffer */}
-        <HttpHeader name='Cross-Origin-Opener-Policy' value='same-origin' />
-        <HttpHeader name='Cross-Origin-Embedder-Policy' value='require-corp' />
         <head>
           <meta charset='utf-8' />
           <meta name='viewport' content='width=device-width, initial-scale=1' />

apps/solidstart-app/src/routes/index.tsx

@@ -2,7 +2,7 @@ import { FFmpeg } from '@ffmpeg/ffmpeg';
 import { fetchFile, toBlobURL } from '@ffmpeg/util';
 import { createSignal, Show } from 'solid-js';
 
-const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core-mt@0.12.10/dist/esm';
+const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.13.0/dist/esm';
 const videoURL =
   'https://raw.githubusercontent.com/ffmpegwasm/testdata/master/video-15s.avi';
 
@@ -28,10 +28,6 @@ export default function Home() {
         `${baseURL}/ffmpeg-core.wasm`,
         'application/wasm'
       ),
-      workerURL: await toBlobURL(
-        `${baseURL}/ffmpeg-core.worker.js`,
-        'text/javascript'
-      ),
     });
     setLoaded(true);
     setIsLoading(false);

apps/sveltekit-app/src/lib/FFmpegDemo.svelte

@@ -6,7 +6,7 @@
 
 	let videoEl: HTMLVideoElement;
 
-	const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core-mt@0.12.10/dist/esm';
+	const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.13.0/dist/esm';
 	const videoURL = 'https://raw.githubusercontent.com/ffmpegwasm/testdata/master/video-15s.avi';
 
 	let message = 'Click Start to Transcode';
@@ -20,8 +20,7 @@
 		});
 		await ffmpeg.load({
 			coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
-			wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
-			workerURL: await toBlobURL(`${baseURL}/ffmpeg-core.worker.js`, 'text/javascript')
+			wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm')
 		});
 		message = 'Start transcoding';
 		await ffmpeg.writeFile('test.avi', await fetchFile(videoURL));

apps/vue-vite-app/src/components/FFmpegDemo.vue

@@ -11,7 +11,7 @@ import type { LogEvent } from '@ffmpeg/ffmpeg/dist/esm/types'
 import { fetchFile, toBlobURL } from '@ffmpeg/util'
 import { defineComponent, ref } from 'vue'
 
-const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core-mt@0.12.10/dist/esm'
+const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.13.0/dist/esm'
 const videoURL = 'https://raw.githubusercontent.com/ffmpegwasm/testdata/master/video-15s.avi'
 
 export default defineComponent({
@@ -28,8 +28,7 @@ export default defineComponent({
       })
       await ffmpeg.load({
         coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
-        wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
-        workerURL: await toBlobURL(`${baseURL}/ffmpeg-core.worker.js`, 'text/javascript')
+        wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm')
       })
       message.value = 'Start transcoding'
       await ffmpeg.writeFile('test.avi', await fetchFile(videoURL))

apps/website/docs/contribution/core.md

@@ -42,6 +42,22 @@ $ make prd-mt
 
 The output file locates at **/packages/core** or **/packages/core-mt**.
 
+## Changes to FFmpeg
+
+ffmpeg.wasm builds FFmpeg at the tag in `FFMPEG_VERSION` (Dockerfile) with the
+patches in `patches/ffmpeg`, one per change. To change one, or add one:
+
+```bash
+$ git clone --branch n9.0.2 https://github.com/FFmpeg/FFmpeg && cd FFmpeg
+$ git am ../ffmpeg.wasm/patches/ffmpeg/*.patch
+# edit, commit
+$ git format-patch --zero-commit --no-signature -o ../ffmpeg.wasm/patches/ffmpeg n9.0.2
+```
+
+FFmpeg's command line tools need threads. `@ffmpeg/core-mt` uses real
+threads (Web Workers and SharedArrayBuffer); `@ffmpeg/core` runs them one at a
+time on a single thread with the cooperative pthreads in `src/green`.
+
 ## Custom Build / Reduce Build Size
 
 You can customize your build to include only the libraries you need, which can significantly reduce the final build size. This is done by modifying the `Dockerfile`.

apps/website/docs/getting-started/usage.md

@@ -11,7 +11,7 @@ It is recommended to read [Overview](/docs/overview) first.
 :::caution
 If you are a [vite](https://vitejs.dev/) user, use `esm` in **baseURL** instead of `umd`:
 
-~~https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/umd~~ => https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/esm
+~~https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.13.0/dist/umd~~ => https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.13.0/dist/esm
 :::
 
 ```jsx live
@@ -24,7 +24,7 @@ function() {
     const messageRef = useRef(null);
 
     const load = async () => {
-        const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/umd'
+        const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.13.0/dist/umd'
         const ffmpeg = ffmpegRef.current;
         ffmpeg.on('log', ({ message }) => {
             messageRef.current.innerHTML = message;
@@ -81,7 +81,7 @@ function() {
     const messageRef = useRef(null);
 
     const load = async () => {
-        const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core-mt@0.12.10/dist/umd'
+        const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core-mt@0.13.0/dist/umd'
         const ffmpeg = ffmpegRef.current;
         ffmpeg.on('log', ({ message }) => {
             messageRef.current.innerHTML = message;
@@ -92,7 +92,6 @@ function() {
         await ffmpeg.load({
             coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
             wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
-            workerURL: await toBlobURL(`${baseURL}/ffmpeg-core.worker.js`, 'text/javascript'),
         });
         setLoaded(true);
     }
@@ -134,7 +133,7 @@ function() {
     const messageRef = useRef(null);
 
     const load = async () => {
-        const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/umd'
+        const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.13.0/dist/umd'
         const ffmpeg = ffmpegRef.current;
         ffmpeg.on('log', ({ message }) => {
             messageRef.current.innerHTML = message;
@@ -192,7 +191,7 @@ function() {
     const messageRef = useRef(null);
 
     const load = async () => {
-        const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/umd'
+        const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.13.0/dist/umd'
         const ffmpeg = ffmpegRef.current;
         // Listen to progress event instead of log.
         ffmpeg.on('progress', ({ progress, time }) => {
@@ -243,7 +242,7 @@ function() {
     const messageRef = useRef(null);
 
     const load = async () => {
-        const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/umd'
+        const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.13.0/dist/umd'
         const ffmpeg = ffmpegRef.current;
         ffmpeg.on('log', ({ message }) => {
             messageRef.current.innerHTML = message;
@@ -313,7 +312,7 @@ function() {
     const messageRef = useRef(null);
 
     const load = async () => {
-        const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/umd'
+        const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.13.0/dist/umd'
         const ffmpeg = ffmpegRef.current;
         ffmpeg.on('log', ({ message }) => {
             messageRef.current.innerHTML = message;
@@ -372,7 +371,7 @@ function() {
     const messageRef = useRef(null);
 
     const load = async () => {
-        const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/umd'
+        const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.13.0/dist/umd'
         const ffmpeg = ffmpegRef.current;
         ffmpeg.on('log', ({ message }) => {
             messageRef.current.innerHTML = message;

apps/website/docs/migration.md

@@ -7,6 +7,20 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import Paper from '@mui/material/Paper';
 
+# Migrating from 0.12.x to 0.13
+
+- Both cores are FFmpeg 9 (0.12 was FFmpeg 5.1).
+- `@ffmpeg/core` is single-threaded and needs no special headers.
+  `@ffmpeg/core-mt` is faster, but needs a cross-origin isolated page
+  (`Cross-Origin-Opener-Policy: same-origin` and
+  `Cross-Origin-Embedder-Policy: require-corp` or `credentialless`); without
+  it `ffmpeg.load()` rejects with an explanation.
+- There is no `ffmpeg-core.worker.js` any more, and the `workerURL` option of
+  `load()` is ignored.
+- `exec()` and `ffprobe()` return FFmpeg's exit code: `0` on success, `1` on
+  timeout, and otherwise a non-zero value (often a negative error code) instead
+  of always `1`. A command that crashes now rejects instead of resolving.
+
 # Migrating from 0.11.x to 0.12+
 
 As 0.12+ is not backward compatible with 0.11.x, below is a quick mapping