装WebVideoCreator记录

news2024/9/22 23:36:48

背景,需要在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.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();

直接运行

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.coloradmin.cn/o/2102621.html

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

相关文章

非负矩阵分解

非负矩阵分解 简单来说&#xff0c;就是一个数据矩阵X&#xff0c;也可以理解为特征矩阵&#xff0c;将这个矩阵分解为两个非负矩阵W和H的乘积。 公式可以写成下面&#xff1a; 这里的m和n就是特征的维度&#xff0c;r表示代码中n_components参数 来看个例子&#xff1a; 看看…

office套件打开时 提示操作系统当前的配置不能运行此应用程序

起因使用了腾讯电脑管家的软件搬家功能。 许久后发现打开word提示。 随后使用软件搬家功能中的搬移历史中还原office套件。 依然不可用&#xff08;未尝试重启 大概率重启之后就可以用了 使用的电脑不方便重启&#xff09; 安装office简易修复工具 地址&#xff1a;https://a…

C++相关概念和易错语法(31)(特殊类的设计、new和delete底层调用分析)

特殊类的设计 在实践过程中&#xff0c;我们难免会接触到一些需要实现特定功能的类。像之前提过的unique_ptr就是直接delete拷贝构造和赋值函数。下面会分享一些常见的特殊类的实现 1、防拷贝和防赋值 通过封死拷贝构造和赋值函数来保护对象里面内容不被复制。如果对象里面的…

JS 对象深浅拷贝

1. 浅拷贝的原理和实现 自己创建一个新的对象&#xff0c;来接受你要重新复制或引用的对象值。如果对象属性是基本的数据类型&#xff0c;复制的就是基本类型的值给新对象&#xff1b;但如果属性是引用数据类型&#xff0c;复制的就是内存中的地址&#xff0c;如果其中一个对象…

从0开始学杂项 第八期:流量分析(2) 数据提取

Misc 学习&#xff08;八&#xff09; - 流量分析&#xff1a;数据提取 这一期&#xff0c;我们主要写一下如何进行比较繁多的数据的提取。 使用 Tshark 批量提取数据 有时候&#xff0c;我们会需要从多个包中提取数据&#xff0c;然后再进行截取和组合&#xff0c;比如分析…

千云物流 -低代码平台MySQL备份数据

windows备份 全量备份 创建备份目录 需要在安装数据库的服务器上创建备份目录,所有如果要做备份至少需要两倍的硬盘空间, mkdir D:\mysql_backup\full_backup准备备份脚本 创建一个windows批处理文件(例如 full_backup.bat),用来执行全量备份并使用 robocopy 将备份文件…

HTTP 一、基础知识

一、概述 1、概述 HTTP&#xff08;Hyper Text Transfer Protocol&#xff09;&#xff1a; 全称超文本传输协议&#xff0c;是用于从万维网&#xff08;WWW:World Wide Web &#xff09;服务器传输超文本到本地浏览器的传送协议。HTTP 是一种应用层协议&#xff0c;是基于 …

VUE3 使用 <transition> 实现组件切换的过渡效果

由于我想在项目中实现路由组件切换时的平滑过渡效果&#xff0c;以避免页面加载时的突兀感&#xff0c;大致效果如下&#xff1a; 上面的代码是使用的若依的代码&#xff0c;代码具体如下所示&#xff1a; <section class"app-main"><transition name&quo…

HarmonyOS开发移动应用:调用百度翻译开放平台的App Id和密钥

介绍 通过http请求和HarmonyOS自带的加密框架&#xff0c;可以为移动应用实现调用百度翻译API的功能。 开发环境要求 • DevEco Studio版本&#xff1a;DevEco Studio 3.1 Release • HarmonyOS SDK版本&#xff1a;API version 9 工程要求 • API9 • Stage模型 正文 ▍代码…

QT+OSG+osg-earth显示一个球

目录 1、环境配置 2、在QT Creator导入相关的库 3、代码部分 4、运行过程中的问题 5、相关参考 重要衔接&#xff1a;QTOSG显示一个三维模型-CSDN博客 1、环境配置 系统&#xff1a;windows10系统 QT:版本5.15.2 编译器&#xff1a;MSVC2019_64bit 编辑器…

