dumtruck/konowebcodecs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Release - v12.11 | v0.12.7

Browse Source
This commit is contained in:
Lucas Gelfond 2024-12-23 21:21:19 -08:00
parent c02059de82
commit 0d121269d7
10 changed files with 79 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
apps/angular-app/src/app/app.component.ts
View File

@ -4,7 +4,7 @@ import { RouterOutlet } from '@angular/router';
import { FFmpeg } from '@ffmpeg/ffmpeg'; import { FFmpeg } from '@ffmpeg/ffmpeg';
import { fetchFile, toBlobURL } from '@ffmpeg/util'; import { fetchFile, toBlobURL } from '@ffmpeg/util';
const baseURL = "https://unpkg.com/@ffmpeg/core-mt@0.12.6/dist/esm"; const baseURL = 'https://unpkg.com/@ffmpeg/core-mt@0.12.7/dist/esm';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
@ -16,33 +16,34 @@ const baseURL = "https://unpkg.com/@ffmpeg/core-mt@0.12.6/dist/esm";
export class AppComponent { export class AppComponent {
loaded = false; loaded = false;
ffmpeg = new FFmpeg(); ffmpeg = new FFmpeg();
videoURL = ""; videoURL = '';
message = ""; message = '';
async load() { async load() {
this.ffmpeg.on("log", ({ message }) => { this.ffmpeg.on('log', ({ message }) => {
this.message = message; this.message = message;
}); });
await this.ffmpeg.load({ await this.ffmpeg.load({
coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"), coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
wasmURL: await toBlobURL( wasmURL: await toBlobURL(
`${baseURL}/ffmpeg-core.wasm`, `${baseURL}/ffmpeg-core.wasm`,
"application/wasm" 'application/wasm'
), ),
workerURL: await toBlobURL( workerURL: await toBlobURL(
`${baseURL}/ffmpeg-core.worker.js`, `${baseURL}/ffmpeg-core.worker.js`,
"text/javascript" 'text/javascript'
), ),
}); });
this.loaded = true; this.loaded = true;
}; }
async transcode() { async transcode() {
const videoURL = "https://raw.githubusercontent.com/ffmpegwasm/testdata/master/video-15s.avi"; const videoURL =
await this.ffmpeg.writeFile("input.avi", await fetchFile(videoURL)); 'https://raw.githubusercontent.com/ffmpegwasm/testdata/master/video-15s.avi';
await this.ffmpeg.exec(["-i", "input.avi", "output.mp4"]); await this.ffmpeg.writeFile('input.avi', await fetchFile(videoURL));
await this.ffmpeg.exec(['-i', 'input.avi', 'output.mp4']);
const fileData = await this.ffmpeg.readFile('output.mp4'); const fileData = await this.ffmpeg.readFile('output.mp4');
const data = new Uint8Array(fileData as ArrayBuffer); const data = new Uint8Array(fileData as ArrayBuffer);
this.videoURL = URL.createObjectURL( this.videoURL = URL.createObjectURL(
new Blob([data.buffer], { type: 'video/mp4' }) new Blob([data.buffer], { type: 'video/mp4' })
); );
}; }
} }

66
apps/nextjs-app/app/Home.tsx
View File

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

15
apps/react-vite-app/src/App.tsx
View File

