《视搭》一个完整的视频可视化搭建项目《视搭》是一个视频可视化搭建项目。您可以通过简单的拖拽方式快速生产一个短视频，使用方

TNTWeb - 全称腾讯新闻前端团队，组内小伙伴在Web前端、NodeJS开发、UI设计、移动APP等大前端领域都有所实践和积累。

目前团队主要支持腾讯新闻各业务的前端开发，业务开发之余也积累沉淀了一些前端基础设施，赋能业务提效和产品创新。

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

介绍

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

《视搭》的后端视频合成部分是基于FFCreatorgithub.com/tnfe/FFCrea…这个库开发的，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、公共样式和动画的功能
用户在左侧组件区域选择组件添加到页面上，编辑区域通过动态组件特性渲染出每个元素组件。

视频合成核心

基于FFCreatorgithub.com/tnfe/FFCrea…，只需要很少的依赖和较低的机器配置就可以快速开始工作

开发调试

启动 mongodb

安装 mongodb：zhuanlan.zhihu.com/p/394960855
配置 mongodb：配置文件在/server/config/index.js
启动 mongodb：www.cnblogs.com/zhm1985/p/1…

安装依赖

npm i

启动前端并开启 watch 模式

此模式下会开启热更新

npm run watch-publish

启动服务端

npm run dev-server

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

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

发布部署

启动 mongodb

安装 mongodb：zhuanlan.zhihu.com/p/394960855
配置 mongodb：配置文件在/server/config/index.js
启动 mongodb：www.cnblogs.com/zhm1985/p/1…

需要全局安装 pm2

npm install pm2 -g

启动命令

npm run start

License

Apache License 2.0

MR 流程

TNTWeb 团队会查看所有的 MR，我们会运行一些代码检查和测试，一经测试通过，我们会接受这次 MR，但不会立即发布外网，会有一些延迟。

当您准备 MR 时，请确保已经完成以下几个步骤:

将主仓库代码 Fork 到自己名下。
基于 master 分支创建您的开发分支。
如果您更改了 API(s) 请更新代码及文档。
检查您的代码语法及格式。
提一个 MR 到主仓库的 master 分支上。

如何加入

我们十分期待您的任何贡献，无论是修复错别字、提 Bug 还是提交一个新的特性。

如果您使用过程中发现 Bug，请通过 issues 来提交并描述相关的问题，您也可以在这里查看其它的 issue，通过解决这些 issue 来贡献代码。