Conda在线/离线迁移虚拟环境

conda简单使用 1.创建环境&#xff1a; conda create -n myenv python3.82.激活环境 conda activate myenv3.退出环境 conda deactivate4.安装包 pip install xxx5.列出所有环境 conda env list conda info --envs6.删除环境 conda remove -n myenv --all离线迁移conda …

GD32F103单片机-概述和工程建立

GD32F103单片机-概述和工程建立 一、GD32F103单片机介绍1.1 GD32F103C8T6引脚1.2 GD32F103C8T6系统架构和启动配置1.3 GD32F103C8T6时钟树 二、GD32F103工程建立 一、GD32F103单片机介绍 GD32F103系列由是由国内公司兆易创新生产的基于Arm Cortex-M3处理器的单片机位数&#x…

陪诊志愿服务正在开展,喜鹊医疗打造国内首家陪诊聚合平台

2024年8月&#xff0c;为了培养一支专业、合格的陪诊志愿服务队伍&#xff0c;为志愿者提供就业帮扶&#xff0c;也满足社会日益增长的健康需求。由喜鹊医疗捐赠专项资金&#xff0c;中国民族卫生协会联合中国志愿基金会共同开展“健康中国行&#xff0c;陪诊惠民工程——陪诊志…

django学习入门系列之第十点《django中数据库操作--创建与删除表》

文章目录 django创建与删除表开始创建表创建指令新增表删除表删除列新增列修改报错提示语言总结 往期回顾 django创建与删除表 删除表 创建表 修改表 操作目录 开始创建表 class text_into(models.Model):name models.CharField(max_length32)password models.CharField…

二手手机回收小程序搭建,小程序功能特点

随着社会生活水平的提高&#xff0c;对手机的更新换代的速度也在逐渐加快&#xff0c;出现了大量的闲置手机&#xff0c;而这也给手机回收市场带来了巨大的发展空间&#xff01; 目前&#xff0c;手机回收市场进入到了发展快速期&#xff0c;吸引了越来越多的企业加入大市场中…

java重点学习-spring

三 spring 3.1 Spring框架中的单例bean是线程安全的吗? 不是线程安全的 Spring框架中有一个Scope注解&#xff0c;默认的值就是singleton&#xff0c;单例的。 因为一般在spring的bean的中都是注入无状态的对象&#xff0c;没有线程安全问题&#xff0c;如果在bean中定义了…

基于纠错码的哈希函数构造方案

一、前言 随着大数据时代的到来&#xff0c;交通数据量急剧增加&#xff0c;由此带来的交通安全问题日益凸显。传统的驾驶人信用管理系统在数据存储和管理上存在着诸多不足之处&#xff0c;例如中心化存储方案无法有效地进行信用存证及数据溯源。区块链技术以其去中心化和不可…

移动硬盘无法访问怎么修复?

移动硬盘是一种方便的存储设备&#xff0c;但有时可能会遇到无法访问的问题。这不仅影响工作效率&#xff0c;还可能导致数据丢失。本文将详细介绍在Windows系统中移动硬盘无法访问怎么修复&#xff0c;帮助您恢复数据和硬盘功能。 移动硬盘无法访问的常见原因 硬盘故障&#…

1998-2023年上市公司金融/信贷/资本资源错配程度数据(含原始数据+计算代码+结果)

1998-2023年上市公司金融/信贷/资本资源错配程度数据&#xff08;含原始数据计算代码结果&#xff09; 1、时间&#xff1a;1998-2023年 2、来源&#xff1a;上市公司年报 3、指标&#xff1a;证券代码、year、应付账款、负债合计、利息支出、行业代码、是否ST或PT、上市日期…

Scott Brinker:Martech中的AI会让买家体验更好还是更糟?这取决于…….

Martech中的AI会让买家体验更好还是更糟&#xff1f; 你怎么知道自己正处于炒作周期的顶峰&#xff1f;当手段大于目的。 Martech专业人士和营销运营领导者正被推动将人工智能应用于营销——将其用于任何事情&#xff01;——相信人工智能的自动化和加速&#xff0c;尤其是生…