视频可视化搭建项目,通过简单拖拽方式快速生产一个短视频

news2024/11/26 8:20:31

一、开源项目简介

《视搭》是一个视频可视化搭建项目。您可以通过简单的拖拽方式快速生产一个短视频,使用方式就像易企秀或百度 H5 等 h5 搭建工具一样的简单。目前行业内罕有关于视频可视化搭建的开源项目,《视搭》是一个相对比较完整的开源项目,仅抛砖引玉希望您喜欢。

二、开源协议

使用Apache-2.0开源协议

三、界面展示

图片预览

四、功能概述

《视搭》的后端视频合成部分是基于FFCreator这个库开发的,FFCreator 是一个基于 node.js 的轻量、灵活的短视频加工库。您只需要添加几张图片或视频片段再加一段背景音乐,就可以快速生成一个很酷的视频短片。

《视搭》前端部分 fork 自quark-h5项目开发,本项目未做太多扩展。quark-h5 是一个很棒的 h5 搭建开源工具,架构合理、代码比较清晰易读,感谢作者。

工程目录

|-- client          --------前端项目界面代码
    |--common          --------前端界面对应静态资源
    |--components        --------组件
    |--config          --------配置文件
    |--eventBus          --------eventBus
    |--filter          --------过滤器
    |--mixins          --------混入
    |--pages          --------页面
    |--router          --------路由配置
    |--store          --------vuex状态管理
    |--service          --------axios封装
    |--App.vue          --------App
    |--main.js          --------入口文件
    |--permission.js              --------权限控制
|-- server          --------服务器端项目代码
    |--confog          --------配置文件
    |--controller        --------数据库链接相关
    |--extend          --------框架扩展
    |--model          -------Schema和Model
    |--middleware        --------中间件
    |--core                --------Koa MVC实现自动加载核心文件
    |--views          --------ejs页面模板
    |--public          --------静态资源
    |--router.js        --------路由
    |--app.js          --------服务端入口
|-- common          --------前后端公用代码模块(如加解密)
|-- engine-template              --------页面模板引擎,使用webpack打包成js提供页面引用
|-- config.json                --------配置文件

编辑器整体设计

  • 一个组件选择区,提供使用者选择需要的组件
  • 一个编辑预览画板,提供使用者拖拽排序页面预览的功能
  • 一个组件属性编辑,提供给使用者编辑组件内部 props、公共样式和动画的功能
  • 用户在左侧组件区域选择组件添加到页面上,编辑区域通过动态组件特性渲染出每个元素组件。

五、技术选型

开发调试

启动 mongodb

  • 安装 mongodb
  • 配置 mongodb:配置文件在/server/config/index.css
  • 启动 mongodb

安装依赖

npm i
  • 在依赖安装过程中会去根据用户当前环境 自动拉取 FFmpeg 的相关二进制包,具体各个系统的相关二进制包可见node-ffmpeg-installer二进制包详解

启动前端并开启 watch 模式

此模式下会开启热更新

npm run watch-publish

启动服务端

npm run dev-server

启动完访问http://localhost:4000就可以看到工程页面了

先注册用户, 然后登陆体验操作

发布部署

启动 mongodb

  • 安装 mongodb
  • 配置 mongodb:配置文件在/server/config/index.css
  • 启动 mongodb

需要全局安装 pm2

npm install pm2 -g

启动命令

npm run publish && npm run start

六、源码地址

https://download.csdn.net/download/weixin_37576193/87727100

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

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

相关文章

矿井下无人值守变电所电力监控系统的探讨与产品选型

摘要:为了探讨井下无人值守变电所的电力监控系统技术,以西山煤电马兰矿为背景,详细阐述了井下无人值守变电所电力监控系统技术的各项基本参数,如额定工作电压及整机输入视在功率、交换机或监控分站的传输口、高压配电装置的传输口…

(二)ElasticSearch 辅助工具 Kibana 介绍与安装

1、什么是 kibana ? Kibana 是一个针对Elasticsearch的开源分析及可视化平台,用来搜索、查看交互存储在Elasticsearch索引中的数据。使用Kibana,可以通过各种图表进行高级数据分析及展示。 Kibana让海量数据更容易理解。它操作简单&#xff…

怎么使用chatgpt,GPT的使用方式解析

怎么使用Chatgpt?这是很多人心中的疑惑,更多的人只是听说过chatgpt的大名,但是具体连见都没见过gpt,那么接下来小编就来给大家详细的介绍一下吧。 一.了解chatgpt ChatGPT是一个由人工智能和自然语言处理技术构建的聊天机器人。通…

[pytorch]FixMatch代码详解-数据加载

原文 FixMatch: Simplifying Semi-Supervised Learning with Consistency and Confidence. 这里还有一个译制版的很方便阅读 FixMatch:通过一致性和置信度简化半监督学习 代码 pytorch的代码有很多版本,我选择了比较简单的一个: unoffi…

记一次某应用虚拟化系统远程代码执行

漏洞简介 微步在线漏洞团队通过“X漏洞奖励计划”获取到瑞友天翼应用虚拟化系统远程代码执行漏洞情报(0day),攻击者可以通过该漏洞执行任意代码,导致系统被攻击与控制。瑞友天翼应用虚拟化系统是基于服务器计算架构的应用虚拟化平台,它将用户…

