FFmpeg.js:供浏览器使用的由WebAssembly驱动的FFmpeg接口
欢迎使用 FFmpeg.js , 这是一个创新的库, 它提供一个Web Assembly的界面,用于在浏览器中使用 FFmpeg 。 🌐💡
演示
为什么是FFmpeg.js?
这个项目的灵感来自 ffmpeg.wasm (英语)但是,我们注意到一些缺陷,这些缺陷可能限制其适用于更广泛的用途:
- 该项目利用了FFmpeg的GPL3建造,限制了其在商业项目中的使用。 🚫💼
- 它由JavaScript所开发,因此提供了有限的打字,限制了更严格的静态类型检查的潜力. ❗⌨️
- 缺乏面向对象的写出FFmpeg命令的方法. 🔄📝
拯救队的FFmpeg.js!
解决上述问题,FFmpeg.js:
- 为FFmpeg提供LGPL构建,使其在商业上更加可行,退出 https://ffmpeg.org/legal.html (中文(简体) ) 更详细
- 被写入了TypeScript,引入了静态类型检查以提高代码可靠性. 👌🔍
- 为写入 FFmpeg 命令提供面向对象的界面,灵感来自
fluent-ffmpeg更方便程序员。 🎯🔄
然而,需要注意的是,截至目前,FFmpeg.js只在Chrome,Firefox和Edge浏览器中运行. 它不支持萨法里或节点
QQ 设置
建立FFmpeg.js是一个微风!
npm i @diffusion-studio/ffmpeg-js
这应安装库. 现在因为ffmpeg.js需要使用 共享对话框 您需要启用 Cross-Origin-Opener-Policy: same-origin 财务报告和审定财务报表 Cross-Origin-Embedder-Policy: require-corp 在服务器侧.
视频
在阴道环境中,您只需将以下内容添加到您 vite.config.js数字 :
...
server: {
...
headers: {
'Cross-Origin-Embedder-Policy': 'require-corp',
'Cross-Origin-Opener-Policy': 'same-origin',
},
},
...
下一个.js
这是一个例子 next.config.js 支持共享箭头缓冲器 :
module.exports = {
async headers() {
return [
{
source: '/',
headers: [
{
key: 'Cross-Origin-Embedder-Policy',
value: 'require-corp',
},
{
key: 'Cross-Origin-Opener-Policy',
value: 'same-origin',
},
],
},
];
},
};
使用量
在您的项目中,你需要启动 ffmpeg 实例.
import { FFmpeg } from '@diffusion-studio/ffmpeg-js';
const ffmpeg = new FFmpeg();
默认这个会拉出一个 LGPLv2.1 兼容构建 从 FFmpeg 从 UNPKG传送网络。 。 。 .
因此,如果你一意孤行地想要运行命令,你需要等待到二进制成功获取,像这样:
ffmpeg.whenReady(async () => {
await ffmpeg.exec(['-help']);
});
这将输出 ffmpeg 帮助尽可能快 .
HINT: 尽管此库旨在为ffmpeg提供一个面向对象的界面, 您仍然可以使用
exec方法.
当处理文件时, 您需要先将其保存到内存文件系统 :
const source = 'https://<path to file>/<filename>.mp4';
// write to file system
await ffmpeg.writeFile('input.mp4', source);
// convert mp4 to avi
await ffmpeg.exec(['-i', 'input.mp4', 'output.avi']);
// read from file system
const result: Uint8Array = ffmpeg.readFile('output.avi');
// free memory
ffmpeg.deleteFile('input.mp4');
ffmpeg.deleteFile('output.avi');
让我们来看看,你会如何得到 同样的结果 面向对象 就是这样.
const source = 'https://<path to file>/<filename>.mp4';
const result: Uint8Array = ffmpeg
.input({ source })
.ouput({ format: 'avi' })
.export();
如果你想知道, 是的, 记忆是为你管理.
实例
请看看这些测试
- https://github.com/diffusion-studio/ffmpeg-js/blob/main/examples/src/main.ts 互联网档案馆的存檔,存档日期2014-12-21
- https://github.com/diffusion-studio/ffmpeg-js/blob/main/tests/export.spec.ts
- https://github.com/diffusion-studio/ffmpeg-js/blob/main/tests/commands.spec.ts
* 限制
- Web组装仅限于 2GB
- 在单位测试中难以处理,也许最好还是去嘲笑FFmpeg类,把测试留给我们(这也是好的做法).
- 没有硬件缓冲,使得视频编码/解码相当慢.
• 配置
目前已有两种不同的FFmpeg配置,在路上还有更多.
lgpl-base(默认) : 它是一个没有任何外部库的FFmpeg的编译,用于音频和视频的muxing/demuxing和音频编码/解码. 它符合v2.1LGPL,因此可用于商业项目.gpl-extended: 这是 @ffmpeg/ core (中文(简体) ) 配置, 已经用--enable-gpl财务报告和审定财务报表--enable-nonfree因此,只有在整个密码库可以公开使用的情况下,才能用于商业项目。 它支持流行的快递编码器,例如:h264/h265/vp9包括:.
关于所支持的解码器和粘合器的更多信息,运行以下命令:
console.log(await ffmpeg.codecs());
console.log(await ffmpeg.formats());
这样您就可以切换配置 :
import {
FFmpeg,
FFmpegConfigurationGPLExtended,
} from '@diffusion-studio/ffmpeg-js';
// FFmpegConfigurationGPLExtended will add the type extensions
const ffmpeg = new FFmpeg<FFmpegConfigurationGPLExtended>({
config: 'gpl-extended',
});
就这样!
我们相信,FFmpeg.js将会在浏览器中大大地精简您与FFmpeg的互动,提供更高效和高效的编码体验. 快乐的编码
分会
本案文所载资料仅供参考。 它并不打算作为GPL和LGPL许可证使用的全面指南,也没有提供法律咨询。 有关软件许可证的法律和条例可能十分复杂,并可能随时间而变化。 这种信息的作者和提供者不能对与您使用这种信息有关的任何错误、遗漏或结果负责.
虽然已尽一切努力确保本文提供的信息在公布之日是准确的,但没有保证其货币或适用于你的具体情况。 您不应依赖这些信息来替代与法律专业人士或其他主管顾问的磋商。 在做出可能涉及法律问题的决定之前,必须先征求熟悉你具体情况的合格专业人员的意见.