Giter VIP home page Giter VIP logo

cc-edit / ccclip Goto Github PK

View Code? Open in Web Editor NEW
1.0K 12.0 198.0 30.69 MB

vue and ffmpeg based tool for video clips. 使用vue(vue3) + ffmpeg + wasm 实现纯前端音视频编辑,功能包括:视频剪辑、音频剪辑、音频合成裁剪、音波展示、视频抽帧、gif抽帧、帧播放器、字幕、贴图、时间轴、素材轨道

License: Other

JavaScript 19.38% Shell 0.02% HTML 0.13% Vue 44.30% TypeScript 34.49% CSS 1.68%
vue3 ffmpeg ffmpeg-wasm vite vue

ccclip's Introduction

学习讨论小组🍻 打赏(赠送学习资料:webNote) 🎊
wechat.png img.png

CcClip

简介

Vue 3 + FFmpeg 实现纯前端音视频编辑
如果有用请 🌟 Star 🌟 支持一下哟 🫣

特性

功能

  • 多轨道时间轴,支持帧缩放,时间缩放
  • 支持多种类型轨道的添加删除
  • 多功能轨道调节,支持音视频轨道内裁剪,支持轨道拖拽调整顺序、起止帧
  • 可伸缩轨道列表,灵活调整轨道列表高度
  • 可配置参数容器,轨道属性调节全部由配置文件生成
  • ffmpeg
    • 核心API封装管理
    • 调用队列封装,支持并发运行run
    • gif抽帧、视频抽帧、视频裁切、音视频分离、文件下载
    • 音频裁切、多音频合成、音频波形

预览

常见问题

1. 获取视频时长信息、总帧数信息:

$ ffmpeg -hide_banner -i video_1.mp4  -f null -

# 输出:
# frame=  710 fps=0.0 q=-0.0 Lsize=N/A time=00:00:23.75 bitrate=N/A speed= 168x
# video:327kB audio:2046kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: unknown
# frame 为当前视频文件总帧数
# time 为视频时长
# 注意一点,总帧数取决于视频fps,总帧数 = fps * 总时长

⚠️ 还有一点
之前考虑将 ffprobe 也接入进来,可以直接获取视频的媒体信息,但这么做的结果是前端资源体积过于大
所以 ffmpeg 将 ffprobe 抽离出去的原因也许就是为了保留一个最小可用集合
综上,如果确实有需要获取资源详细信息的场景,我的建议是放到后台或者是单独页面处理
在编辑页面只做结果的处理。

建议的方案:
服务器环境中安装完整的ffmpeg
将获取视频媒体信息的命令封装为接口
在文件上传后在服务器本地获取视频媒体信息,并保存
不论是用户上传,还是管理后台上传,都是在上传完成后获取文件信息。
只有文件信息获取完成后,资源才可以在编辑器中使用

2. 如何使用 ip 地址访问

受 COOP 的限制,使用 ip 地址访问时依然不被信任,所以我们增加了 dev-ssl 命令
执行 pnpm dev-ssl 即可通过 ip 地址访问
注意 ⚠️ 使用 dev-ssl 启动之后访问地址更换为 https 开头

3. 视频分割方案

视频分割我的想法是不操作原始数据
只是通过控制轨道中元素的 start、end 数据,将一个视频元素拆分为两个
整个链路中不对原始视频做分割,避免性能损耗
导出与播放可以通过 ffmpeg 命令的时间段参数从原始视频中取出数据

4. 视频导出方案

较复杂的方案是将轨道数据转换为ffmpeg命令
根据命令性能考虑是前端执行还是放到后台接口中执行
简单点的方案是将轨道参数编译为 FFCreator 参数
可以直接利用现有的视频合成服务

5. 滤镜、转场方案

滤镜转场特效抽象看就是 Shader
通过参数控制 shader 生效的时间点
参考:https://gl-transitions.com/

V 2.0 开发中...... ( ⭐️ Star 加速!)

  • (视频合成导出)
  • (转场)
  • (滤镜)
  • (特效)

贡献

参考

版权相关

开源前已对项目进行版权过滤,将个人使用范围的素材替换为公共免费的素材。

如需帮助请联系: [email protected]

ccclip's People

Contributors

cc-edit avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ccclip's Issues

【BUG】拖动一个视频文件到中间位置,剪切会出错

描述
拖动一个视频文件到中间位置,剪切会出错,数据计算有误
因为offset计算的时候直接和剪切点计算的,但是视频不一定是顶格从0开始的;
除此之外,frameCount和time也未更新

image

TrackContro文件中剪切的操作应该修改为

    active.end = splitTime;
    active.offsetR = active.frameCount - active.end + active.start; // offset减去前面的空白量
    active.frameCount -= active.offsetR; // 重新计算frameCount 和time
    active.time = parseInt(`${active.frameCount / baseFps * 1000}`);
    copy.start = splitTime;
    copy.offsetL = splitTime - 1 - active.start;
    copy.frameCount -= copy.offsetL;
    copy.time = parseInt(`${copy.frameCount / baseFps * 1000}`);
    copy.id = getId();
    trackStore.addTrack(copy, trackStore.selectTrackItem.line, false, 0);

【BUG】

配置了请求头 'Cross-Origin-Opener-Policy': 'same-origin', 'Cross-Origin-Embedder-Policy': 'require-corp' 会导致图片跨域,但是如果不配置这个请求头的话会报错 SharedArrayBuffer is not defined

加群

群二维码失效了 有在群里的加我微信把我拉进去
18039698719

【BUG】

如果视频是一秒60帧的话轨道里的视频长度就会出问题,视频的时长也算错了

拖拽视频报错

runtime-core.esm-bundler.js:236 Uncaught SyntaxError: Unexpected end of JSON input
at JSON.parse ()
at addTrack (TrackList.vue:186:5)
at callWithErrorHandling (runtime-core.esm-bundler.js:173:22)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:182:21)
at HTMLDivElement.invoker (runtime-dom.esm-bundler.js:345:9)

【BUG】

问题:配置了请求头 'Cross-Origin-Opener-Policy': 'same-origin', 'Cross-Origin-Embedder-Policy': 'require-corp' 会导致图片跨域,但是如果不配置这个请求头的话会报错 SharedArrayBuffer is not defined

找了很多种方法但是目前没解决掉。

【BUG】

视频播放的时候禁音然后取消禁音视频还是没有声音

500start了,快点更新

500start了,快点更新
500start了,快点更新
500start了,快点更新
500start了,快点更新
500start了,快点更新

【BUG】

在视频里添加一个文本删掉文本内容,轨道里的视频居然也被删除了

性能问题

将视频添加到轨道里面加载有点慢,我用了一个5s的视频差不多要加载3分钟左右。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.