装WebVideoCreator记录

背景,需要在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之类的。比较冗长,就不记录在这了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/53266.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android12上新增jar遇到的问题总结

最近在vendor目录下新增jar遇到一个问题&#xff0c;新增jar完全没问题&#xff0c;但是如果在framework/base/service下通过static_lib调用&#xff0c;就会出现如下报错&#xff0c;在SystemUI中调用都不会出现此问题&#xff0c;这个问题应该就是出现在framework/base/servi…

【C语言】---- 复合数据类型之枚举(Enum)

在C语言中&#xff0c;枚举&#xff08;Enum&#xff09;是一种用户定义的数据类型&#xff0c;它允许为一组常量分配有序的值。枚举在编程中经常用于表示一组相关的命名常量&#xff0c;提高程序的可读性和可维护性。 枚举的定义 枚举的定义使用 enum 关键字&#xff0c;它允…

反射: 获取变量类型

更高级的编程语言&#xff0c;提供反射、解释机制&#xff0c;获取对象类型非常方便&#xff0c;因为运行时保存有对象的全部信息&#xff0c;也包括类型&#xff0c;而对于编译型语言而言&#xff0c;变量类型要靠编译期或构造/依赖类型某个存储类型的结构。 不同语言的反射 …

JavaWeb - Mybatis - 基础操作

删除Delete 接口方法&#xff1a; Mapper public interface EmpMapper { //Delete("delete from emp where id 17") //public void delete(); //以上delete操作的SQL语句中的id值写成固定的17&#xff0c;就表示只能删除id17的用户数据 //SQL语句中的id值不能写成…

[数据集][目标检测]西红柿成熟度检测数据集VOC+YOLO格式3241张5类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;3241 标注数量(xml文件个数)&#xff1a;3241 标注数量(txt文件个数)&#xff1a;3241 标注…

GitHub精选|8 个强大工具,助力你的开发和探究工作

本文精选了8个来自 GitHub 的优秀项目&#xff0c;涵盖了 低代码、报表工具、Web 开发、云原生、通知管理、构建系统、生物计算、位置追踪、API 规范和依赖更新等方面&#xff0c;为开发者和研究人员提供了丰富的资源和灵感。 目录 1.防弹 React&#xff1a;构建强大的 Web 应…

第十周:机器学习笔记

第十周机器学习周报 摘要Abstract机器学习——self-attention&#xff08;注意力机制&#xff09;1. 为什么要用self-attention2. self-attention 工作原理2.1 求α的两种方式2.2 attention-score&#xff08;关联程度&#xff09; Pytorch学习1. 损失函数代码实战1.1 L1loss&a…

电路分析 ---- 加法器

1 同相加法器 分析过程 虚短&#xff1a; u u − R G R G R F u O u_{}u_{-}\cfrac{R_{G}}{R_{G}R_{F}}u_{O} u​u−​RG​RF​RG​​uO​ i 1 u I 1 − u R 1 i_{1}\cfrac{u_{I1}-u_{}}{R_{1}} i1​R1​uI1​−u​​&#xff1b; i 2 u I 2 − u R 2 i_{2}\cfrac{u_{…

如何判断小程序是运行在“企业微信”中的还是运行在“微信”中的?

如何判断小程序是运行在“企业微信”中的还是运行在“微信”中的&#xff1f; 目录 如何判断小程序是运行在“企业微信”中的还是运行在“微信”中的&#xff1f; 一、官方开发文档 1.1、“微信小程序”开发文档的说明 1.2、“企业微信小程序”开发文档的说明 1.3、在企业…

无线信道中ph和ph^2的场景

使用 p h ph ph的情况&#xff1a; Rayleigh 分布的随机变量可以通过两个独立且相同分布的零均值、高斯分布的随机变量表示。设两个高斯随机变量为 X ∼ N ( 0 , σ 2 ) X \sim \mathcal{N}(0, \sigma^2) X∼N(0,σ2)和 Y ∼ N ( 0 , σ 2 ) Y \sim \mathcal{N}(0, \sigma^2)…

终端协会发布《移动互联网应用程序(App)自动续费测评规范》

