[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8851":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":22,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":30,"readmeContent":31,"aiSummary":32,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":33,"discoverSource":34},8851,"CcClip","VienLi\u002FCcClip","VienLi","vue and ffmpeg based tool for video clips. 使用vue(vue3) + ffmpeg + wasm 实现纯前端音视频编辑，功能包括：视频剪辑、音频剪辑、音频合成裁剪、音波展示、视频抽帧、gif抽帧、帧播放器、字幕、贴图、时间轴、素材轨道","",null,"Vue",1803,321,17,10,0,2,8,1,57.32,"Other",false,"master",[25,26,27,28,29],"ffmpeg","ffmpeg-wasm","vite","vue","vue3","2026-06-12 04:00:41","\n# CcClip\n\n## 简介\nVue 3 + FFmpeg 实现纯前端音视频编辑 \u003Cbr\u002F>\n如果有用请 🌟 Star 🌟 支持一下哟 🫣 \u003Cbr\u002F>\n\n## 特性\n- 💪 Vue 3、Vue-Router 4、Vite、pnpm、esbuild、TypeScript\n- ☀️ Pinia 状态管理\n- 🌟 [完整的Eslint配置](https:\u002F\u002Fgithub.com\u002FCc-Edit\u002FCcClip\u002Fblob\u002Fmaster\u002F.eslintrc.cjs)\n- 🌪 Tailwind 原子css集成\n- 💥 ffmpeg、wasm 底层音视频处理集成\n- 🚙 [文件路由自动注册](https:\u002F\u002Fgithub.com\u002FCc-Edit\u002FCcClip\u002Fblob\u002Fmaster\u002Fsrc\u002Fplugins\u002FinstallRouter.ts)\n- 🚕 [Icon组件自动导入](https:\u002F\u002Fgithub.com\u002FCc-Edit\u002FCcClip\u002Fblob\u002Fmaster\u002Fsrc\u002Fplugins\u002FinstallIcon.ts)\n- 🚗 [API自动注册 + vue-hooks-plus 简化API调用维护](https:\u002F\u002Finhiblab-core.gitee.io\u002Fdocs\u002Fhooks\u002F)\n- 🎁 [提供一个基于Vite的本地接口服务，用来提供一些简单的Mock接口](https:\u002F\u002Fgithub.com\u002FCc-Edit\u002FCcClip\u002Fblob\u002Fmaster\u002FviteUtil\u002FviteProxyServer\u002Fvite-plugin-proxy-server.ts)\n- 🌓 暗色主题切换\n\n## 功能\n- 多轨道时间轴，支持帧缩放，时间缩放\n- 支持多种类型轨道的添加删除\n- 多功能轨道调节，支持音视频轨道内裁剪，支持轨道拖拽调整顺序、起止帧\n- 可伸缩轨道列表，灵活调整轨道列表高度\n- 可配置参数容器，轨道属性调节全部由配置文件生成\n- ffmpeg \n  - 核心API封装管理\n  - 调用队列封装，支持并发运行run\n  - gif抽帧、视频抽帧、视频裁切、音视频分离、文件下载\n  - 音频裁切、多音频合成、音频波形 \n\n## 预览\n![](coverImage\u002Fimg.png)\n![](coverImage\u002Fimg_1.png)\n![](coverImage\u002Fimg_2.png)\n![](coverImage\u002Fimg_3.png)\n![](coverImage\u002Fimg_4.png)\n\n## 常见问题\n### 1. 获取视频时长信息、总帧数信息：\n```shell\n$ ffmpeg -hide_banner -i video_1.mp4  -f null -\n\n# 输出：\n# frame=  710 fps=0.0 q=-0.0 Lsize=N\u002FA time=00:00:23.75 bitrate=N\u002FA speed= 168x\n# video:327kB audio:2046kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: unknown\n# frame 为当前视频文件总帧数\n# time 为视频时长\n# 注意一点，总帧数取决于视频fps，总帧数 = fps * 总时长\n```\n> ⚠️ 还有一点  \n> 之前考虑将 ffprobe 也接入进来，可以直接获取视频的媒体信息，但这么做的结果是前端资源体积过于大  \n> 所以 ffmpeg 将 ffprobe 抽离出去的原因也许就是为了保留一个最小可用集合  \n> 综上，如果确实有需要获取资源详细信息的场景，我的建议是放到后台或者是单独页面处理   \n> 在编辑页面只做结果的处理。  \n\n> 建议的方案：   \n> 服务器环境中安装完整的ffmpeg    \n> 将获取视频媒体信息的命令封装为接口    \n> 在文件上传后在服务器本地获取视频媒体信息，并保存     \n> 不论是用户上传，还是管理后台上传，都是在上传完成后获取文件信息。   \n> 只有文件信息获取完成后，资源才可以在编辑器中使用   \n\n### 2. 如何使用 ip 地址访问\n> 受 COOP 的限制，使用 ip 地址访问时依然不被信任，所以我们增加了 dev-ssl 命令  \n> 执行 pnpm dev-ssl 即可通过 ip 地址访问  \n> 注意 ⚠️ 使用 dev-ssl 启动之后访问地址更换为 https 开头  \n\n### 3. 视频分割方案\n> 视频分割我的想法是不操作原始数据  \n> 只是通过控制轨道中元素的 start、end 数据，将一个视频元素拆分为两个   \n> 整个链路中不对原始视频做分割，避免性能损耗   \n> 导出与播放可以通过 ffmpeg 命令的时间段参数从原始视频中取出数据   \n\n### 4. 视频导出方案\n> 较复杂的方案是将轨道数据转换为ffmpeg命令   \n> 根据命令性能考虑是前端执行还是放到后台接口中执行  \n> 简单点的方案是将轨道参数编译为 [FFCreator](https:\u002F\u002Ftnfe.github.io\u002FFFCreator\u002F#\u002F) 参数    \n> 可以直接利用现有的视频合成服务    \n\n### 5. 滤镜、转场方案\n> 滤镜转场特效抽象看就是 Shader   \n> 通过参数控制 shader 生效的时间点  \n> 参考：https:\u002F\u002Fgl-transitions.com\u002F   \n\n\n## V 2.0 开发中...... ( ⭐️ Star 加速！)\n- [ ] (视频合成导出)\n- [ ] (转场)\n- [ ] (滤镜)\n- [ ] (特效)\n\n## 贡献\n- [视频裁剪需求](https:\u002F\u002Fgithub.com\u002FCc-Edit\u002FCcClip\u002Fpull\u002F7)：[@luotingv1](https:\u002F\u002Fgithub.com\u002Fluotingv1)  \n\n\n## 参考\n- https:\u002F\u002Ftrac.ffmpeg.org\u002Fwiki\u002FWaveform\n- https:\u002F\u002Fgithub.com\u002Fchuxiaoguo\u002Fvue-sketch-ruler 时间轴参考此工具库实现\n\n\n## 版权相关\n  开源前已对项目进行版权过滤，将个人使用范围的素材替换为公共免费的素材。\n  - icon svg 部分来自 [iconpark](https:\u002F\u002Ficonpark.oceanengine.com\u002Fofficial)\n\n\n如需帮助请联系： ccedit@126.com\n","CcClip 是一个基于 Vue 3 和 FFmpeg 的纯前端音视频编辑工具。它支持视频剪辑、音频剪辑、音频合成裁剪、音波展示、视频抽帧、gif 抽帧等功能，并具备多轨道时间轴、素材轨道等特性，使用了包括 Vue 3、Vite、TypeScript 和 Tailwind CSS 在内的现代前端技术栈。CcClip 适用于需要在浏览器中进行轻量级音视频编辑的场景，如在线教育、内容创作和个人项目等，无需依赖后端服务即可完成基本的多媒体处理任务。","2026-06-11 03:20:01","top_language"]