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

装WebVideoCreator记录

news 2026/5/27 12:06:43

背景，需要在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记录

背景&#xff0c;需要在docker容器内配置WebVideoCreator环境&#xff0c;配置npm、node.js WebVideoCreator地址&#xff1a;https://github.com/Vinlic/WebVideoCreator 配置环境&#xff0c;使用这个教程&#xff1a; linux下安装node和npm_linux离线安装npm-CSDN博客 1…...

编程日记 2024/9/7 22:33:20

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

在Java虚拟机&#xff08;JVM&#xff09;中&#xff0c;GC Roots是垃圾收集&#xff08;Garbage Collection&#xff0c;GC&#xff09;过程中的起点&#xff0c;用于确定对象是否可被回收。GC Roots集合是一组必须活跃的&#xff08;即必须保留在内存中的&#xff09;引用&am…...

编程日记 2024/9/7 22:32:19

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

stack stack介绍 1、stack是一种容器适配器&#xff0c;专门用在具有后进先出操作的上下文环境中&#xff0c;其删除只能从容器的一端进行元素的插入与提取操作。 2、stack是作为容器适配器被实现的&#xff0c;容器适配器即是对特定类封装作为其底层的容器&#xff0c;并提供…...

编程日记 2024/9/7 22:31:18

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