xxl-job 7.32版本 安装部署

文章目录 前言xxl-job 7.32版本 安装部署1. xxl-job 是什么2. 特性3. xxl-job 部署安装3.1. 下载源码3.2. 部署:3.2.1. 初始化调度数据库3.2.2. 配置调度中心 前言 如果您觉得有用的话,记得给博主点个赞,评论,收藏一键三连啊,写作…

GDOUCTF2023-部分re复现

目录 [GDOUCTF 2023]Check_Your_Luck [GDOUCTF 2023]Tea [GDOUCTF 2023]doublegame [GDOUCTF 2023]Check_Your_Luck 打开题目是一串代码,明显的z3约束器求解 直接上脚本 import z3 from z3 import Reals z3.Solver() vReal(v) xReal(x) yReal(y) wReal(w) zRea…

cocosLua 之文本相关

Text 用于创建系统或ttf文本, 类结构: #mermaid-svg-bMIqhf5X7M9uF2Ba {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-bMIqhf5X7M9uF2Ba .error-icon{fill:#552222;}#mermaid-svg-bMIqhf5X7…

走进社区客户端测试 | 得物技术

0.引言 社区 C 端质量体系建设思考? 询问一下 ChatGPT 1、关于社区客户端 1.1 社区端上功能 得物首页 搜索、发布、关注流、推荐流、沉浸式单列流、活动 tab、其他二级频道 tab 动态详情页 图文、视频、专栏、点评 私域 个人/他人主页、通讯录好友、微博好友…

不得不用ChatGPT的100个理由……

❝ 最近无论在哪,很多人都在吹ChatGPT无所不能,动不动就是AI要颠覆人类,很多人害怕有一天AI会取代自己,我认为明显是多虑了…… ❝ 当然,也有很多小白试用了ChatGPT之后,并没有感觉到他很强大,主…

车载以太网解决方案

近年来,为了满足智能网联汽车的开发要求,车载以太网技术开始逐渐进入人们的视野。而以太网技术已经成为下一代车载络架构的趋势之一,其发展之迅猛,使得各主机厂纷纷产生了浓厚的兴趣并投入研发。 一 为什么使用车载以太网 | 对高…

什么牌子台灯好用不伤眼睛?盘点国内值得入手的护眼灯

选择一款不伤眼睛的台灯主要看光照柔和、光照范围广,符合标准照度国A或国AA、显色指数Ra90以上、无眩光、RG0无危害蓝光、无可视频闪等,对于现在许多青少年的近视率增加,一旦近视就无法恢复,保护好眼睛,在学习阅读时&a…

SpringBoot使用ElasticSearch

ES官网:https://www.elastic.co/cn/downloads/elasticsearch ES下载地址:https://www.elastic.co/cn/downloads/past-releases#elasticsearch kibana官网:https://www.elastic.co/cn/downloads/kibana kibana下载地址:https://…

小红书笔记发布软件 批量上传视频

百收网SEO短视频矩阵发布丨9平台视频发布助手 软件简述:软件仅支持win系统, 软件使用的是网页版模拟协议软件不绑定电脑,任意换机,不限登录账号数量, 软件支持抖音,快手,视频号,西瓜…

P1034 [NOIP2002 提高组] 矩形覆盖

题目描述 在平面上有 �n 个点,每个点用一对整数坐标表示。例如:当 �4n4 时,44 个点的坐标分另为:�1(1,1)p1​(1,1),�2(2,2)p2​(2,2),�3(3,6)p3​…

设备树总结

设备树的概念: 设备树(Device Tree:DT)是用来描述设备信息的一种树形结构。设备树文件在linux内核启动的时候传递到内核被内核解析。设备树中每一个设备节点中的信息构成了一个属性链表,如果驱动想要使用这个设备信息,只需要在这…

UE4架构初识(五)

UE4仿真引擎学习 一、架构基础 1. GameInstance UE提供的方案是一以贯之的,为我们提供了一个GameInstance类。为了受益于UObject的反射创建能力,直接继承于UObject,这样就可以依据一个Class直接动态创建出来具体的GameInstance子类。 UGam…

Pytest接口自动化测试实战演练

结合单元测试框架pytest数据驱动模型allure 目录 api: 存储测试接口conftest.py :设置前置操作目前前置操作:1、获取token并传入headers,2、获取命令行参数给到环境变量,指定运行环境commmon:存储封装的公共方法connect_mysql.p…

C. Magic Ship(二分 + 前缀和)

Problem - C - Codeforces 你是一艘船的船长。最初你站在一个点(x1,y1)上(很明显,海上的所有位置都可以用笛卡尔平面描述),你想要前往一个点(x2,y2)。 你知道天气预报——长度为n的字符串s,仅由…

实战详解Docker快速搭建部署ELK

一.安装前须知 以下步骤在 VMware 中的 centos 7 中操作,ip 地址为:192.168.161.128; 注意安装的时候最好统一版本,否则后面会出现许多问题,进官网搜索对应镜像,查看 Tags 标签下的版本,目前我…