装WebVideoCreator记录

背景，需要在docker容器内配置WebVideoCreator环境，配置npm、node.js

https://github.com/Vinlic/WebVideoCreatorWebVideoCreator地址：https://github.com/Vinlic/WebVideoCreator

配置环境，使用这个教程：

1、配置

要先解压tar.xz，会输出tar文件，然后解压tar

bash 复制代码

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的路径可以尝试用绝对路径

bash 复制代码

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、看配置是否成功，查看版本号

bash 复制代码

node -v
npm -v

有版本号之后应该就没啥问题，继续下载WebVideoCreator的环境

1、web-video-creator

bash 复制代码

npm i web-video-creator

期间会超时断掉，多试几次

2、live-server安装，这个下得也很慢，会断

bash 复制代码

# 从NPM全局安装live-server
npm i -g live-server
# 启用Web服务
live-server

启动live-server时我会报错：

bash: live-server: command not found

可以先查看下是不是有这个文件：

bash 复制代码

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

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

bash 复制代码

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

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

javascript 复制代码

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();

直接运行

bash 复制代码

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

然后有一系列报错，慢慢配置

bash 复制代码

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

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