webRtc/WebApp/client/public/onebyone/knowledge-graph.md

OneByOne 知识图谱

1. 模块依赖关系图

graph TB
    subgraph Page["📄 页面层"]
        INDEX[index.html<br/>主通话页面]
        CONN[connect/connect.html<br/>连接页面]
        END[endcall/endcall.html<br/>结束页面]
    end

    subgraph Core["⚙️ 核心模块"]
        MAIN[main.js<br/>应用入口]
        STORE[store.js<br/>状态管理]
        RENDER[renderer.js<br/>UI渲染器]
        CHAT[chatmessage.js<br/>消息模块]
    end

    subgraph Base["📦 数据与工具"]
        MODELS[models.js<br/>数据模型]
        API[api.js<br/>API客户端]
        UTILS[utils.js<br/>工具函数]
    end

    subgraph External["🔗 外部依赖"]
        SIGNALING[signaling.js<br/>信令管理]
        RENDERSTR[renderstreaming.js<br/>WebRTC管理]
        CONFIG[config.js<br/>配置管理]
    end

    INDEX --> MAIN
    CONN --> CONN_JS[connect.js]
    END --> END_JS[endcall.js]

    MAIN --> STORE
    MAIN --> RENDER
    MAIN --> API
    MAIN --> UTILS
    MAIN --> CHAT

    STORE --> MODELS
    STORE --> SIGNALING
    STORE --> RENDERSTR
    STORE --> CONFIG
    STORE --> UTILS
    STORE --> CHAT

    RENDER --> UTILS
    RENDER --> MODELS
    RENDER --> CHAT

    CHAT --> UTILS
    CHAT --> STORE
    CHAT --> MODELS

    CONN_JS --> STORE

    style STORE fill:#f9f,stroke:#333,stroke-width:2px
    style RENDER fill:#bbf,stroke:#333,stroke-width:2px
    style CHAT fill:#bfb,stroke:#333,stroke-width:2px

2. 数据模型关系图

graph TB
    subgraph Models["数据模型结构"]
        SESSION[CallSession<br/>通话会话]
        LOCAL[LocalUser<br/>本地用户]
        REMOTE[RemoteUser<br/>远端用户]
        MEDIA[MediaState<br/>媒体状态]
        MSG[ChatMessage<br/>聊天消息]
    end

    SESSION --> LOCAL
    SESSION --> REMOTE
    LOCAL --> MEDIA
    REMOTE --> MEDIA

    style SESSION fill:#f96,stroke:#333,stroke-width:2px
    style MEDIA fill:#9f6,stroke:#333,stroke-width:2px

模型属性说明

模型	属性
CallSession	id, type, status, startTime, duration, isEncrypted
LocalUser	id, name, avatar, isHost, mediaState
RemoteUser	id, name, avatar, status, networkQuality, mediaState
MediaState	audio, video, screenShare, recording, isSpeaking
ChatMessage	id, senderId, senderName, content, type, timestamp, isSelf

3. 状态更新时序图

sequenceDiagram
    autonumber
    participant USER as 👤 用户
    participant DOM as 🖱️ DOM事件
    participant MAIN as ⚙️ main.js
    participant STORE as 📦 store.js
    participant RENDER as 🎨 renderer.js
    participant UI as 🖥️ UI界面

    USER->>DOM: 点击麦克风按钮
    DOM->>MAIN: toggleMute()
    MAIN->>STORE: updateLocalMedia('audio', false)
    STORE->>STORE: 更新 mediaState.audio
    STORE->>STORE: notify({type: 'LOCAL_MEDIA_CHANGE'})
    STORE->>RENDER: 回调 render(state, changes)
    RENDER->>RENDER: renderControlButtons(mediaState)
    RENDER->>RENDER: renderLocalUserStatus(localUser)
    RENDER->>UI: 更新DOM
    UI->>USER: 显示更新后的界面

4. WebRTC 连接建立时序图

