# Web视频编辑器

**Repository Path**: zhu-liang/web-video-editor

## Basic Information

- **Project Name**: Web视频编辑器
- **Description**: VideoCut是一款基于WebCodecs技术实现的Web端视频编辑工具，类似剪映Web版。该项目目录架构和大部分功能实现来自于`CcClip-master`开源项目，音视频处理使用`@webav/av-cliper`开源库。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-11
- **Last Updated**: 2025-10-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 视频编辑器, Web, webav, Vue, WebCodecs

## README

## VideoCut - Web端视频编辑工具
### 项目介绍
VideoCut是一款基于WebCodecs技术实现的Web端视频编辑工具，类似剪映Web版。该项目目录架构和大部分功能实现来自于`CcClip-master`开源项目，音视频处理使用`@webav/av-cliper`开源库。

### 技术栈
- 前端框架: Vue 3
- 编程语言: TypeScript
- 构建工具: Vite
- 状态管理: Pinia
- UI组件库: Element Plus
- 样式框架: Tailwind CSS
- 音视频处理: @webav/av-cliper
- 视频编解码: WebCodecs API
- 其他依赖: wavesurfer.js (音频可视化), vue3-moveable (拖拽功能)

### 功能特性
- 多轨道编辑: 支持视频、音频、文本、图片等多种轨道类型
- 实时预览: 基于Canvas实现的视频播放器，支持实时预览编辑效果
- 资源管理: 支持导入本地音视频、图片等资源
- 时间轴操作: 拖拽、裁剪、分割等基础编辑功能
- 文本编辑: 支持添加、编辑文本内容
- 音频处理: 支持音频波形可视化和编辑

### 项目结构
```
plainText
src/
├── App.vue             # 应用主组件
├── assets/             # 静态资源文件
├── class/              # 核心数据模型类
│   ├── AudioTrack.ts   # 音频轨道类
│   ├── Base.ts         # 基础类型定义
│   ├── ImageTrack.ts   # 图片轨道类
│   ├── TextTrack.ts    # 文本轨道类
│   ├── Track.ts        # 轨道类型定义
│   └── VideoTrack.ts   # 视频轨道类
├── components/         # 组件目录
│   ├── AudioPanel/     # 音频面板组件
│   ├── ImagePanel/     # 图片面板组件
│   ├── TextPanel/      # 文本面板组件
│   ├── VideoPanel/     # 视频面板组件
│   ├── container/      # 容器组件
│   ├── icons/          # 图标组件
│   └── item/           # 各类项目组件
├── data/               # 常量和配置数据
├── hooks/              # 自定义hooks
├── stores/             # Pinia状态管理
│   ├── pageState.ts    # 页面状态
│   ├── playerState.ts  # 播放器状态
│   ├── resourceStore.ts# 资源状态
│   └── trackState.ts   # 轨道状态
├── utils/              # 工具函数
│   └── webcodecs.ts    # WebCodecs相关工具函数
└── main.ts             # 应用入口
```

### 界面布局
应用采用经典的视频编辑器布局，包含以下几个主要部分：

- 顶部导航栏: 提供项目操作、保存、导出等功能
- 左侧资源面板: 显示可使用的素材资源
- 中央画布播放器: 视频预览区域，显示编辑效果
- 右侧属性设置面板: 设置选中元素的属性
- 底部轨道时间线: 多轨道时间轴，进行精确的时间编辑

### 核心功能模块
1. 轨道系统
轨道系统是整个编辑器的核心，支持多种类型的轨道（视频、音频、文本、图片等）。每种轨道类型都有自己的属性和渲染方式。
2. 视频处理
视频处理基于WebCodecs API实现，通过@webav/av-cliper库提供更丰富的视频编辑功能：
3. 视频解码和帧提取
4. 视频编码和导出
5. 视频帧的实时渲染

### 安装与运行
前置条件 `Node.js 16+` `npm/yarn/pnpm`
```bash
# 使用npm
npm install

# 或使用yarn
# yarn install

# 或使用pnpm
# pnpm install

# 开发模式运行
```bash
# 使用npm
npm run dev

# 或使用yarn
# yarn dev

# 或使用pnpm
# pnpm dev
```

### 浏览器兼容性
由于项目使用了WebCodecs API，目前仅支持以下浏览器：
`Chrome 94+`
`Edge 94+`
`Opera 80+`

## 特别说明
本项目目录架构和大部分功能实现来自于CcClip-master开源项目，音视频操作使用webav开源库。

## License
项目采用Apache 2.0许可协议。