@bendyline/squisq-视频

视频和动画-GIF渲染斯奎斯克文件的基础. 其纯正的时间线、质量、调色板和渲染-HTML助手在Node.js和浏览器中工作; framesToMp4Wasm 在浏览器运行时没有本地依赖性.

部分 斯奎斯克语Name 单相机.

安装

npm install @bendyline/squisq-video

里面的东西

这个软件包是共享的基础 @bendyline/squisq-视频反应 (浏览器导出UI)和 @bendyline/squisq-cli (英语) (单位:千美元)squisq video,将渲染的 HTML 与 Playwright 捕获和 ffmpeg 编码相配.

快速启动

生成渲染器 HTML

创建一个自成一体的 HTML 页面,在渲染模式中挂载独立的 Squisq 播放器,所有图像和音频嵌入为 Base64 数据 URI 。 无头浏览器( Playwright, Puppeteer) 获得玩家专用控件 SquisqPlayer.getHandle(root) 并使用它的渲染 API 步入帧并截取每个帧:

刻意进行实例扫描;生成的页面不曝光 高级 window.seekTo 或者说 window.getDuration 函数.

import { generateRenderHtml } from '@bendyline/squisq-video';
import { PLAYER_BUNDLE } from '@bendyline/squisq-react/standalone-source';

const html = generateRenderHtml(doc, {
  playerScript: PLAYER_BUNDLE, // the IIFE player bundle source string
  images, // Map<string, ArrayBuffer> — embedded as data URIs
  audio, // Map<string, ArrayBuffer> — embedded as data URIs
  width: 1920, // default 1920
  height: 1080, // default 1080
  captionStyle: 'standard', // 'standard' | 'social' — omit for no captions
});

编码框架到 MP4

import { framesToMp4Wasm } from '@bendyline/squisq-video';

const { data, duration } = await framesToMp4Wasm(
  frames, // Uint8Array[] — PNG frame bytes, in order
  audioBytes, // Uint8Array | null — optional WAV/MP3/AAC track (muxed as AAC)
  {
    fps: 30, // default 30
    quality: 'normal', // 'draft' | 'normal' | 'high' (default 'normal')
    orientation: 'landscape', // 'landscape' | 'portrait' (default 'landscape')
    // width / height override the orientation defaults (both must be EVEN)
    // REQUIRED — see "ffmpeg.wasm runtime assets" below:
    ffmpegWasm: {
      coreURL: '/vendor/ffmpeg-core.js',
      wasmURL: '/vendor/ffmpeg-core.wasm',
    },
    onProgress: (percent, phase) => console.log(`${phase}: ${percent}%`),
  },
);
// data: Uint8Array of MP4 bytes; duration: seconds (frames.length / fps)

编码为H.264(libx264, (中文(简体) ), yuv420p),带有可选的AAC音频;帧被缩放/加到目标维度上保存宽度比. ffmpeg.wasm 需要时 SharedArrayBuffer,这通常意味着为COOP/COEP头. framesToMp4Wasm 只使用浏览器;节点呼叫器可以使用 framesToMp4Native 或者说 framesToMp4NativeBytes 从 @bendyline/squisq-cli/api。 。 。 .

尺寸必须均匀. validateVideoExportOptions (称为 resolveDimensions故你应当依真理而加以否认 width编号 :height 而不是圆形: H.264's yuv420p 铬亚采样不能代表奇异的维度,默默地运送一个大小的调用者从未要求断裂-ratio-敏感管道. 该规则被统一应用于MP4和GIF,因此它不依赖于输出格式或运行时间.

ffmpeg.wasm 运行时间资产

ffmpegWasm.coreURL 每个ffmpeg都需要。 代码路径 (单位:千美元)framesToMp4Wasm中,加GIF转码和音频粘接 @bendyline/squisq-video-react) (中文(简体) ). 显示它会产生一个可操作错误 .

这是故意的. @ffmpeg/ffmpeg属于自己的 load() 回到硬码 https://unpkg.com/@ffmpeg/core@<version>/… URL,可以使这个库在运行时获取和执行无标注的第三方代码——离线/CSP限制主机的不透明故障和每个消费者的供应链表面. 斯奎斯克从来不会触发这种倒计时.

主机接线: 安装 @ffmpeg/core,以同源路径公布其资产,并点 ffmpegWasm 在他们.

import type { FfmpegWasmLoadConfig } from '@bendyline/squisq-video';

// Copy node_modules/@ffmpeg/core/dist/esm/ffmpeg-core.{js,wasm}
// into your app's static assets, then:
export const FFMPEG_WASM: FfmpegWasmLoadConfig = {
  coreURL: '/ffmpeg-core/ffmpeg-core.js',
  wasmURL: '/ffmpeg-core/ffmpeg-core.wasm',
};

packages/site/vite.config.ts (单位:千美元) ffmpegCorePlugin+) 加上 (中文(简体) ) packages/site/src/ffmpegWasmConfig.ts 是Vite的完整实例,包括必须随核心文件一起旅行的GPL通知。 故意接受远程核心,将 URL 作为 coreURL 明确——要求选择权属于您,而不是默默默认.

计划一个 Doc 的音频

computeAudioTimeline(doc, coverPreRoll?) 将医生的描述片段和定时媒体剪辑转换成一个平坦的绝对时间列表 AudioTimelineClips. 它是纯的和可节点测试的,是浏览器MP4导出和CLI混合路径用于放置音频(因此两者从未漂移)的单一真理源. 叙述部分按顺序排列;定时媒体片段按其绝对位置排列;每个起始点由 coverPreRoll (default 0) 与无声封面预卷保持同步.

import { computeAudioTimeline } from '@bendyline/squisq-video';

const clips = computeAudioTimeline(doc, 2); // [{ src, startSec, sourceInSec, durationSec }, …]

质量预设

每个 QualityPreset 还携带 bitsPerPixel (用于WebCodecs比特率) 目标通过 bitrateForQuality和 audioBitrate (目标AAC比特/秒):

方向尺寸

resolveDimensions(options) 应用这些默认值, 明确遵守 width编号 :height 超载.

见全 API 参考 所有类型.

相关软件包

许可证

麻省理工学院