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.

Update: this now sits at the end of the stack, with every package's version
bumped to 0.13.0 together, so nothing earlier points at an unreleased version.

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@0.12.10/dist/esm';
+const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.13.0/dist/esm';
 
 @Component({
   selector: 'app-root',

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@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;

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@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';
 

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

@@ -6,7 +6,7 @@
 
 	let videoEl: HTMLVideoElement;
 
-	const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@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';

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@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({

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;
@@ -133,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;
@@ -191,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 }) => {
@@ -242,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;
@@ -312,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;
@@ -371,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

apps/website/src/components/Playground/const.ts

@@ -1,4 +1,4 @@
-export const CORE_VERSION = "0.12.10";
+export const CORE_VERSION = "0.13.0";
 
 export const CORE_URL = `https://cdn.jsdelivr.net/npm/@ffmpeg/core@${CORE_VERSION}/dist/umd/ffmpeg-core.js`;
 export const CORE_MT_URL = `https://cdn.jsdelivr.net/npm/@ffmpeg/core-mt@${CORE_VERSION}/dist/umd/ffmpeg-core.js`;
@@ -8,7 +8,6 @@ export const CORE_SIZE = {
   [`https://cdn.jsdelivr.net/npm/@ffmpeg/core@${CORE_VERSION}/dist/umd/ffmpeg-core.wasm`]: 32129114,
   [`https://cdn.jsdelivr.net/npm/@ffmpeg/core-mt@${CORE_VERSION}/dist/umd/ffmpeg-core.js`]: 132680,
   [`https://cdn.jsdelivr.net/npm/@ffmpeg/core-mt@${CORE_VERSION}/dist/umd/ffmpeg-core.wasm`]: 32609891,
-  [`https://cdn.jsdelivr.net/npm/@ffmpeg/core-mt@${CORE_VERSION}/dist/umd/ffmpeg-core.worker.js`]: 2915,
 };
 
 export const SAMPLE_FILES = {