graph TB
    subgraph Source["内容源"]
        A1[摄像头采集]
        A2[文件上传]
        A3[屏幕录制]
    end
    
    subgraph Ingest["内容采集"]
        B1[推流端
推流SDK]
        B2[转码服务]
    end
    
    subgraph Processing["内容处理"]
        C1[实时转码]
        C2[多码率编码]
        C3[封装封装]
        C4[内容加密]
    end
    
    subgraph Distribution["内容分发"]
        D1[CDN边缘节点]
        D2[负载均衡]
        D3[缓存服务]
    end
    
    subgraph Playback["播放端"]
        E1[Web播放器]
        E2[移动App]
        E3[智能电视]
    end
    
    Source --> Ingest
    Ingest --> Processing
    Processing --> Distribution
    Distribution --> Playback
    
    style Source fill:#e3f2fd
    style Processing fill:#f3e5f5
    style Distribution fill:#fff9c4
    style Playback fill:#c8e6c9
                            

graph TB
    A[流媒体协议] --> B[RTMP]
    A --> C[HLS]
    A --> D[DASH]
    A --> E[WebRTC]
    
    B --> B1[基于TCP]
    B --> B2[低延迟直播]
    B --> B3[Flash推流]
    
    C --> C1[基于HTTP]
    C --> C2[Apple标准]
    C --> C3[m3u8+ts切片]
    
    D --> D1[基于HTTP]
    D --> D2[国际标准]
    D --> D3[mpd+m4s切片]
    
    E --> E1[基于UDP]
    E --> E2[P2P传输]
    E --> E3[实时通信]
    
    style A fill:#667eea,color:#fff
    style B fill:#f3e5f5
    style C fill:#c8e6c9
    style D fill:#fff9c4
    style E fill:#bbdefb
                            

sequenceDiagram
    participant C as 客户端
    participant S as 服务器
    participant CDN as CDN节点
    
    C->>S: 请求m3u8播放列表
    S->>C: 返回m3u8索引
    Note over C: 解析播放列表
    
    loop 播放循环
        C->>CDN: 请求TS切片
        CDN->>C: 返回TS视频片段
        Note over C: 解码播放
        C->>C: 检测带宽
        C->>S: 请求合适码率m3u8
        S->>C: 返回新m3u8
    end
    
    Note over C,CDN: 自适应码率切换
                            

flowchart LR
    A[主播端] --> B[推流
RTMP]
    B --> C[流媒体服务器]
    C --> D[实时转码]
    D --> E[切片封装]
    E --> F[HLS/DASH流]
    F --> G[CDN分发]
    G --> H[边缘节点]
    H --> I[观众端播放]
    
    C --> J[录制存储]
    J --> K[点播回放]
    
    style A fill:#e3f2fd
    style I fill:#c8e6c9