装WebVideoCreator记载

配景，需要在docker容器内配置WebVideoCreator环境，配置npm、node.js
https://github.com/Vinlic/WebVideoCreatorWebVideoCreator地点：https://github.com/Vinlic/WebVideoCreator
配置环境，使用这个教程：
linux下安装node和npm_linux离线安装npm-CSDN博客
1、配置
要先解压tar.xz，会输出tar文件，然后解压tar

1. wget https://npmmirror.com/mirrors/node/v16.14.0/node-v16.14.0-linux-x64.tar.xz
2. xz -d node-v16.14.0-linux-x64.tar.xz
3. tar -vxf node-v16.14.0-linux-x64.tar

复制代码

2、添加软连接
直接添加到/usr/bin/背面（我放在local下我记得会报错），前面node的路径可以尝试用绝对路径

1. ln -s node-v16.14.0-linux-x64/bin/node /usr/bin/node
2. ln -s node-v16.14.0-linux-x64/bin/npm /usr/bin/npm

复制代码

3、看配置是否成功，检察版本号 

1. node -v
2. npm -v

复制代码

有版本号之后应该就没啥题目，继续下载WebVideoCreator的环境
1、web-video-creator

1. npm i web-video-creator

复制代码

期间会超时断掉，多试反复
2、live-server安装，这个下得也很慢，会断

1. # 从NPM全局安装live-server
2. npm i -g live-server
3. # 启用Web服务
4. live-server

复制代码

启动live-server时我会报错：
bash: live-server: command not found
可以先检察下是不是有这个文件：

1. ls $(npm root -g)/live-server

复制代码

 有这个js文件，应该没题目，接下来配置下npm路径，以下是个临时路径

1. nano ~/.bashrc
2. 在文件末尾添加以下行,ctrl+O保存+enter确认，然后ctrl+X退出编辑
3. export PATH=$PATH:/build/node-v16.14.0-linux-x64/bin
4. 然后
5. source ~/.bashrc

复制代码

 然后live-server运行成功，可以使用port更改端口live-server --port=8000

3、启动一个html服务
在启动live-server的根目次下建立一个html文件，叫test.html

1. <!DOCTYPE html>
2. <html>
3.     <head>
4.         <meta charset="utf-8" />
5.         <title>测试页面</title>
6.     </head>
7.     <body>
8.         <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1"
9.         xmlns:xlink="http://www.w3.org/1999/xlink">
10.             <polygon points="60,30 90,90 30,90" fill="red">
11.                 <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 60 70" to="360 60 70"
12.                     dur="10s" repeatCount="indefinite" />
13.             </polygon>
14.         </svg>
15.     </body>
16. </html>

复制代码

然后去localhost看一下是否表现正常：http://localhost:8080/test.html
可以看到一个红色三角形在转

4、尝试运行js代码渲染视频
使用官方渲染单幕视频的代码，生存为test.js

1. import WebVideoCreator, { VIDEO_ENCODER, logger } from "web-video-creator";
3. const wvc = new WebVideoCreator();
5. // 配置WVC
6. wvc.config({
7.     // 根据您的硬件设备选择适合的编码器，这里采用的是Nvidia显卡的h264_nvenc编码器
8.     // 编码器选择可参考 docs/video-encoder.md
9.     mp4Encoder: VIDEO_ENCODER.NVIDIA.H264
10. });
12. // 创建单幕视频
13. const video = wvc.createSingleVideo({
14.     // 需要渲染的页面地址
15.     url: "http://localhost:8080/test.html",
16.     // 或者可以直接设置页面内容
17.     // content: "<h1>Hello WebVideoCreator</h1>",
18.     // 视频宽度
19.     width: 1280,
20.     // 视频高度
21.     height: 720,
22.     // 视频帧率
23.     fps: 30,
24.     // 视频时长
25.     duration: 10000,
26.     // 视频输出路径
27.     outputPath: "./test.mp4",
28.     // 是否在cli显示进度条，默认是不显示
29.     showProgress: true
30. });
32. // 监听合成完成事件
33. video.once("completed", result => {
34.     logger.success(`Render Completed!!!\nvideo duration: ${Math.floor(result.duration / 1000)}s\ntakes: ${Math.floor(result.takes / 1000)}s\nRTF: ${result.rtf}`)
35. });
37. // 启动合成
38. video.start();

复制代码

直接运行

1. node test.js

复制代码

(node:426) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
test.js:1
import WebVideoCreator, { VIDEO_ENCODER, logger } from "web-video-creator";
^^^^^^
SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1032:15)
    at Module._compile (node:internal/modules/cjs/loader:1067:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47
 
上面这个报错是因为我不是在当初下npm i web-video-creator谁人文件夹下运行的，以及，应该获得当时谁人文件夹下的package.json文件，并加上"type": "module"
然后我把 node_modules 复制到了如今运行的文件夹中，内里是有需要用的包
这次运行node test.js
就有进度条了，但是末了还是报错了：
[2024-08-30 13:50:53.998][error][ResourcePool<117,39>] Error: Failed to launch the browser process!
/.bin/chrome/linux-119.0.6029.0/chrome-linux64/chrome: error while loading shared libraries: libatk-1.0.so.0: cannot open shared object file: No such file or y

TROUBLESHOOTING: https://pptr.dev/troubleshooting
    at Interface.onClose (file:///node_modules/@puppeteer/browsers/lib/esm/launch.js:258:24)
    at Interface.emit (node:events:532:35)
    at Interface.close (node:readline:586:8)
    at Socket.onend (node:readline:277:10)
    at Socket.emit (node:events:532:35)
    at endReadableNT (node:internal/streams/readable:1346:12)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)
办理方法：
https://stackoverflow.com/questions/66133131/error-failed-to-launch-the-browser-process-nodejs-cpannel-libatk-1-0-so-0
然后有一系列报错，逐步配置

1. apt-get install libatk-bridge2.0-0
2. apt-get install libasound2

复制代码

背面就是关于ffmpeg的错误了，主要是h264编码的错，需要用gpu，要配置cuda之类的。比较冗长，就不记载在这了。