装WebVideoCreator记录

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

https://github.com/Vinlic/WebVideoCreatorWebVideoCreator地址: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.xdnf.cn/news/1522939.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Spring Boot-自定义banner

在 Spring Boot 应用中&#xff0c;你可以自定义启动时显示的 banner。这些 banner 可以包括图形、文字或者其他形式的标识。如图所示&#xff1a; 1. 使用 banner.txt 文件 默认情况下&#xff0c;Spring Boot 使用项目的 banner.txt 文件中的内容作为启动时的 banner。你可以…

文献阅读:对区域间皮层投射神经元命运多样性的时间控制

文献介绍 文献题目&#xff1a; 对区域间皮层投射神经元命运多样性的时间控制 研究团队&#xff1a; Denis Jabaudon&#xff08;瑞士日内瓦大学&#xff09; 发表时间&#xff1a; 2021-11-09 发表期刊&#xff1a; Nature 影响因子&#xff1a; 49.9&#xff08;2021年&am…

关于电力系统的几个疑问

非电力专业人员对于电力中的某些知识不能够形成系统的认识&#xff0c;接下有空也有补充下这方面知识&#xff0c;吹水时候才有水可以吹&#xff0c;嘻嘻&#xff01;这里舍不得删掉下边chatgpt这几张图片&#xff0c;暂时先保留着。因为一直有个因为在电网里边用发电端和用电端…

EmguCV学习笔记 C# 9.3 移动检测类

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 EmguCV是一个基于OpenCV的开源免费的跨平台计算机视觉库,它向C#和VB.NET开发者提供了OpenCV库的大部分功能。 教程VB.net版本请访问…

爬取图片保存为pdf

本文章想借着爬虫给大家介绍一下图片转pdf,有需要的友友们可以看看参考参考&#xff0c;有帮助到友友的可以收藏&#xff0b;关注。下面以爬取初中7年级数学上册为例给大家演示一下。网址是这个 https://mp.weixin.qq.com/s?__bizMzAxOTE4NjI1Mw&mid2650214000&idx…

智慧医院是什么?建设智慧医院的关键步骤

智慧医院是什么&#xff1f; 智慧医院是一种新型的医疗机构&#xff0c;它利用先进的信息技术、数据分析和智能化系统&#xff0c;优化医院的管理和服务流程&#xff0c;提高医疗质量和效率。在智慧医院中&#xff0c;所有的运营和管理环节都可以通过数据驱动的方式来实现优化…

Trollspeed网速悬浮窗,精简且强大

我很喜欢iOS的界面UI&#xff0c;它的设计哲学是以人为本&#xff0c;简约而不简单。不过有时候&#xff0c;我也会觉得iOS简约过头了。人类是很没安全感的动物&#xff0c;获取的信息量足够多&#xff0c;我们才会感觉到安全。 在iOS16中&#xff0c;苹果加入了电量百分比显示…

一种快速edit的方法

后端的CURD&#xff0c;通过chatgpt很容易。 前端的CURD&#xff0c;编辑操作稍微有点复杂。 我一开始的想法是编辑的时候使用一个模态框&#xff0c;但是发现不舒服&#xff0c;为了快速实现&#xff0c;我决定点击编辑的时候&#xff0c;直接打开新的页面&#xff0c;这样开…

[数据集][目标检测]街头摊贩识别检测数据集VOC+YOLO格式758张1类别

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

航电系统,无人机的核心!!!

一、核心组成部分 飞控系统 定义&#xff1a;无人机飞行控制系统&#xff0c;负责接收来自传感器的数据&#xff0c;并根据飞行任务指令&#xff0c;通过算法计算出无人机的姿态和位置信息&#xff0c;进而控制无人机的飞行状态。 组成&#xff1a;通常由主控制器、姿态传感…

深度学习助力病理切片虚拟组织染色|文献精析·24-09-03