sequenceDiagram
    autonumber
    participant USER as 👤 用户
    participant MAIN as ⚙️ main.js
    participant STORE as 📦 store.js
    participant SIGNAL as 📡 signaling.js
    participant RTC as 🔗 renderstreaming.js
    participant PEER as 👤 远端对等端

    USER->>MAIN: 访问页面
    MAIN->>STORE: joinCall(connectionId)
    STORE->>STORE: init()
    STORE->>STORE: getLocalStream()<br/>获取本地摄像头
    MAIN->>STORE: setUp(connectionId)
    STORE->>SIGNAL: 创建信令实例
    STORE->>RTC: new RenderStreaming<br/>(signaling, config)
    RTC->>SIGNAL: start()
    RTC->>SIGNAL: createConnection(connectionId)

    loop WebSocket信令交换
        PEER->>SIGNAL: 交换SDP/ICE
        SIGNAL->>RTC: 信令数据
    end

    RTC->>STORE: onConnect 回调
    STORE->>STORE: 状态更新为 ongoing
    PEER->>RTC: 接收媒体流
    RTC->>STORE: onTrackEvent 回调
    STORE->>STORE: notify(REMOTE_STREAM_OBTAINED)
    STORE->>RENDER: 触发渲染更新
    RENDER->>UI: 显示远端视频

5. 消息发送流程

sequenceDiagram
    autonumber
    participant USER as 👤 用户
    participant DOM as 🖱️ DOM
    participant CHAT as 💬 chatmessage.js
    participant STORE as 📦 store.js
    participant RTC as 🔗 renderstreaming.js
    participant PEER as 👤 远端用户

    USER->>DOM: 输入消息并回车
    DOM->>CHAT: handleChatSubmit(event)
    CHAT->>CHAT: sendMessage()
    CHAT->>CHAT: addMessage(message)<br/>添加到本地列表
    CHAT->>STORE: getRenderStreaming()
    STORE-->>CHAT: 返回实例
    CHAT->>RTC: sendMessage()<br/>发送chat-message
    RTC->>PEER: 通过WebRTC数据通道发送

    PEER->>RTC: 收到消息
    RTC->>STORE: onMessage 回调
    STORE->>CHAT: handleChatMessage(data)
    CHAT->>CHAT: addMessage()<br/>添加到消息列表
    CHAT->>RENDER: 更新聊天UI

6. 页面流转状态图

stateDiagram-v2
    [*] --> 连接页面: 首次访问/无connectionId

    连接页面: connect.html
    连接页面: - 输入连接ID
    连接页面: - 创建新通话
    连接页面: - 用户设置

    通话页面: index.html
    通话页面: - 视频通话
    通话页面: - 聊天功能
    通话页面: - 媒体控制

    结束页面: endcall.html
    结束页面: - 显示断开原因
    结束页面: - 重新连接选项

    连接页面 --> 通话页面: 加入/创建通话
    通话页面 --> 结束页面: 通话结束/断开
    通话页面 --> 连接页面: 无有效connectionId
    结束页面 --> 通话页面: 重新连接
    结束页面 --> 连接页面: 返回

7. 通话状态机

stateDiagram-v2
    [*] --> idle: 初始化

    idle: 空闲状态
    idle --> connecting: joinCall()<br/>加入通话
    idle --> connecting: createCall()<br/>创建通话

    connecting: 连接中
    connecting --> ongoing: onConnect<br/>连接成功
    connecting --> failed: 连接失败

    ongoing: 通话中
    ongoing --> ended: hangUp()<br/>挂断
    ongoing --> ended: endCall()<br/>结束通话

    failed: 连接失败
    failed --> connecting: 重试连接
    failed --> ended: 放弃连接

    ended: 已结束
    ended --> [*]: 清理资源

8. 组件层次结构

