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

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

@ -5,11 +5,11 @@ import { toBlobURL, fetchFile } from "@ffmpeg/util";
function App() {
const [loaded, setLoaded] = useState(false);
const ffmpegRef = useRef(new FFmpeg());
const videoRef = useRef<HTMLVideoElement | null>(null)
const messageRef = useRef<HTMLParagraphElement | null>(null)
const videoRef = useRef<HTMLVideoElement | null>(null);
const messageRef = useRef<HTMLParagraphElement | null>(null);
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;
ffmpeg.on("log", ({ message }) => {
if (messageRef.current) messageRef.current.innerHTML = message;
@ -31,16 +31,17 @@ function App() {
};
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;
await ffmpeg.writeFile("input.avi", await fetchFile(videoURL));
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);
if (videoRef.current) {
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 { 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'
export default defineComponent({

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

@ -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://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
@ -24,7 +24,7 @@ function() {
const messageRef = useRef(null);
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;
ffmpeg.on('log', ({ message }) => {
messageRef.current.innerHTML = message;
@ -81,7 +81,7 @@ function() {
const messageRef = useRef(null);
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;
ffmpeg.on('log', ({ message }) => {
messageRef.current.innerHTML = message;
@ -134,7 +134,7 @@ function() {
const messageRef = useRef(null);
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;
ffmpeg.on('log', ({ message }) => {
messageRef.current.innerHTML = message;
@ -192,7 +192,7 @@ function() {
const messageRef = useRef(null);
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;
// Listen to progress event instead of log.
ffmpeg.on('progress', ({ progress, time }) => {
@ -243,7 +243,7 @@ function() {
const messageRef = useRef(null);
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;
ffmpeg.on('log', ({ message }) => {
messageRef.current.innerHTML = message;
@ -313,7 +313,7 @@ function() {
const messageRef = useRef(null);
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;
ffmpeg.on('log', ({ message }) => {
messageRef.current.innerHTML = message;
@ -372,7 +372,7 @@ function() {
const messageRef = useRef(null);
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;
ffmpeg.on('log', ({ message }) => {
messageRef.current.innerHTML = message;
@ -425,9 +425,10 @@ function() {
:::note
Required:
- @ffmpeg/ffmpeg@0.12.7+
- @ffmpeg/core@0.12.4+
:::
:::
Please Check this PR: [Add WORKERFS support](https://github.com/ffmpegwasm/ffmpeg.wasm/pull/581)
@ -435,8 +436,9 @@ Please Check this PR: [Add WORKERFS support](https://github.com/ffmpegwasm/ffmpe
:::note
Required:
- @ffmpeg/ffmpeg@0.12.7+
- @ffmpeg/core@0.12.4+
:::
:::
Please check this PR: [abort signal](https://github.com/ffmpegwasm/ffmpeg.wasm/pull/573)

6
package-lock.json generated
View File

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

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

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

2
packages/core/package.json
View File

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

2
packages/ffmpeg/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@ffmpeg/ffmpeg",
"version": "0.12.10",
"version": "0.12.11",
"description": "FFmpeg WebAssembly version for browser",
"main": "./dist/umd/ffmpeg.js",
"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_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 enum FFMessageType {