小罗碎碎念 这篇文章综述了深度学习技术在生物样本虚拟组织染色领域的最新研究进展&#xff0c;探讨了其在提高病理诊断效率和降低成本方面的潜力。 作者角色作者姓名单位名称&#xff08;英文&#xff09;单位名称&#xff08;中文&#xff09;第一作者Bijie BaiElectrical an…

Flutter App名称跟随手机语言改变而改变

Android 1.修改android/app/src/main/AndroidManifest.xml中的android:lable的值为string/app_name 2.在android/app/src/main/res/values/styles.xml文件中添加App的名称&#xff0c;如果没有这个文件请自行添加。 这里说明一下&#xff0c;如果没有手机语言对应的App名称&a…

Linux之nginx部署项目【前后端分离】(外加redis安装)

nginx安装和访问 1.使用apt安装Nginx apt install -y nginx 用whereis nginx找到和nginx相关目录 nginx目录结构 /usr/sbin/nginx 服务文件 /etc/nginx 配置目录 /usr/share/nginx/html 发部项目 服务名: nginx.service ps -ef | grep nginx apt install -y net-tools …

kafka及异步通知文章上下架

1)自媒体文章上下架 需求分析 2)kafka概述 消息中间件对比 特 性 ActiveMQ RabbitMQ RocketMQ Kafka 开 发 语 言 java erlang java scala 单 机 吞 吐 量 万级 万级 10万级 100万级 时 效 性 ms us ms ms级以内 可 用 性 高&#xff08;主从&#xff0…

c++(list)

目录 迭代器 sort(随机迭代器)​编辑 list(双向迭代器) vector(随记迭代器) find(input迭代器--只读--可传任意类型迭代器) ​编辑 尾插 push_back/emplace_back 插入数据 删除 交换(swap) 排序 链表合并(merge) 删除(remove) 剪切(splice) 去重(un…

Opencv中的直方图(3)直方图比较函数compareHist()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 比较两个直方图。 函数 cv::compareHist 使用指定的方法比较两个密集或两个稀疏直方图。 该函数返回 d ( H 1 , H 2 ) d(H_1, H_2) d(H1​,H2​…

巧用xrename批量重命名下载的影视文件

网上下载了个电视剧&#xff0c;可是文件名比较长&#xff0c;而且是集数用中文表示的&#xff0c;排序都是乱的。期望的是&#xff1a; 1.文件名改短 2.中文的数字改成阿拉伯数字 看下原始文件名&#xff1a; 期望将文件名改短&#xff0c;例如&#xff1a; 修改前&#xff…

Golang环境安装、配置详细

Windows下安装Go开发环境 点我下载 Windows配置Go环境变量 出现工具install失败时&#xff0c;切换其它代理 # 1. 七牛 CDN go env -w GOPROXYhttps://goproxy.cn,direct# 2. 阿里云 go env -w GOPROXYhttps://mirrors.aliyun.com/goproxy/,direct# 3. 官方 go env -w GOP…

硬件工程师笔试面试知识器件篇——电阻

目录 1、电阻 1.1 基础 电阻原理图 阻实物图 1.1.1、定义 1.1.2、工作原理 1.1.3、类型 1.1.4、材料 1.1.5、标记 1.1.6、应用 1.1.7、特性 1.1.8、测量 1.1.9、计算 1.1.10、颜色编码 1.1.11、公差 1.1.12、功率 1.1.13、重要性 1.2、相关问题 1.2.1、电阻…

电路分析 ---- 同相比例放大器和电压跟随器

1 同相比例运算放大器 同相比例运算放大电路引入了电压串联负反馈&#xff0c;故可以认为输入电阻无穷大&#xff0c;输出电阻为0 分析过程 虚短&#xff0c; u N u P u I u_{N}u_{P}u_{I} uN​uP​uI​ i F i R → u o − u N R f u N − 0 R → u o − u I R f u I R i…