背景，需要在docker容器内配置WebVideoCreator环境，配置npm、node.js
WebVideoCreator地址：https://github.com/Vinlic/WebVideoCreator
配置环境，使用这个教程：
linux下安装node和npm_linux离线安装npm-CSDN博客
1、配置
要先解压tar.xz，会输出tar文件，然后解压tar
wget https://npmmirror.com/mirrors/node/v16.14.0/node-v16.14.0-linux-x64.tar.xz
xz -d node-v16.14.0-linux-x64.tar.xz
tar -vxf node-v16.14.0-linux-x64.tar
2、添加软连接
直接添加到/usr/bin/后面（我放在local下我记得会报错），前面node的路径可以尝试用绝对路径
ln -s node-v16.14.0-linux-x64/bin/node /usr/bin/node
ln -s node-v16.14.0-linux-x64/bin/npm /usr/bin/npm
3、看配置是否成功，查看版本号
node -v
npm -v
有版本号之后应该就没啥问题，继续下载WebVideoCreator的环境
1、web-video-creator
npm i web-video-creator
期间会超时断掉，多试几次，如果进度条不动，需要挂代理
2、live-server安装，这个下得也很慢，会断
# 从NPM全局安装live-server
npm i -g live-server
# 启用Web服务
live-server
启动live-server时我会报错：
bash: live-server: command not found
可以先查看下是不是有这个文件：
ls $(npm root -g)/live-server
有这个js文件，应该没问题，接下来配置下npm路径
nano ~/.bashrc
在文件末尾添加以下行,ctrl+O保存+enter确认，然后ctrl+X退出编辑
export PATH=$PATH:/build/node-v16.14.0-linux-x64/bin
然后
source ~/.bashrc
然后live-server运行成功，可以使用port更改端口live-server --port=8000
3、启动一个html服务
在启动live-server的根目录下建立一个html文件，叫test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试页面</title>
</head>
<body>
<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon points="60,30 90,90 30,90" fill="red">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 60 70" to="360 60 70"
dur="10s" repeatCount="indefinite" />
</polygon>
</svg>
</body>
</html>
然后去localhost看一下是否显示正常：http://localhost:8080/test.html
可以看到一个红色三角形在转
4、尝试运行js代码渲染视频
使用官方渲染单幕视频的代码，保存为test.js
import WebVideoCreator, { VIDEO_ENCODER, logger } from "web-video-creator";
const wvc = new WebVideoCreator();
// 配置WVC
wvc.config({
// 根据您的硬件设备选择适合的编码器，这里采用的是Nvidia显卡的h264_nvenc编码器
// 编码器选择可参考 docs/video-encoder.md
mp4Encoder: VIDEO_ENCODER.NVIDIA.H264
});
// 创建单幕视频
const video = wvc.createSingleVideo({
// 需要渲染的页面地址
url: "http://localhost:8080/test.html",
// 或者可以直接设置页面内容
// content: "<h1>Hello WebVideoCreator</h1>",
// 视频宽度
width: 1280,
// 视频高度
height: 720,
// 视频帧率
fps: 30,
// 视频时长
duration: 10000,
// 视频输出路径
outputPath: "./test.mp4",
// 是否在cli显示进度条，默认是不显示
showProgress: true
});
// 监听合成完成事件
video.once("completed", result => {
logger.success(`Render Completed!!!\nvideo duration: ${Math.floor(result.duration / 1000)}s\ntakes: ${Math.floor(result.takes / 1000)}s\nRTF: ${result.rtf}`)
});
// 启动合成
video.start();
直接运行
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)
解决方法：
然后有一系列报错，慢慢配置
apt-get install libatk-bridge2.0-0
apt-get install libasound2
后面就是关于ffmpeg的错误了，主要是h264编码的错，需要用gpu，要配置cuda之类的。比较冗长，就不记录在这了。
版权归原作者 月起星九 所有， 如有侵权，请联系我们删除。