乐趣区

关于视频:视搭-视频可视化搭建

jiezi

TNTWeb – 全称腾讯新闻前端团队，组内小伙伴在 Web 前端、NodeJS 开发、UI 设计、挪动 APP 等大前端畛域都有所实际和积攒。

目前团队次要反对腾讯新闻各业务的前端开发，业务开发之余也积攒积淀了一些前端基础设施，赋能业务提效和产品翻新。

团队提倡开源共建，领有各种技术大牛，团队 Github 地址：https://github.com/tnfe

明天为大家介绍 shida，我的项目地址: shida

介绍

可视化搭建，听起来神秘又弱小。然而他又能够非常简单。

随着网络上短视频流量的持续增长，随着生产、生活习惯的扭转，便捷、活泼的视频化内容展示模式，胜利博得了用户的信赖，用户们对短视频的依赖水平也直线回升。视频可视化搭建平台的渗透力也越来越强。

视频可视化搭建工具, 是常见的经营工具, 能够让用户疾速编辑和生成视频, 晋升效率。但从零开始设计和开发出这种工具并不简略。

明天要介绍的《视搭》, 提供了视频可视化搭建的外围性能, 免去从零实现视频可视化搭建工具的艰难。

《视搭》是一个视频可视化搭建我的项目。您能够通过简略的拖拽形式疾速生产一个短视频，应用形式就像易企秀或百度 H5 等 h5 搭建工具一样的简略。目前行业内罕有对于视频可视化搭建的开源我的项目，《视搭》是一个绝对比拟残缺的开源我的项目，仅抛砖引玉心愿您喜爱。

《视搭》的后端视频合成局部是基于 FFCreatorhttps://github.com/tnfe/FFCre… 这个库开发的，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、公共款式和动画的性能
  • 用户在左侧组件区域抉择组件增加到页面上，编辑区域通过动静组件个性渲染出每个元素组件。

视频合成外围

  • 基于 FFCreatorhttps://github.com/tnfe/FFCre…，只须要很少的依赖和较低的机器配置就能够疾速开始工作

开发调试

启动 mongodb

  • 装置 mongodb：https://zhuanlan.zhihu.com/p/…
  • 配置 mongodb：配置文件在 /server/config/index.js
  • 启动 mongodb：https://www.cnblogs.com/zhm19…

装置依赖 

npm i

启动前端并开启 watch 模式

此模式下会开启热更新 

npm run watch-publish

启动服务端 

npm run dev-server
启动完拜访 http://localhost:4000 就能够看到工程页面了

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

公布部署

启动 mongodb

  • 装置 mongodb：https://zhuanlan.zhihu.com/p/…
  • 配置 mongodb：配置文件在 /server/config/index.js
  • 启动 mongodb：https://www.cnblogs.com/zhm19…

须要全局装置 pm2

npm install pm2 -g

启动命令 

npm run publish && npm run start

2021 年曾经过来，这一年前端产生了很多的事件，甚至能够发现一些新的货色，心愿可能站在当下看将来。

这里我援用一句话——行而不辍，将来可期，咱们会在前端畛域始终深耕上来，咱们也置信继续做上来肯定会播种应有的价值。

团队

TNTWeb – 腾讯新闻前端团队，TNTWeb 致力于行业前沿技术摸索和团队成员集体能力晋升。为前端开发人员整顿出了小程序以及 web 前端技术畛域的最新优质内容，每周更新 ✨，欢送 star，github 地址：https://github.com/tnfe/TNT-Weekly

退出移动版