update README

Vinlic · Nov 23, 2023 · 574847f · 574847f
1 parent 24db140
commit 574847f
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 23 deletions.
diff --git a/README.en-US.md b/README.en-US.md
@@ -617,6 +617,25 @@ In your page code, call the start function when appropriate.
 </script>
 ```
 
+<br>
+
+## Start Capturing at a Specified Time Point
+
+By default, WVC begins capturing the screen from the 0 time point after rendering starts. However, it also supports initiating screen capture from other time points.
+
+```javascript
+const video = wvc.createSingleVideo({
+    url: "http://localhost:8080/test.html",
+    width: 1280,
+    height: 720,
+    // Start capturing from the 5-second mark
+    startTime: 5000,
+    duration: 10000
+});
+```
+
+<br>
+
 ## Pre-render Page Operations
 
 ```javascript
@@ -853,12 +872,6 @@ wvc.cleanLocalFontCache();
 
 <br>
 
-# Distributed Rendering
-
-If you have multiple devices available for rendering, you can deploy WVC on these devices. WVC provides `MultiVideo` and `ChunkVideo`, allowing you to divide the animation pages into many segments (e.g., 0-10 seconds, 10-20 seconds, etc.). Distribute their parameters to different WVC instances on different devices, create ChunkVideo instances on these devices, and execute parallel rendering to generate multiple video segments (`ts`). These segments are then sent back to the core node, where they are combined, and transitions, audio tracks, and output are handled. **The distribution and return process is not yet implemented in WVC, but it is not difficult, and you can wrap it according to your own scenario. Contributions to WVC are welcome through [PR](https://github.com/Vinlic/WebVideoCreator/pulls)!**
-
-<br>
-
 # API Reference
 
 ## High-Level API
@@ -873,6 +886,12 @@ In most cases, it is recommended to use the high-level API because it is simple
 
 <br>
 
+# Distributed Rendering
+
+If you have multiple devices available for rendering, you can deploy WVC on these devices. WVC provides `MultiVideo` and `ChunkVideo`, allowing you to divide the animation pages into many segments (e.g., 0-10 seconds, 10-20 seconds, etc.). Distribute their parameters to different WVC instances on different devices, create ChunkVideo instances on these devices, and execute parallel rendering to generate multiple video segments (`ts`). These segments are then sent back to the core node, where they are combined, and transitions, audio tracks, and output are handled. **The distribution and return process is not yet implemented in WVC, but it is not difficult, and you can wrap it according to your own scenario. Contributions to WVC are welcome through [PR](https://github.com/Vinlic/WebVideoCreator/pulls)!**
+
+<br>
+
 # Performance Tips
 
 Performance is typically influenced by the complexity of animations and media. To improve performance:
@@ -921,14 +940,10 @@ Parallel Rendering Count: 16
 
 # Limitations
 
-- Constrained by browser [secure context restrictions](https://w3c.github.io/webappsec-secure-contexts/), WebVideoCreator can only access `localhost` / `127.0.0.1` or domains using HTTPS with valid certificates. For security reasons, it's recommended to use a local static server (e.g., `live-server` is a good choice).
+- Constrained by browser [secure context restrictions](https://w3c.github.io/webappsec-secure-contexts/), WebVideoCreator can only access `localhost` / `127.0.0.1` or domains using HTTPS with valid certificates. For security reasons, it's recommended to use a local static server (e.g., `live-server` is a good choice), You can also use the content option to directly set the page content to avoid URL restrictions.
 
 - The headless experimental API on Mac systems may cause crashes and needs to be switched to compatibility rendering mode to run. However, compatibility rendering mode has various issues, so it is not recommended for Mac systems. See [Compatibility Rendering Mode](#compatible-rendering-mode).
 
 - WebVideoCreator is a pure ESM package and cannot be imported using CommonJS-style `require`. If you still want to use `require` to import it, refer to this [gist](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c) for guidance.
 
-<br>
-
-# Technical Implementation
-Work in progress...
-
+- The page jump request during the video rendering process will be intercepted because jumping to the page will result in the loss of capture context.
diff --git a/README.md b/README.md
@@ -620,6 +620,21 @@ const video = wvc.createSingleVideo({
 </script>
 ```
 
+## 在指定时间点开始捕获
+
+WVC默认在渲染启动后从第0秒位置开始捕获画面，但也支持您从其它时间点开始捕获。
+
+```javascript
+const video = wvc.createSingleVideo({
+    url: "http://localhost:8080/test.html",
+    width: 1280,
+    height: 720,
+    // 从第5秒位置开始捕获画面
+    startTime: 5000,
+    duration: 10000
+});
+```
+
 ## 启动渲染前操作页面
 
 ```javascript
@@ -856,12 +871,6 @@ wvc.cleanLocalFontCache();
 
 <br>
 
-# 分布式渲染方案
-
-如果您有多台设备可以为这些设备部署WVC，它提供了 `MultiVideo` 和 `ChunkVideo`，您可以将动画页面分为很多个分段，如0-10秒、10-20秒...，将它们的参数分发到不同设备的WVC上，在这些设备上创建ChunkVideo实例并执行并行渲染为多个视频 `ts` 分段，将他们回传到核心节点上，并最终输入MultiVideo进行合并以及转场、音轨合成输出。**这个分发以及回传流程WVC还未实现，但它并不难，您可以根据自己的场景进行封装并欢迎为WVC贡献[PR](https://github.com/Vinlic/WebVideoCreator/pulls)！**
-
-<br>
-
 # API参考
 
 ## 高级别API
@@ -876,6 +885,12 @@ wvc.cleanLocalFontCache();
 
 <br>
 
+# 分布式渲染方案
+
+如果您有多台设备可以为这些设备部署WVC，它提供了 `MultiVideo` 和 `ChunkVideo`，您可以将动画页面分为很多个分段，如0-10秒、10-20秒...，将它们的参数分发到不同设备的WVC上，在这些设备上创建ChunkVideo实例并执行并行渲染为多个视频 `ts` 分段，将他们回传到核心节点上，并最终输入MultiVideo进行合并以及转场、音轨合成输出。**这个分发以及回传流程WVC还未实现，但它并不难，您可以根据自己的场景进行封装并欢迎为WVC贡献[PR](https://github.com/Vinlic/WebVideoCreator/pulls)！**
+
+<br>
+
 # 性能提示
 
 性能通常受动画和媒体的复杂程度影响，您可以将长时间动画分为多个分段动画播放，比如为每个页面地址带一个seek参数，加载页面后seek到指定时间点开始播放，然后作为多幕视频进行渲染合成，可以显著的降低长视频的渲染耗时。
@@ -920,11 +935,10 @@ RAM: 16GB（DDR4 2400MHz）
 
 # 局限性
 
-- 受制于浏览器的[安全上下文限制](https://w3c.github.io/webappsec-secure-contexts/)，只能访问 localhost / 127.0.0.1 或者使用HTTPS协议且证书有效的域，从安全角度考虑建议使用本机静态服务器（live-server是一个不错的选择）。
+- 受制于浏览器的[安全上下文限制](https://w3c.github.io/webappsec-secure-contexts/)，只能访问 localhost / 127.0.0.1 或者使用HTTPS协议且证书有效的域，从安全角度考虑建议使用本机静态服务器（live-server是一个不错的选择），也可以使用content选项直接设置页面内容从而避开url限制。
+
 - 在Mac系统中使用无头实验API在会发生崩溃，需要改为兼容渲染模式才能运行，但兼容渲染模式存在诸多问题，不建议在Mac系统使用，详见[兼容渲染模式](#兼容渲染模式)
-- WebVideoCreator是纯ESM包，无法使用CommonJS风格引入，如果依然希望使用require引入，请参考：https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
 
-<br>
+- WebVideoCreator是纯ESM包，无法使用CommonJS风格引入，如果依然希望使用require引入，请参考：https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
 
-# 技术实现
-正在编写中...
+- 渲染过程中的页面跳转请求将被拦截，因为跳转页面将导致捕获上下文丢失。