# webrtc-streamer-web

**Repository Path**: gitmy/webrtc-streamer-web

## Basic Information

- **Project Name**: webrtc-streamer-web
- **Description**: webrtc-streamer-web
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-10-09
- **Last Updated**: 2025-10-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WebRTC 视频流播放器

基于 Vue 3 和 Vite 构建的 WebRTC 视频流播放器，支持 RTMP/RTSP 流媒体播放，并提供多种视角模式和交互控制功能。

## 功能特点

- **多视角模式**：支持视频融合、全景拼接和自由视角模式
- **会话管理**：支持多会话切换
- **多播放模式**：支持 WebRTC 和 WebSocket+WebCodecs 两种播放模式
- **实时交互**：通过增强型 WebSocket 实现实时交互控制
- **自动重连**：WebSocket 连接断开时自动重连
- **错误处理**：统一的错误提示和处理机制

## 技术栈

- **前端框架**：Vue 3 + Vite
- **UI 组件库**：Ant Design Vue
- **样式处理**：Less
- **状态管理**：Vue 3 组合式 API + 组合式函数
- **视频播放**：WebRTC 和 WebSocket+WebCodecs

## 项目结构

```
src/
├── api/               # API 请求
│   └── common.js           # 公共 API 方法
├── assets/            # 静态资源
├── composables/       # 组合式函数
│   ├── auth/              # 用户认证相关
│   │   └── useAuth.js
│   ├── event/             # 事件与通信相关
│   │   ├── useEventHandling.js
│   │   ├── useEventWebSocket.js
│   │   └── useMouseEvents.js
│   ├── lifecycle/         # 生命周期相关
│   │   └── useVisibilityChange.js
│   └── player/            # 播放器相关
│       ├── usePlayerManager.js
│       ├── useWebRtcPlayer.js
│       └── useWebSocketPlayer.js
├── plugins/           # 第三方插件
│   ├── adapter.min.js      # WebRTC 适配器
│   ├── webrtcstreamer.js   # WebRTC 流媒体播放器
│   └── video-ws/           # WebSocket 视频播放组件
├── utils/             # 工具函数
│   ├── fullscreen.js       # 全屏功能控制
│   ├── mouseEventHandler.js # 鼠标事件处理器
│   ├── aspectRatio.js      # 宽高比计算
│   ├── errorCode.js        # 错误码定义
│   ├── videoDimensions.js  # 视频尺寸计算
│   ├── request/            # 请求相关工具
│   └── index.js            # 统一导出
├── App.vue            # 主应用组件
├── style.css          # 全局样式
└── main.js            # 应用入口
```

## 架构设计

### 分层架构

项目采用分层架构设计，各层次职责明确，耦合度低：

```
┌───────────────────────────────────────────────────────────────┐
│                        UI 层 (App.vue)                        │
└───────────────────────────────────────────────────────────────┘
                              ▲
                              │
┌───────────────────────────────────────────────────────────────┐
│                      播放器管理层 (usePlayerManager)            │
└───────────────────────────────────────────────────────────────┘
                              ▲
                              │
┌─────────────────────────────┼─────────────────────────────────┐
│                             │                                 │
│   WebRTC 播放器              │    WebSocket 播放器              │
│  (useWebRtcPlayer)          │   (useWebSocketPlayer)          │
│                             │                                 │
└─────────────────────────────┼─────────────────────────────────┘
                              ▲
                              │
┌─────────────────────────────┼─────────────────────────────────┐
│                             │                                 │
│     事件处理                 │     通信管理                      │
│  (useEventHandling,         │     (useEventWebSocket,         │
│   useMouseEvents)           │      useAuth)                   │
│                             │                                 │
└─────────────────────────────┴─────────────────────────────────┘
```

### 模块交互流程

1. **认证与通信层**
   - `useAuth` 提供用户认证，获取唯一标识
   - `useEventWebSocket` 提供增强型WebSocket连接，支持自动重连

2. **事件处理层**
   - `useMouseEvents` 处理鼠标交互事件
   - `useEventHandling` 构建事件参数并发送指令

3. **播放器实现层**
   - `useWebRtcPlayer` 实现WebRTC视频流播放
   - `useWebSocketPlayer` 实现WebSocket+WebCodecs播放

4. **播放器管理层**
   - `usePlayerManager` 统一管理不同播放模式
   - 处理播放状态和播放器切换

## 核心功能模块

### 增强型WebSocket管理

`useEventWebSocket` 提供了类似Socket.io的功能，包括：

- 自动重连机制
- 断线自动恢复
- 错误处理和重试策略
- 统一的消息发送接口

### 事件参数构建

`useEventHandling` 根据不同视角模式构建事件参数：

- 自由视角模式参数
- 全景拼接/融合模式参数
- 统一的参数发送流程

### 播放器实现

两种播放器实现均提供统一接口：

- `streamUrl`: 视频流地址
- `isPlaying()`: 检查播放状态
- `playStream()`: 开始播放流
- `stopStream()`: 停止播放

### 播放器管理

`usePlayerManager` 提供统一的播放控制接口：

- 多播放模式管理
- 播放状态同步
- 错误处理
- 资源清理

## 视角模式说明

### 自由视角 (freeview)

允许用户自由控制视角和位置，通过鼠标拖拽和滚轮操作调整视角。

### 全景拼接 (trans)

将多个视频源水平拼接显示，便于同时查看多个视角。

### 视频融合 (normal)

将多个视频源智能融合为一个无缝的视图，提供沉浸式体验。

## 安装与使用

### 环境要求

- Node.js 16+
- npm 7+

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

## 使用指南

1. 在输入框中输入RTMP或RTSP流地址
2. 选择播放模式（WebRTC或WebSocket）
3. 选择视角模式（视频融合、全景拼接或自由视角）
4. 点击"播放视频"按钮开始播放
5. 使用鼠标拖拽和滚轮进行视角控制

## 注意事项

- 确保后端流媒体服务器正确配置
- WebRTC模式需要浏览器支持WebRTC API
- WebSocket模式需要浏览器支持WebCodecs API
- 自由视角模式下，水平拖拽用于控制视角
- 全景拼接/融合模式下，滚轮用于缩放