{"id":13415224,"url":"https://github.com/tnfe/shida","last_synced_at":"2025-05-15T14:05:18.856Z","repository":{"id":36978306,"uuid":"448164235","full_name":"tnfe/shida","owner":"tnfe","description":"《视搭》是一个视频可视化搭建项目。您可以通过简单的拖拽方式快速生产一个短视频，使用方式就像易企秀或Maka 等 h5 搭建工具一样的简单，仅抛砖引玉希望您喜欢。","archived":false,"fork":false,"pushed_at":"2024-11-27T09:04:45.000Z","size":41352,"stargazers_count":602,"open_issues_count":15,"forks_count":152,"subscribers_count":23,"default_branch":"main","last_synced_at":"2025-04-11T14:59:24.674Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tnfe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-01-15T02:43:34.000Z","updated_at":"2025-04-11T09:35:11.000Z","dependencies_parsed_at":"2025-04-11T11:49:11.310Z","dependency_job_id":null,"html_url":"https://github.com/tnfe/shida","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tnfe%2Fshida","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tnfe%2Fshida/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tnfe%2Fshida/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tnfe%2Fshida/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tnfe","download_url":"https://codeload.github.com/tnfe/shida/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254355334,"owners_count":22057354,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T21:00:45.477Z","updated_at":"2025-05-15T14:05:13.847Z","avatar_url":"https://github.com/tnfe.png","language":"Vue","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"/client/common/images/logo.jpg\" /\u003e\n\u003c/p\u003e\n\n## 介绍\n\n《视搭》是一个视频可视化搭建项目。您可以通过简单的拖拽方式快速生产一个短视频，使用方式就像易企秀或百度 H5 等 h5 搭建工具一样的简单。目前行业内罕有关于视频可视化搭建的开源项目，《视搭》是一个相对比较完整的开源项目，仅抛砖引玉希望您喜欢。\n\n《视搭》的后端视频合成部分是基于`FFCreator`[https://github.com/tnfe/FFCreator](https://github.com/tnfe/FFCreator)这个库开发的，FFCreator 是一个基于 node.js 的轻量、灵活的短视频加工库。您只需要添加几张图片或视频片段再加一段背景音乐，就可以快速生成一个很酷的视频短片。\n\n\u003cp align=\"center\"\u003e\n \u003cimg width=\"650px\" src=\"https://tnfe.github.io/FFCreator/_media/logo/logo.png\" /\u003e\n\u003c/p\u003e\n\n《视搭》前端部分 fork 自[quark-h5](https://github.com/huangwei9527/quark-h5)项目开发，本项目未做太多扩展。quark-h5 是一个很棒的 h5 搭建开源工具，架构合理、代码比较清晰易读，感谢作者。\n\n**项目预览：**\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"/assets/demo.gif\" /\u003e\n\u003c/p\u003e\n\n![](https://user-gold-cdn.xitu.io/2019/11/10/16e55daeaa08bd25?w=1733\u0026h=816\u0026f=gif\u0026s=4898484)\n\n## 工程目录\n\n```javascript\n|-- client\t\t\t\t\t--------前端项目界面代码\n    |--common\t\t\t\t\t--------前端界面对应静态资源\n    |--components\t\t\t\t--------组件\n    |--config\t\t\t\t\t--------配置文件\n    |--eventBus\t\t\t\t\t--------eventBus\n    |--filter\t\t\t\t\t--------过滤器\n    |--mixins\t\t\t\t\t--------混入\n    |--pages\t\t\t\t\t--------页面\n    |--router\t\t\t\t\t--------路由配置\n    |--store\t\t\t\t\t--------vuex状态管理\n    |--service\t\t\t\t\t--------axios封装\n    |--App.vue\t\t\t\t\t--------App\n    |--main.js\t\t\t\t\t--------入口文件\n    |--permission.js\t\t\t        --------权限控制\n|-- server\t\t\t\t\t--------服务器端项目代码\n    |--confog\t\t\t\t\t--------配置文件\n    |--controller\t\t\t\t--------数据库链接相关\n    |--extend\t\t\t\t\t--------框架扩展\n    |--model\t\t\t\t\t-------Schema和Model\n    |--middleware\t\t\t\t--------中间件\n    |--core\t\t\t\t        --------Koa MVC实现自动加载核心文件\n    |--views\t\t\t\t\t--------ejs页面模板\n    |--public\t\t\t\t\t--------静态资源\n    |--router.js\t\t\t\t--------路由\n    |--app.js\t\t\t\t\t--------服务端入口\n|-- common\t\t\t\t\t--------前后端公用代码模块（如加解密）\n|-- engine-template\t\t\t        --------页面模板引擎，使用webpack打包成js提供页面引用\n|-- config.json\t\t\t\t        --------配置文件\n```\n\n### 编辑器整体设计\n\n- 一个组件选择区，提供使用者选择需要的组件\n- 一个编辑预览画板，提供使用者拖拽排序页面预览的功能\n- 一个组件属性编辑，提供给使用者编辑组件内部 props、公共样式和动画的功能\n- 用户在左侧组件区域选择组件添加到页面上，编辑区域通过动态组件特性渲染出每个元素组件。\n\n### 视频合成核心\n\n- 基于`FFCreator`[https://github.com/tnfe/FFCreator](https://github.com/tnfe/FFCreator)，只需要很少的依赖和较低的机器配置就可以快速开始工作\n\n## 开发调试\n\n### 启动 mongodb\n\n- 安装 mongodb：[https://zhuanlan.zhihu.com/p/394960855](https://zhuanlan.zhihu.com/p/394960855)\n- 配置 mongodb：配置文件在`/server/config/index.js`\n- 启动 mongodb：[https://www.cnblogs.com/zhm1985/p/13111448.html](https://www.cnblogs.com/zhm1985/p/13111448.html)\n\n### 安装依赖\n\n```\nnpm i\n```\n\n- 在依赖安装过程中会去根据用户当前环境 自动拉取 `FFmpeg` 的相关二进制包，具体各个系统的相关二进制包可见[node-ffmpeg-installer二进制包详解](https://github.com/kribblo/node-ffmpeg-installer#the-binaries)\n\n### 启动前端并开启 watch 模式\n\n此模式下会开启热更新\n\n```\nnpm run watch-publish\n```\n\n### 启动服务端\n\n```\nnpm run dev-server\n```\n\n##### 启动完访问http://localhost:4000 就可以看到工程页面了\n\n### 先注册用户, 然后登陆体验操作\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"/assets/login.jpg\" /\u003e\n\u003c/p\u003e\n\n## 发布部署\n\n### 启动 mongodb\n\n- 安装 mongodb：[https://zhuanlan.zhihu.com/p/394960855](https://zhuanlan.zhihu.com/p/394960855)\n- 配置 mongodb：配置文件在`/server/config/index.css`\n- 启动 mongodb：[https://www.cnblogs.com/zhm1985/p/13111448.html](https://www.cnblogs.com/zhm1985/p/13111448.html)\n\n### 需要全局安装 pm2\n\n```\nnpm install pm2 -g\n```\n\n### 启动命令\n\n```\nnpm run publish \u0026\u0026 npm run start\n```\n\n### License\n\nApache License 2.0\n","funding_links":[],"categories":["开源项目","Vue","HarmonyOS","视频","![Open Source Love svg3](https://badges.frapsoft.com/os/v3/open-source.svg?v=103)"],"sub_categories":["Windows Manager"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftnfe%2Fshida","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftnfe%2Fshida","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftnfe%2Fshida/lists"}