TNTWeb - 全称腾讯新闻前端团队,组内小伙伴在 Web 前端、NodeJS 开发、UI 设计、挪动 APP 等大前端畛域都有所实际和积攒。
目前团队次要反对腾讯新闻各业务的前端开发,业务开发之余也积攒积淀了一些前端基础设施,赋能业务提效和产品翻新。
团队提倡开源共建,领有各种技术大牛,团队 Github 地址:https://github.com/tnfe
明天为大家介绍 shida, 我的项目地址: shida
介绍
可视化搭建,听起来神秘又弱小。然而他又能够非常简单。
随着网络上短视频流量的持续增长,随着生产、生活习惯的扭转,便捷、活泼的视频化内容展示模式,胜利博得了用户的信赖,用户们对短视频的依赖水平也直线回升。视频可视化搭建平台的渗透力也越来越强。
视频可视化搭建工具, 是常见的经营工具, 能够让用户疾速编辑和生成视频, 晋升效率。但从零开始设计和开发出这种工具并不简略。
明天要介绍的《视搭》, 提供了视频可视化搭建的外围性能, 免去从零实现视频可视化搭建工具的艰难。
《视搭》是一个视频可视化搭建我的项目。您能够通过简略的拖拽形式疾速生产一个短视频,应用形式就像易企秀或百度 H5 等 h5 搭建工具一样的简略。目前行业内罕有对于视频可视化搭建的开源我的项目,《视搭》是一个绝对比拟残缺的开源我的项目,仅抛砖引玉心愿您喜爱。
《视搭》的后端视频合成局部是基于FFCreator
https://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、公共款式和动画的性能
- 用户在左侧组件区域抉择组件增加到页面上,编辑区域通过动静组件个性渲染出每个元素组件。
视频合成外围
- 基于
FFCreator
https://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