graph TD
    subgraph index["index.html 组件结构"]
        HEADER["🧭 Header 顶部栏"]
        MAIN["📺 Main 主内容区"]
        FOOTER["🎛️ Footer 底部控制栏"]
    end

    subgraph header["Header 内容"]
        TITLE["标题: 与xxx的通话"]
        NETWORK["网络质量指示"]
        DURATION["通话时长"]
        ENCRYPT["端到端加密标识"]
    end

    subgraph main["Main 内容"]
        VIDEO_AREA["VideoArea 视频区"]
        SIDEBAR["Sidebar 侧边栏"]
    end

    subgraph video["VideoArea"]
        REMOTE["RemoteVideo 远端视频"]
        LOCAL["LocalVideo 本地视频画中画"]
    end

    subgraph sidebar["Sidebar"]
        USER_LIST["UserList 用户列表"]
        CHAT_MSG["ChatMessages 聊天消息"]
        CHAT_INPUT["ChatInput 消息输入"]
    end

    subgraph footer["Footer 控制栏"]
        CTRL_MIC["🎤 麦克风"]
        CTRL_VIDEO["📹 视频"]
        CTRL_RECORD["🔴 录制"]
        CTRL_END["📞 结束通话"]
        CTRL_CHAT["💬 聊天"]
    end

    HEADER --> TITLE
    HEADER --> NETWORK
    HEADER --> DURATION
    HEADER --> ENCRYPT

    MAIN --> VIDEO_AREA
    MAIN --> SIDEBAR

    VIDEO_AREA --> REMOTE
    VIDEO_AREA --> LOCAL

    SIDEBAR --> USER_LIST
    SIDEBAR --> CHAT_MSG
    SIDEBAR --> CHAT_INPUT

    FOOTER --> CTRL_MIC
    FOOTER --> CTRL_VIDEO
    FOOTER --> CTRL_RECORD
    FOOTER --> CTRL_END
    FOOTER --> CTRL_CHAT

    style CTRL_END fill:#f66,stroke:#333,stroke-width:2px
    style ENCRYPT fill:#9f6,stroke:#333,stroke-width:2px

9. 文件引用汇总

graph LR
    subgraph Import["导入关系"]
        direction TB
        M[main.js]
        S[store.js]
        R[renderer.js]
        C[chatmessage.js]
        CONN[connect.js]

        M --> S
        M --> R
        M --> C
        S --> C
        R --> C
        CONN --> S
    end

    subgraph Export["导出内容"]
        direction TB
        ST[store.js<br/>export default store]
        RE[renderer.js<br/>export default UIRenderer]
        AP[api.js<br/>export default apiClient]
        UT[utils.js<br/>export { formatTime, showNotification, ... }]
        MO[models.js<br/>export { mockCallSession, mockMessages }]
        CH[chatmessage.js<br/>export { sendMessage, toggleSidebar, ... }]
    end

10. API 接口调用图

graph LR
    subgraph Client["客户端"]
        API_CLIENT[api.js<br/>ApiClient类]
        CONN_JS[connect.js]
    end

    subgraph Server["服务器"]
        API_CALL[/api/call/:callId]
        API_JOIN[/api/call/:callId/join]
        API_LEAVE[/api/call/:callId/leave]
        API_MEDIA[/api/call/:callId/media]
        API_MSG[/api/call/:callId/messages]
        API_SEND[/api/call/:callId/message]
        API_CONN[/signaling/connection-ids]
        API_UPLOAD[/api/upload/avatar]
    end

    API_CLIENT -.-> API_CALL
    API_CLIENT -.-> API_JOIN
    API_CLIENT -.-> API_LEAVE
    API_CLIENT -.-> API_MEDIA
    API_CLIENT -.-> API_MSG
    API_CLIENT -.-> API_SEND

    CONN_JS -.-> API_CONN
    CONN_JS -.-> API_UPLOAD

    style API_CALL fill:#bbf,stroke:#333
    style API_JOIN fill:#bbf,stroke:#333
    style API_LEAVE fill:#bbf,stroke:#333
    style API_MEDIA fill:#bbf,stroke:#333
    style API_MSG fill:#bbf,stroke:#333
    style API_SEND fill:#bbf,stroke:#333
    style API_CONN fill:#fbf,stroke:#333
    style API_UPLOAD fill:#fbf,stroke:#333

---

文档生成时间: 2026-04-11 适用于 OneByOne 视频通话应用