当前位置：首页 > news >正文

装WebVideoCreator记录

news 2025/11/11 11:34:39

背景，需要在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.mdmp4Encoder: 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)

解决方法：

https://stackoverflow.com/questions/66133131/error-failed-to-launch-the-browser-process-nodejs-cpannel-libatk-1-0-so-0

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

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

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

装WebVideoCreator记录

相关文章：

装WebVideoCreator记录

【编程底层思考】什么是GC Roots

[STL --stack_queue详解]stack、queue，deque,priority_queue，容器适配器

240907-Gradio插入Mermaid流程图并自适应浏览器高度

ubuntu 安装python3 教程

NOR Flash、NAND Flash……

【高性能代码】提高代码的性能有哪些方式，如何写出高性能代码，一段代码如何提高这段代码的执行性能，高性能代码开发

2024整理 iptables防火墙学习笔记大全_modepro iptables

实验记录 | 点云处理 | K-NN算法3种实现的性能比较

【OJ】常用技巧

Redis：Redis性能变慢的原因

Linux多线程——利用C++模板对pthread线程库封装

SpringBoot教程（十五） | SpringBoot集成RabbitMq（消息丢失、消息重复、消息顺序、消息顺序）

TensorRT-LLM高级用法

文心一言功能新升级：读文档、懂翻译、能识图

C++机试——走方格的方案

Bootstrap 字体图标无法显示问题，＜i＞标签字体图标无法显示问题

docker registry 仓库加密

利用高德+ArcGIS优雅获取任何感兴趣的矢量边界

炮弹【USACO】

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

MFC内存泄露

mongodb源码分析session执行handleRequest命令find过程

（二）TensorRT-LLM | 模型导出（v0.20.0rc3）

渲染学进阶内容——模型

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

关于 WASM：1. WASM 基础原理

多种风格导航菜单 HTML 实现（附源码）

Redis数据倾斜问题解决