@bendyline/squisq-视频反应
在浏览器中直接将 Squisq 文档导出到 MP4 视频或动画 GIF 的回放组件和钩子. MP4使用WebCodecs来进行硬件加速的H.264编码(带有ffmpeg.wasm工人倒计时);GIF使用该紧凑的视频作为ffmpeg的中间体. 原是全球礼仪。 html2canvas提供定型帧捕捉. MP4 携带一个 音频 track (narration + timed media); GIF通过设计默化.
部分 斯奎斯克语Name 单相机.
安装
npm install @bendyline/squisq-video-react @bendyline/squisq-video @bendyline/squisq-react @bendyline/squisq
同伴依赖性 : react 财务报告和审定财务报表 react-dom (v18或v19) (中文(简体) ).
快速启动
导出按钮
import { VideoExportButton } from '@bendyline/squisq-video-react';
function App() {
return <VideoExportButton doc={myDoc} images={imageMap} audio={audioMap} />;
}
要在压缩 GIF 预设中直接打开 :
<VideoExportButton doc={myDoc} defaultConfig={{ outputFormat: 'gif' }} />
GIF 动画导出到文档有标准标题的默认值
标题音轨 。 过 captionMode: 'off' 内 defaultConfig 以禁用它们,或
在导出模式中选择无。 MP4 继续默认取消标题 .
v1.5: (中文(简体) ) playerScript 现在 选项 — 浏览器导出抓取框架
从实时页面 DocPlayer因此,独立捆绑只需要用于
CLI/Playwright式管线. 一个新的 defaultConfig?: Partial<VideoExportConfig>
道具种子模式的初始质量/fps/定向/封装选择.
两个部分都接受 colorScheme="light" | "dark" 所以他们的入口
模式可以匹配主机应用程序; 默认保留 light。主机为
他们自己的主题符号可以通过 uiPalette?: Partial<VideoExportPalette> 改为
覆盖对话框表面、控件、状态颜色和共享主色调
用于出口行动和进度栏。 默认完成的动作是
标签 保存 MP4/GIF 下载 并使用浏览器下载目录.
拥有本地或文件系统访问拾取器的主机 saveOutput 财务报告和审定财务报表
saveActionLabel 提议提供 保存为... 换成流动.
完整导出 Modal
import { VideoExportModal } from '@bendyline/squisq-video-react';
function App() {
const [open, setOpen] = useState(false);
return (
<>
<button onClick={() => setOpen(true)}>Export Video</button>
{open && (
<VideoExportModal
doc={myDoc}
images={imageMap}
audio={audioMap}
onClose={() => setOpen(false)}
/>
)}
</>
);
}
构成部分
| 构成部分 | 说明 |
|---|---|
VideoExportModal | 完整模式 UI — 配置 MP4/ GIF, 标题, 运动, 质量, fps, 和方向 |
VideoExportButton | 通过门户打开导出模式的放入按钮 |
CoverImageExportModal | 将管理过的封面保存为 PNG、 JPEG 或带边框分辨率控制的 WebP |
导入 CoverImageExportModal 从
@bendyline/squisq-video-react/cover-image 当表面只需要覆盖时
捕获。 此切入点不包括MP4/GIF编码器工人图.
钩子
| 钩子 | 说明 |
|---|---|
useVideoExport | 管弦乐导出整个生命周期——抓取,编码,下载 |
useFrameCapture | 挂载隐藏的 DocPlayer , 并通过 html2canvas 以 ImageBitmaps 方式抓取框架 |
导出选项
这个 VideoExportModal 让用户配置 :
- 格式 : MP4 视频或动画 GIF
- 质量 : 草稿,正常或高
- 费斯: 10, 15, 24, 或 30; MP4 默认为 30 fps, GIF 为 10 fps
- 方向 : MP4默认为1920x1080/1080x1920;GIF默认为960x540/540x960
- 说明 : 标准或社会
- 动画转换( T) : 对 MP4 默认启用,对 GIF 默认禁用
管理覆盖继承 squisq-cover-duration 财务报告和审定财务报表 squisq-cover-playback
从文档前题. preroll 在故事框0前添加封面
并更换音频; overlay 将导出期限保持不变,而
在可见的封面下面有故事和音频.
直接使用钩子
自定义导出 UI, 使用 useVideoExport 直接 :
import { useVideoExport } from '@bendyline/squisq-video-react';
function CustomExport({ doc, images, audio }) {
const {
state, // 'idle' | 'preparing' | 'capturing' | 'encoding' | 'complete' | 'error'
progress, // 0–100
outputFormat, // 'mp4' | 'gif'
backend, // 'webcodecs' | 'ffmpeg-wasm' | null
elapsed,
estimatedRemaining,
downloadUrl,
outputBlob, // completed Blob for host-provided save flows
fileSize,
audioIncluded, // whether an audio track was muxed in
audioSkippedReason, // null when the doc had no audio; a string explains a shortfall
error,
startExport,
cancel,
reset,
} = useVideoExport();
return (
<div>
<button
onClick={() =>
startExport(doc, {
outputFormat: 'gif',
images,
animationsEnabled: false,
})
}
>
Export GIF
</button>
{state === 'capturing' && <p>Progress: {progress}%</p>}
{downloadUrl && (
<a href={downloadUrl} download={`document.${outputFormat}`}>
Download
</a>
)}
</div>
);
}
浏览器要求
WebCodecs H.264编码需要Chrome 94+或Edge 94+. 当WebCodecs H.264
不可用,导出会自动返回到ffmpeg。 工人们..
要求 SharedArrayBuffer (即: 横穿欧林-隔离线头
(原始内容存档于2013-10-12). host page. 动画 GIF 总是执行 ffmpeg.wasm 调色板通过, 因此
还要求 SharedArrayBuffer包装的班级工人是安全的.
视频维度必须是 连: 一个奇数 width编号 :height 之前被拒绝
抓取开始而不是四舍五入(H.264's yuv420p 无法编码奇数
gIF导出一个H.264中间体).
ffmpeg.wasm 运行时间资产(需要)
@ffmpeg/core 被固定为运行时间依赖。 主机 必须 发布其无害环境管理
ffmpeg-core.js 财务报告和审定财务报表 ffmpeg-core.wasm 来自同一来源的文件,并传递其
URLs (英语). 每个ffmpeg.wasm路径——编码器倒置,GIF调色板通过,以及
第二级音频混音——当 coreURL 缺席 :
const config = {
ffmpegWasm: {
// Copy from node_modules/@ffmpeg/core/dist/esm/ during your build.
coreURL: '/ffmpeg-core/ffmpeg-core.js',
wasmURL: '/ffmpeg-core/ffmpeg-core.wasm',
workerURL: '/vendor/ffmpeg-core.worker.js', // for a multithread core
},
};
这不仅是建议进行离线/CSP部署——这是必要的.
@ffmpeg/ffmpeg是因为 load() 否则会回到硬码
https://unpkg.com/@ffmpeg/core@<version>/… URL, 默取和执行
未标注的第三方代码 中间出口。 Squisq拒绝触发这一倒计时;a
GIF 导出无 ffmpegWasm 现在立即失败 而不是抓取
每个框. packages/site/vite.config.ts + 键 packages/site/src/ffmpegWasmConfig.ts
是一个完整的Vite实例(包括必须旅行的GPL通知)
与核心文件). 故意使用远程核心,将 URL 命名为
coreURL 当然.
使用 supportsWebCodecs() 在运行时进行探测 :
import {
supportsWebCodecs,
supportsWebCodecsH264,
supportsWebCodecsAac,
} from '@bendyline/squisq-video-react';
if (!supportsWebCodecs()) {
// ffmpeg.wasm fallback will be used (needs Cross-Origin-Isolation)
}
音阶. MP4 音频在可用时通过 WebCodecs AAC 粘接
(单位:千美元)supportsWebCodecsAac()),然后通过ffmpeg. 当跨源隔离是
可用,否则跳过 audioIncluded: false 加一个
audioSkippedReason. 音频问题从不失败导出——视频总是
完成 。 GIF 完全跳过音频准备 . supportsWebCodecsH264(config) 探测特定的编码器
配置; EncoderConfig 财务报告和审定财务报表 FfmpegWasmLoadConfig 也被导出.
RNNOUSE WASM 为虚拟主机( 建议)
Media-edit denoise使用RNnoise,其包裹嵌入了3.6 MB WASM作为基座64.
一个把媒体编辑工人捆绑起来的主持人 和它的主线背面得到的
两次有效载荷。 将插件添加到页面和工人的构造中
一次,作为排放 rnnoise-*.wasm 首次使用时获取 :
// vite.config.ts
import { rnnoiseWasmPlugin } from '@bendyline/squisq-video-react/vite';
export default defineConfig({
plugins: [rnnoiseWasmPlugin()],
worker: { plugins: () => [rnnoiseWasmPlugin()] },
});
它采用ES和IIFE(Vite默认)工人格式,并遵循 base
vite自己的资产 URL 的方式。 获取必须被允许 connect-src。 。 。 .
没有插件,一切仍然与自成一体的模块相通.
音频导出
@bendyline/squisq-video-react/encoder 并导出流媒体音频文件
自动导出音频的主机的编码器和全文件音频组合
(或保存生成的描述) :
import {
createAudioFileEncoder,
renderDocumentAudio,
supportedAudioFileFormats,
} from '@bendyline/squisq-video-react/encoder';
const formats = await supportedAudioFileFormats(); // 'm4a' (AAC), 'opus-webm', 'wav' (always)
const mixed = await renderDocumentAudio(doc, { readMedia: (src) => container.readFile(src) });
if (mixed) {
const encoder = await createAudioFileEncoder({
format: formats[0],
sampleRate: mixed.sampleRate,
channels: 2,
});
await encoder.append([mixed.getChannelData(0), mixed.getChannelData(1)]);
const file = await encoder.finish(); // encoder.mimeType / encoder.extension
}
M4A 是一种只带音频的 MP4; 以编码器拒绝的速率输入( 24 kHz TTS for AAC)被重印入流. 见 主机指南。 。 。 .
完整 API 参考
见 文件/API.md
用于完整的道具表, VideoExportConfig和编码器的公用事业.
相关软件包
| 软件包 | 说明 |
|---|---|
| @bendyline/squisq-视频 | 无头视频/GIF渲染和WASM帮助器 |
| @bendyline/squisq (英语) | 无头核心——计划,模板,下标 |
| @bendyline/squisq-反应 | 渲染道克的反应组件 |
| @bendyline/squisq-cli (英语) | 用于文档转换和 MP4/GIF 渲染的 CLI |
许可证
此套件中的 Squisq 作者代码为 麻省理工学院执照。 。 。 .
单独分发 @ffmpeg/core WebAssembly 运行时间为上游
对FFmpeg和外部库的依赖. 0.12.10 软件包宣布
GPL-2.0-或-后按这些条件分发。 这个包裹船
NOTICE.md 报告全文
COPYING.GPL-2.0.txt。发布主机
ffmpeg-core.js 或者说 ffmpeg-core.wasm 材料必须随同
运行时间和保留对准确相应来源的同等访问
通知中指明的.