@ -5,11 +5,11 @@ import { toBlobURL, fetchFile } from "@ffmpeg/util";
function App() { function App() {
const [loaded, setLoaded] = useState(false); const [loaded, setLoaded] = useState(false);
const ffmpegRef = useRef(new FFmpeg()); const ffmpegRef = useRef(new FFmpeg());
const videoRef = useRef<HTMLVideoElement | null>(null) const videoRef = useRef<HTMLVideoElement | null>(null);
const messageRef = useRef<HTMLParagraphElement | null>(null) const messageRef = useRef<HTMLParagraphElement | null>(null);
const load = async () => { const load = async () => {
const baseURL = "https://unpkg.com/@ffmpeg/core-mt@0.12.6/dist/esm"; const baseURL = "https://unpkg.com/@ffmpeg/core-mt@0.12.7/dist/esm";
const ffmpeg = ffmpegRef.current; const ffmpeg = ffmpegRef.current;
ffmpeg.on("log", ({ message }) => { ffmpeg.on("log", ({ message }) => {
if (messageRef.current) messageRef.current.innerHTML = message; if (messageRef.current) messageRef.current.innerHTML = message;
@ -31,16 +31,17 @@ function App() {
}; };
const transcode = async () => { const transcode = async () => {
const videoURL = "https://raw.githubusercontent.com/ffmpegwasm/testdata/master/video-15s.avi"; const videoURL =
"https://raw.githubusercontent.com/ffmpegwasm/testdata/master/video-15s.avi";
const ffmpeg = ffmpegRef.current; const ffmpeg = ffmpegRef.current;
await ffmpeg.writeFile("input.avi", await fetchFile(videoURL)); await ffmpeg.writeFile("input.avi", await fetchFile(videoURL));
await ffmpeg.exec(["-i", "input.avi", "output.mp4"]); await ffmpeg.exec(["-i", "input.avi", "output.mp4"]);
const fileData = await ffmpeg.readFile('output.mp4'); const fileData = await ffmpeg.readFile("output.mp4");
const data = new Uint8Array(fileData as ArrayBuffer); const data = new Uint8Array(fileData as ArrayBuffer);
if (videoRef.current) { if (videoRef.current) {
videoRef.current.src = URL.createObjectURL( videoRef.current.src = URL.createObjectURL(
new Blob([data.buffer], { type: 'video/mp4' }) new Blob([data.buffer], { type: "video/mp4" })
) );
} }
}; };

2
apps/vue-vite-app/src/components/FFmpegDemo.vue
View File

@ -11,7 +11,7 @@ import type { LogEvent } from '@ffmpeg/ffmpeg/dist/esm/types'
import { fetchFile, toBlobURL } from '@ffmpeg/util' import { fetchFile, toBlobURL } from '@ffmpeg/util'
import { defineComponent, ref } from 'vue' import { defineComponent, ref } from 'vue'
const baseURL = 'https://unpkg.com/@ffmpeg/core-mt@0.12.6/dist/esm' const baseURL = 'https://unpkg.com/@ffmpeg/core-mt@0.12.7/dist/esm'
const videoURL = 'https://raw.githubusercontent.com/ffmpegwasm/testdata/master/video-15s.avi' const videoURL = 'https://raw.githubusercontent.com/ffmpegwasm/testdata/master/video-15s.avi'
export default defineComponent({ export default defineComponent({

18
apps/website/docs/getting-started/usage.md
View File

@ -11,7 +11,7 @@ It is recommended to read [Overview](/docs/overview) first.
:::caution :::caution
If you are a [vite](https://vitejs.dev/) user, use `esm` in **baseURL** instead of `umd`: If you are a [vite](https://vitejs.dev/) user, use `esm` in **baseURL** instead of `umd`:
~~https://unpkg.com/@ffmpeg/core@0.12.6/dist/umd~~ => https://unpkg.com/@ffmpeg/core@0.12.6/dist/esm ~~https://unpkg.com/@ffmpeg/core@0.12.7/dist/umd~~ => https://unpkg.com/@ffmpeg/core@0.12.7/dist/esm
::: :::
```jsx live ```jsx live
@ -24,7 +24,7 @@ function() {
const messageRef = useRef(null); const messageRef = useRef(null);
const load = async () => { const load = async () => {
const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/umd' const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.7/dist/umd'
const ffmpeg = ffmpegRef.current; const ffmpeg = ffmpegRef.current;
ffmpeg.on('log', ({ message }) => { ffmpeg.on('log', ({ message }) => {
messageRef.current.innerHTML = message; messageRef.current.innerHTML = message;
@ -81,7 +81,7 @@ function() {
const messageRef = useRef(null); const messageRef = useRef(null);
const load = async () => { const load = async () => {
const baseURL = 'https://unpkg.com/@ffmpeg/core-mt@0.12.6/dist/umd' const baseURL = 'https://unpkg.com/@ffmpeg/core-mt@0.12.7/dist/umd'
const ffmpeg = ffmpegRef.current; const ffmpeg = ffmpegRef.current;
ffmpeg.on('log', ({ message }) => { ffmpeg.on('log', ({ message }) => {
messageRef.current.innerHTML = message; messageRef.current.innerHTML = message;
@ -134,7 +134,7 @@ function() {
const messageRef = useRef(null); const messageRef = useRef(null);
const load = async () => { const load = async () => {
const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/umd' const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.7/dist/umd'
const ffmpeg = ffmpegRef.current; const ffmpeg = ffmpegRef.current;
ffmpeg.on('log', ({ message }) => { ffmpeg.on('log', ({ message }) => {
messageRef.current.innerHTML = message; messageRef.current.innerHTML = message;
@ -192,7 +192,7 @@ function() {
const messageRef = useRef(null); const messageRef = useRef(null);
const load = async () => { const load = async () => {
const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/umd' const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.7/dist/umd'
const ffmpeg = ffmpegRef.current; const ffmpeg = ffmpegRef.current;
// Listen to progress event instead of log. // Listen to progress event instead of log.
ffmpeg.on('progress', ({ progress, time }) => { ffmpeg.on('progress', ({ progress, time }) => {
@ -243,7 +243,7 @@ function() {
const messageRef = useRef(null); const messageRef = useRef(null);
const load = async () => { const load = async () => {
const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/umd' const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.7/dist/umd'
const ffmpeg = ffmpegRef.current; const ffmpeg = ffmpegRef.current;
ffmpeg.on('log', ({ message }) => { ffmpeg.on('log', ({ message }) => {
messageRef.current.innerHTML = message; messageRef.current.innerHTML = message;
@ -313,7 +313,7 @@ function() {
const messageRef = useRef(null); const messageRef = useRef(null);
const load = async () => { const load = async () => {
const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/umd' const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.7/dist/umd'
const ffmpeg = ffmpegRef.current; const ffmpeg = ffmpegRef.current;
ffmpeg.on('log', ({ message }) => { ffmpeg.on('log', ({ message }) => {
messageRef.current.innerHTML = message; messageRef.current.innerHTML = message;
@ -372,7 +372,7 @@ function() {
const messageRef = useRef(null); const messageRef = useRef(null);
const load = async () => { const load = async () => {
const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/umd' const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.7/dist/umd'
const ffmpeg = ffmpegRef.current; const ffmpeg = ffmpegRef.current;
ffmpeg.on('log', ({ message }) => { ffmpeg.on('log', ({ message }) => {
messageRef.current.innerHTML = message; messageRef.current.innerHTML = message;
@ -425,6 +425,7 @@ function() {
:::note :::note
Required: Required:
- @ffmpeg/ffmpeg@0.12.7+ - @ffmpeg/ffmpeg@0.12.7+
- @ffmpeg/core@0.12.4+ - @ffmpeg/core@0.12.4+
::: :::
@ -435,6 +436,7 @@ Please Check this PR: [Add WORKERFS support](https://github.com/ffmpegwasm/ffmpe
:::note :::note
Required: Required:
- @ffmpeg/ffmpeg@0.12.7+ - @ffmpeg/ffmpeg@0.12.7+
- @ffmpeg/core@0.12.4+ - @ffmpeg/core@0.12.4+
::: :::

6
package-lock.json generated
View File

@ -28702,7 +28702,7 @@
}, },
"packages/core": { "packages/core": {
"name": "@ffmpeg/core", "name": "@ffmpeg/core",
"version": "0.12.6", "version": "0.12.7",
"license": "GPL-2.0-or-later", "license": "GPL-2.0-or-later",
"engines": { "engines": {
"node": ">=16.x" "node": ">=16.x"
@ -28710,7 +28710,7 @@
}, },
"packages/core-mt": { "packages/core-mt": {
"name": "@ffmpeg/core-mt", "name": "@ffmpeg/core-mt",
"version": "0.12.6", "version": "0.12.7",
"license": "GPL-2.0-or-later", "license": "GPL-2.0-or-later",
"engines": { "engines": {
"node": ">=16.x" "node": ">=16.x"
@ -28718,7 +28718,7 @@
}, },
"packages/ffmpeg": { "packages/ffmpeg": {
"name": "@ffmpeg/ffmpeg", "name": "@ffmpeg/ffmpeg",
"version": "0.12.10", "version": "0.12.11",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@ffmpeg/types": "^0.12.2" "@ffmpeg/types": "^0.12.2"

2
packages/core-mt/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ffmpeg/core-mt", "name": "@ffmpeg/core-mt",
"version": "0.12.6", "version": "0.12.7",
"description": "FFmpeg WebAssembly version (multi thread)", "description": "FFmpeg WebAssembly version (multi thread)",
"main": "./dist/umd/ffmpeg-core.js", "main": "./dist/umd/ffmpeg-core.js",
"exports": { "exports": {

2
packages/core/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ffmpeg/core", "name": "@ffmpeg/core",
"version": "0.12.6", "version": "0.12.7",
"description": "FFmpeg WebAssembly version (single thread)", "description": "FFmpeg WebAssembly version (single thread)",
"main": "./dist/umd/ffmpeg-core.js", "main": "./dist/umd/ffmpeg-core.js",
"exports": { "exports": {

2
packages/ffmpeg/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ffmpeg/ffmpeg", "name": "@ffmpeg/ffmpeg",
"version": "0.12.10", "version": "0.12.11",
"description": "FFmpeg WebAssembly version for browser", "description": "FFmpeg WebAssembly version for browser",
"main": "./dist/umd/ffmpeg.js", "main": "./dist/umd/ffmpeg.js",
"types": "./dist/esm/index.d.ts", "types": "./dist/esm/index.d.ts",

2
packages/ffmpeg/src/const.ts
View File

@ -1,7 +1,7 @@
export const MIME_TYPE_JAVASCRIPT = "text/javascript"; export const MIME_TYPE_JAVASCRIPT = "text/javascript";
export const MIME_TYPE_WASM = "application/wasm"; export const MIME_TYPE_WASM = "application/wasm";
export const CORE_VERSION = "0.12.6"; export const CORE_VERSION = "0.12.7";
export const CORE_URL = `https://unpkg.com/@ffmpeg/core@${CORE_VERSION}/dist/umd/ffmpeg-core.js`; export const CORE_URL = `https://unpkg.com/@ffmpeg/core@${CORE_VERSION}/dist/umd/ffmpeg-core.js`;
export enum FFMessageType { export enum FFMessageType {