视搭 -- 视频可视化搭建

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