该页面介绍在 Vue 环境中使用 Helios 的 Composition 模式,适合需要在 Vue 组件里接入 Helios 时间轴并做画面渲染或音频可视化的场景。
主要能力:
- 视频帧订阅:通过 useVideoFrame 组合式函数订阅 Helios 状态,把 currentFrame 暴露为 Vue 响应式引用,并在组件卸载时自动取消订阅。
- 画布绘制:示例中创建 Helios 实例(duration 10、fps 30),绑定文档时间线,并通过 watch 监听帧变化触发 canvas 绘制。
- 音频可视化:通过 useAudioData 组合式函数以 computed 形式根据缓冲区与当前时间推导分析结果,页面示例返回 rms 与 waveform 字段。
使用方式:按页面给出的代码,先编写 useVideoFrame 组合式函数,再在 script setup 中初始化 Helios、绑定时间线、获取 canvas 引用,并以 watch 响应帧变化执行绘制;音频场景先根据帧计算 currentTime,再传入 useAudioData 并监听结果。
适用场景与限制:页面提供了两个示例目录路径(examples/vue-canvas-animation/、examples/vue-audio-visualization/),可作为参考实现。安装命令、版本要求、依赖声明、收费标准及平台支持范围暂未提供。