Merge pull request #166 from VisActor/feat/docs

feat(docs): update export video/gif docs
VisActor · Dec 3, 2024 · f965d29 · f965d29
2 parents 11edc4a + f8b9589
commit f965d29
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 21 deletions.
diff --git a/docs/assets/guide/en/Getting_Started.md b/docs/assets/guide/en/Getting_Started.md
@@ -184,24 +184,56 @@ The generated chart is as follows:
 ## Export GIF and Video
 
 VMind supports exporting the generated chart as a GIF animation and video, which can be shared anytime and anywhere.
-In order to implement the video export function, you need to additionally introduce VChart and FFMPEG into the project and pass them in as objects to VMind. The following will show how to get the ObjectURL of the chart GIF and video:
+In order to implement the video export function, you need to additionally include VChart, FFMPEG, canvas related content in your project and pass them as objects to VMind. The following will show how to get the ObjectURL of the chart GIF and video:
 
-First install VChart and FFMPEG:
+First, install VChart, FFMPEG, and canvas-related content:
 ```bash
 # Install with npm
 npm install @visactor/vchart
-npm install @ffmpeg/ffmpeg
-npm install @ffmpeg/util
+npm install @visactor/vrender-core
+npm install @ffmpeg/ffmpeg^0.11.6
+npm install canvas^2.11.2
 ```
-
+Ensure that the vrender-core version matches the vchart dependency version, for example: `"@visactor/vchart": "1.12.7"` should correspond to `"@visactor/vrender-core": "0.20.7"`.
+Usage is as follows:
 ```typescript
-import VChart from '@visactor/vchart';
-import { FFmpeg } from "@ffmpeg/ffmpeg";
-import { fetchFile } from "@ffmpeg/util";
-//Export video
-const videoSrc = await vmind.exportVideo(spec, time, VChart, FFmpeg, fetchFile); //Pass in chart spec and video duration, return ObjectURL
-//Export GIF image
-const gifSrc = await vmind.exportGIF(spec, time, VChart, FFmpeg, fetchFile); //Pass in chart spec and GIF duration, return ObjectURL
+import VChart from "@visactor/vchart";
+import { ManualTicker, defaultTimeline } from "@visactor/vrender-core";
+import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg/dist/ffmpeg.min.js'
+import { createCanvas } from "canvas";
+import VMind from "@visactor/vmind";
+
+// Initialize vmind and ffmpeg
+const vmind = new VMind({});
+const ffmpeg = createFFmpeg({
+  log: true,
+});
+const loadFFmpeg = async () => {
+  if (!ffmpeg.isLoaded()) {
+    await ffmpeg.load();
+  }
+};
+// Ensure ffmpeg is loaded before using the export feature
+await loadFFmpeg();
+// Export video
+// Pass in the chart spec, video duration, and necessary parameters for video creation, and return the ObjectURL
+const videoSrc = await vmind.exportVideo(spec, time, {
+      VChart,
+      FFmpeg: ffmpeg,
+      fetchFile,
+      ManualTicker,
+      defaultTimeline,
+      createCanvas,
+    });
+// Export GIF image
+const gifSrc = await vmind.exportGIF(spec, time, {
+      VChart,
+      FFmpeg: ffmpeg,
+      fetchFile,
+      ManualTicker,
+      defaultTimeline,
+      createCanvas
+    });
 ```
 
 Once you get the ObjectURL of the chart, we can save it as a file. Take saving the video file as an example:

diff --git a/docs/assets/guide/zh/Getting_Started.md b/docs/assets/guide/zh/Getting_Started.md
@@ -184,24 +184,57 @@ const { spec, time } = await vmind.generateChart(userPrompt, fieldInfo, dataset)
 ## 导出 GIF 和视频
 
 VMind 支持将生成的图表导出为 GIF 格式的动画和视频，随时随地进行分享。
-为了实现视频导出功能，你需要在项目中额外引入VChart和FFMPEG，并将其作为对象传入VMind。下面将展示如何获得图表 GIF 和视频的 ObjectURL：
+为了实现视频导出功能，你需要在项目中额外引入`VChart, FFMPEG, canvas`相关内容，并将其作为对象传入VMind。下面将展示如何获得图表 GIF 和视频的 ObjectURL：
 
-首先安装VChart和FFMPEG：
+首先安装VChart,FFMPEG以及canvas相关内容：
 ```bash
 # 使用 npm 安装
 npm install @visactor/vchart
-npm install @ffmpeg/ffmpeg
-npm install @ffmpeg/util
+npm install @visactor/vrender-core
+npm install @ffmpeg/ffmpeg^0.11.6
+npm install canvas^2.11.2
 ```
+同时确保vrender-core版本与vchart依赖版本一致，如：`"@visactor/vchart": "1.12.7"`对应的版本应该为，`"@visactor/vrender-core": "0.20.7"`
+具体使用如下：
 
 ```typescript
-import VChart from '@visactor/vchart';
-import { FFmpeg } from "@ffmpeg/ffmpeg";
-import { fetchFile } from "@ffmpeg/util";
+import VChart from "@visactor/vchart";
+import { ManualTicker, defaultTimeline } from "@visactor/vrender-core";
+import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg/dist/ffmpeg.min.js'
+import { createCanvas } from "canvas";
+import VMind from "@visactor/vmind";
+
+// 初始化vmind和ffmpeg
+const vmind = new VMind({});
+const ffmpeg = createFFmpeg({
+  log: true,
+});
+const loadFFmpeg = async () => {
+  if (!ffmpeg.isLoaded()) {
+    await ffmpeg.load();
+  }
+};
+// 确保在使用导出功能前已经加载了ffmpeg
+await loadFFmpeg();
 //导出视频
-const videoSrc = await vmind.exportVideo(spec, time, VChart, FFmpeg, fetchFile); //传入图表spec和视频时长，返回ObjectURL
+//传入图表spec，视频时长和视频化必要参数，返回ObjectURL
+const videoSrc = await vmind.exportVideo(spec, time, {
+      VChart,
+      FFmpeg: ffmpeg,
+      fetchFile,
+      ManualTicker,
+      defaultTimeline,
+      createCanvas,
+    });
 //导出GIF图片
-const gifSrc = await vmind.exportGIF(spec, time, VChart, FFmpeg, fetchFile); //传入图表spec和GIF时长，返回ObjectURL
+const gifSrc = await vmind.exportGIF(spec, time, {
+      VChart,
+      FFmpeg: ffmpeg,
+      fetchFile,
+      ManualTicker,
+      defaultTimeline,
+      createCanvas
+    });
 ```
 
 一旦获得图表的 ObjectURL，我们可以将其保存为文件。以保存视频文件为例：