A. 最终效果 B. 示例代码 import gradio as grmermaid_code """ <iframe srcdoc <!DOCTYPE html> <html><head><meta charset"utf-8" /><meta name"viewport" content"widthdevice-width" />…...

编程日记 2024/9/7 22:30:16

ubuntu 安装python3 教程

本篇教程，主要介绍如何在Ubuntu上安装python3教程。 1、查看是否有python 在安装前，首先看看自己系统上，是否存在python环境，可能有些系统，默认就安装过python，如果已经有python了，可以直接跳过安装教程。 2、安装步骤 apt update && apt install -y python3 p…...

编程日记 2024/9/7 22:29:15

NOR Flash、NAND Flash……

存储类型描述Compact Flash一种用于便携式电子设备的数据存储设备&#xff0c;于1994年由SanDisk公司推出。SRAM静态随机存取存储器&#xff0c;不需要刷新电路即能保存数据&#xff0c;速度快但集成度低、功耗大。PSRAM伪静态随机存取存储器&#xff0c;结合了SRAM和DRAM的特点…...

编程日记 2024/9/7 22:27:11

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

【高性能代码】提高代码的性能有哪些方式&#xff0c;如何写出高性能代码&#xff0c;一段代码如何提高这段代码的执行性能&#xff0c;高性能代码开发 提高代码的性能是软件开发中一个重要的方面&#xff0c;尤其是在处理大数据、高并发或实时性要求较高的应用时。以下是一些提…...

编程日记 2024/9/7 22:25:09

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

Iptables名词和术语 2iptables表&#xff08;tables&#xff09;和链&#xff08;chains&#xff09; 2表及其链的功能 2  Filter表 2  NAT表 2  MANGLE表 2iptables的工作流程 3iptables表和链的工作流程图 3 二、 iptables实战应用 4iptables命令参数详解 4  iptable…...

编程日记 2024/9/7 22:24:08

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

引言 K近邻&#xff08;K-Nearest Neighbors, KNN&#xff09;算法作为一种经典的无监督学习算法&#xff0c;在点云处理中的应用尤为广泛。它通过计算点与点之间的距离来寻找数据点的邻居&#xff0c;从而有效进行点云分类、聚类和特征提取。本菜在复现点云文章过程&#xff…...

编程日记 2024/9/7 22:23:07

【OJ】常用技巧

1. 模版 #include<bits/stdc.h> using namespace std;int main(){ios::sync_with_stdio(false);cin.tie(0);// write herereturn 0; }2. 填充数组 memset是一个字节一个字节填充&#xff0c;如果是使int类型填充非0或者-1就会报错&#xff0c;如 int a[100]; memset(a…...

编程日记 2024/9/7 22:22:06

Redis：Redis性能变慢的原因

一、淘汰策略性能问题 当使用Redis当作缓存使用时&#xff0c;通常会给这个实例设置内存上限maxmemory&#xff0c;然后设置一个数据淘汰策略&#xff1b;如果Redis实例设置了内存上限maxmemory&#xff0c;那么也有可能导致Redis变慢。 原因在于&#xff0c;当Redis内存达到…...

编程日记 2024/9/7 22:20:03

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

文章目录 线程封装主要框架线程启动线程等待其他信息 测试函数 线程封装 我们之前介绍过pthread的线程库&#xff0c;这个线程库主要是基于C语言的void*指针来进行传参和返回 我们使用C的模板对其封装可以让他的使用更加方便&#xff0c;并且经过测试可以让我们更加直观的了解…...

编程日记 2024/9/7 22:19:02

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

SpringBoot教程&#xff08;十五&#xff09; | SpringBoot集成RabbitMq&#xff08;消息丢失、消息重复、消息顺序、消息顺序&#xff09; RabbitMQ常见问题解决方案问题一&#xff1a;消息丢失的解决方案&#xff08;1&#xff09;生成者丢失消息丢失的情景解决方案1&#xf…...

编程日记 2024/9/7 22:16:59

TensorRT-LLM高级用法

--multi_block_mode decoding phase, 推理1个新token&#xff0c; 平时&#xff1a;按照batch样本&#xff0c;按照head&#xff0c;将计算平均分给所有SM&#xff1b; batch_size*num_heads和SM数目相比较小时&#xff1a;有些SM会空闲&#xff1b;加了--multi_block_mode&…...

编程日记 2024/9/7 22:15:58

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

9月4日&#xff0c;百度文心一言官网显示&#xff0c;在向全社会开放一周年之际&#xff0c;文心一言进行了功能最新全面升级&#xff0c;同时在周年期间为新老会员增加1个月专业版免费使用体验。 据了解&#xff0c;针对网页版用户需求&#xff0c;文心一言实现了创作内容更加…...

编程日记 2024/9/7 22:14:57

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

题目 请计算n*m的棋盘格子&#xff08;n为横向的格子数&#xff0c;m为竖向的格子数&#xff09;从棋盘左上角出发沿着边缘线从左上角走到右下角&#xff0c;总共有多少种走法&#xff0c;要求不能走回头路&#xff0c;即&#xff1a;只能往右和往下走&#xff0c;不能往左和往…...

编程日记 2024/9/7 22:10:52

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

bootstrap fileInput 以及 Bootstrap 字体图标无法显示问题。 今天在用 bootstrap fileInput 插件的时候发现图标无法显示&#xff0c;如下&#xff1a; 查看DOM&#xff0c;发现那些图标是<i>标签做的&#xff1a; 网上的方案 方案1 网上很多人说是我们打乱了boots…...

编程日记 2024/9/7 22:08:50

docker registry 仓库加密

docker registry 仓库加密 1、背景 ​ 公司一直用的镜像仓库是docker registry&#xff0c;但是有个安全问题&#xff0c;就是仓库从web ui的浏览到镜像的拉取都是可以直接使用的&#xff0c;还是放到了公网上&#xff0c;只需要知道你的域名那就是畅通无阻了&#xff0c;可以…...

编程日记 2024/9/7 22:07:49

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

荷花十里&#xff0c;清风鉴水&#xff0c;明月天衣。 四时之景不同&#xff0c;乐亦无穷尽也。今天呢&#xff0c;梧桐君给大家讲解一下&#xff0c;如何利用高德地图&#xff0c;随机所欲的获取shp边界数据。 文章主要分成以下几个步骤&#xff1a; 首先搜索你想获取的矢量…...

编程日记 2024/9/7 22:06:45

炮弹【USACO】

题目背景 时/空限制&#xff1a;1s / 64MB 题目描述 贝茜已经精通了变成炮弹并沿着长度为 N 的数轴弹跳的艺术&#xff0c;数轴上的位置从左到右编号为 1,2,…,N 。 她从某个整数位置 S 开始&#xff0c;以 1 的起始能量向右弹跳。 如果贝茜的能量为 k &#xff0c;则她将…...

编程日记 2024/9/7 22:05:44

Visual Studio 项目属性页开发完全教程：从基础到高级

Visual Studio 项目属性页开发完全教程&#xff1a;从基础到高级 【免费下载链接】project-system The .NET Project System for Visual Studio 项目地址: https://gitcode.com/gh_mirrors/pr/project-system Visual Studio 项目属性页是开发者管理项目配置的核心界面&a…...

编程新知 2026/5/26 4:42:23

从Office功能区的“局外人“到“掌控者“：Office RibbonX Editor深度指南

从Office功能区的"局外人"到"掌控者"&#xff1a;Office RibbonX Editor深度指南 【免费下载链接】office-ribbonx-editor An overhauled fork of the original Custom UI Editor for Microsoft Office, built with WPF 项目地址: https://gitcode.com/g…...

编程新知 2026/5/26 2:21:28

开源 AI Agent Harness Engineering 框架全览：LangChain, AutoGPT, CrewAI 孰优孰劣？

开源 AI Agent Harness Engineering 框架全览：LangChain, AutoGPT, CrewAI 孰优孰劣？ 关键词 AI Agent Harness Engineering、大语言模型编排（LLM Orchestration）、LangChain、AutoGPT、CrewAI、工具调用（Tool Calling）、多Agent协作、自主任务规划 摘要 随着大语言模型…...

编程新知 2026/5/25 22:52:44

浏览器指纹识别机制深度剖析与反识别技术实现

一、浏览器指纹技术基础认知1.1 浏览器指纹的核心定义在数字化时代&#xff0c;每一台接入互联网的设备都会留下独特的数字标识&#xff0c;浏览器指纹便是其中最关键的识别凭证之一。浏览器指纹是网站通过 JavaScript 脚本、HTTP 请求头、硬件接口调用等多种技术手段&#xff…...

编程新知 2026/5/25 22:06:16

具身智能：面向新兴交叉学科建设的思考与建议 2026

这份由 CCF YOCSEF 长三角五地学术委员会 2026 年 5 月发布的白皮书&#xff0c;聚焦具身智能作为新兴交叉学科的建设&#xff0c;明确其并非 AI 与机器人学的简单拼接&#xff0c;而是围绕物理交互中的智能行为形成的新问题域&#xff0c;提出 “三大基本问题 一个应用需求”…...

编程新知 2026/5/25 21:33:52

企业云盘签章技术方案：从数字签名原理到工程落地

背景 电子签章在企业云盘中的落地&#xff0c;不只是一个"上传盖章图片"的功能实现。本质上&#xff0c;它是一套涉及数字签名、PKI基础设施、文档完整性校验的综合性技术方案。本文从技术选型角度&#xff0c;说清楚企业云盘内置签章需要解决哪些问题、主流实现方案…...

编程新知 2026/5/25 20:49:11

深度解析：UI-TARS视觉语言模型驱动的自动化操作框架核心技术架构

深度解析&#xff1a;UI-TARS视觉语言模型驱动的自动化操作框架核心技术架构 【免费下载链接】UI-TARS-desktop The Open-Source Multimodal AI Agent Stack: Connecting Cutting-Edge AI Models and Agent Infra 项目地址: https://gitcode.com/GitHub_Trending/ui/UI-TARS-…...

编程新知 2026/5/25 18:30:36

掌握Umi-OCR：5分钟上手开源免费离线文字识别工具

掌握Umi-OCR&#xff1a;5分钟上手开源免费离线文字识别工具 【免费下载链接】Umi-OCR OCR software, free and offline. 开源、免费的离线OCR软件。支持截屏/批量导入图片&#xff0c;PDF文档识别&#xff0c;排除水印/页眉页脚&#xff0c;扫描/生成二维码。内置多国语言库。…...

编程新知 2026/5/25 18:04:00

基于CNN的食双星光变曲线自动化参数初估模型EBOP MAVEN

1. 项目概述与核心价值在恒星天体物理领域&#xff0c;食双星系统一直扮演着“宇宙实验室”的关键角色。通过分析两颗恒星相互绕转时周期性相互遮挡产生的光变曲线&#xff0c;我们可以像解谜一样&#xff0c;精确反演出恒星的质量、半径、轨道倾角等基本物理参数。这些参数是构…...

编程新知 2026/5/25 17:06:30

Taotoken的Token Plan套餐如何帮助项目更可控地预估成本

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 Taotoken的Token Plan套餐如何帮助项目更可控地预估成本 对于项目管理者或独立开发者而言&#xff0c;在集成大模型能力时&#xf…...

编程新知 2026/5/27 6:55:02