随着移动互联网的快速发展&#xff0c;App自动续费服务已成为许多应用的标配&#xff0c;但同时也引发了不少消费者的投诉和不满。为了规范这一市场行为&#xff0c;保护消费者的合法权益&#xff0c;电信终端协会&#xff08;TAF&#xff09;发布了《移动互联网应用程序&#…

代码随想录 刷题记录-28 图论 (5)最短路径

一、dijkstra&#xff08;朴素版&#xff09;精讲 47. 参加科学大会 思路 本题就是求最短路&#xff0c;最短路是图论中的经典问题即&#xff1a;给出一个有向图&#xff0c;一个起点&#xff0c;一个终点&#xff0c;问起点到终点的最短路径。 接下来讲解最短路算法中的 d…

【C++】static作用总结

文章目录 1. 在函数内&#xff08;局部静态变量&#xff09;2. 在类中的静态成员变量3. 在类中的静态成员函数4. 在文件/模块中的静态变量或函数总结 1. 在函数内&#xff08;局部静态变量&#xff09; 当 static 用于函数内的局部变量时&#xff0c;该变量的生命周期变为整个…

网络层 V(IPv6)【★★★★★★】

一、IPv6 的特点 IP 是互联网的核心协议。现在使用的 IP&#xff08;即 IPv4 ) 是在 20 世纪 70 年代末期设计的。互联网经过几十年的飞速发展&#xff0c;到 2011 年 2 月&#xff0c;IPv4 的地址已经耗尽&#xff0c; ISP 已经不能再申请到新的 IP 地址块了。我国在 2014 年…

梨花声音教育退费普通话学习技巧之了解文化背景

在学习普通话的过程中&#xff0c;了解中国的文化背景是不可或缺的一环。语言不仅是交流的工具&#xff0c;更是文化的载体。通过深入了解中国的历史、文化和社会背景&#xff0c;学习者可以更好地理解和掌握普通话&#xff0c;使语言学习变得更加生动有趣。本文将从几个方面详…

JWT详解:一种轻量级的身份验证和授权机制

引言 JSON Web Token&#xff08;JWT&#xff09;是一种基于JSON格式的开放标准&#xff08;RFC 7519&#xff09;&#xff0c;它定义了一种紧凑且自包含的方式&#xff0c;用于在各方之间安全地传输信息。JWT因其轻量级、可扩展性和安全性&#xff0c;在Web应用程序和RESTful…

【iOS】属性关键字

目录 深浅拷贝 自定义类 容器类深拷贝 属性关键字 原子操作 atomic nonatomic 读写权限 readwrite readonly 内存管理 weak assign strong retian copy strong与copy 补充 属性关键字格式 ARC下property的默认属性 深浅拷贝 关于深浅拷贝&#xff0c;笔者在…

ClickHouse的安装教程

ClickHouse的安装教程 文章目录 ClickHouse的安装教程写在前面准备工作关闭防火墙CentOS 取消打开文件数限制安装依赖CentOS 取消 SELINUX 单机安装在 **node01** 的/opt/software 下创建 clickhouse 目录将下载的文件上传到 node01 的 /opt/software/clickhouse 目录下将安装文…

FPGA第 9 篇,Verilog 中的关键字和基数

前言 在 Verilog 中&#xff0c;关键字&#xff08;Keywords&#xff09;和基数&#xff08;Radix&#xff09;是语言的重要组成部分&#xff0c;它们有助于描述和定义硬件设计。上期分享了 Verilog 的基本使用&#xff0c;以及数据类型、逻辑值和算数运算符的简单应用&#x…

快手电商上线 “金秋赶蟹季” 活动,特别推出“蟹无忧”服务

金秋九月&#xff0c;正是品蟹好时节。为引入更多源头好蟹&#xff0c;快手电商发起了「金秋赶蟹季」溯源活动。为了让全国老铁提前品尝肥美的盘锦河蟹&#xff0c;9月3日&#xff0c;快手电商携手盘山县人民政府举行盘锦河蟹开捕仪式&#xff0c;并在快手小店 直播间进行全程直…