# onebyone 模块代码调用结构图

> 本文档基于优化后的代码自动生成，反映当前实际架构。

---

## 3.1 文件依赖关系图

```mermaid
graph TD
    main[main.js] --> store[store.js]
    main --> renderer[renderer.js]
    main --> utils[utils.js]
    main --> chatmsg[chatmessage.js]

    store --> models[models.js]
    store --> utils
    store --> chatmsg
    store --> signaling[../../module/signaling.js]
    store --> rs[../../module/renderstreaming.js]
    store --> config[../js/config.js]

    renderer --> utils
    renderer --> models
    renderer --> chatmsg
    renderer -.-> store

    chatmsg --> utils
    chatmsg --> store
    chatmsg --> models

    connect[connect/connect.js] --> store
    connect --> utils

    endcall[endcall/endcall.js] --> utils

    index[index.html] --> main
    connectHtml[connect/connect.html] --> connect
    endcallHtml[endcall/endcall.html] --> endcall

    style utils fill:#e1f5fe
    style models fill:#e1f5fe
    style signaling fill:#fff3e0
    style rs fill:#fff3e0
    style config fill:#fff3e0
```

**图例说明**
- 蓝色：内部工具/数据模块
- 橙色：外部依赖模块（signaling.js、renderstreaming.js、config.js）

---

## 3.2 核心调用链

### 通话初始化流程

```mermaid
sequenceDiagram
    autonumber
    participant Browser
    participant main as main.js
    participant store as store.js
    participant render as renderer.js
    participant RS as RenderStreaming
    participant Sig as Signaling

    Browser->>main: DOMContentLoaded
    main->>main: 检查 localStorage.connectionId
    alt 无连接ID
        main->>Browser: 跳转 connect/connect.html
    else 有连接ID
        main->>render: new UIRenderer(store)
        render->>store: subscribe(render)
        main->>store: joinCall(connectionId)
        store->>store: init()
        store->>store: setupConfig() / getServerConfig()
        store->>store: loadUserSettings()
        store->>store: getLocalStream()
        store->>Browser: getUserMedia(MEDIA_CONSTRAINTS)
        Browser-->>store: MediaStream
        store->>store: notify(LOCAL_STREAM_OBTAINED)
        store->>store: notify(LOCAL_MEDIA_CHANGE x2)
        store->>store: emitMediaStateChange()
        main->>store: setUp(connectionId)
        store->>store: _createSignalingAndRTC()
        store->>Sig: new WebSocketSignaling() / new Signaling()
        store->>RS: new RenderStreaming(signaling, config)
        store->>store: _registerCallbacks()
        store->>store: _startConnection()
        store->>RS: start()
        store->>RS: createConnection(connectionId)
        RS-->>store: onConnect(role, participantId)
        store->>store: notify(CALL_STATUS_CHANGE, ongoing)
        store->>store: sendMessage(user-info)
        store->>store: emitMediaStateChange()
        main->>main: bindDomEvents()
    end
```

### 媒体控制流程

```mermaid
sequenceDiagram
    autonumber
    participant User
    participant main as main.js
    participant store as store.js
    participant render as renderer.js
    participant RS as RenderStreaming
    participant Remote as 远端

    User->>main: 点击 toggleMute / toggleVideo
    main->>store: updateLocalMedia(type, value)

    alt 开启视频
        store->>Browser: getUserMedia(VIDEO_ONLY_CONSTRAINT)
        Browser-->>store: newVideoTrack
        store->>RS: replaceTrack / addTransceiver
        store->>store: notify(LOCAL_STREAM_OBTAINED)
        store->>store: notify(LOCAL_MEDIA_CHANGE, video=true)
        store->>store: emitMediaStateChange()
    else 关闭视频
        store->>store: track.stop()
        store->>store: notify(LOCAL_MEDIA_CHANGE, video=false)
        store->>store: emitMediaStateChange()
    else 切换音频
        store->>store: track.enabled = value
        store->>store: notify(LOCAL_MEDIA_CHANGE, audio=value)
        store->>store: emitMediaStateChange()
    end

    store->>render: notify(USER_LIST_UPDATE)
    render->>render: renderUserList()
    render->>render: renderControlButtons()
    render->>render: renderLocalVideo()

    store->>RS: sendMessage(media-state-changed)
    RS->>Remote: WebSocket 信令
    Remote-->>store: onMessage(media-state-changed)
    store->>store: updateRemoteMedia()
    store->>render: notify(REMOTE_MEDIA_CHANGE)
    render->>render: renderRemoteVideo()
    render->>render: renderUserList()
    render->>render: renderParticipantVideoPlaceholder()
```

### 消息发送流程

```mermaid
sequenceDiagram
    autonumber
    participant User
    participant chat as chatmessage.js
    participant store as store.js
    participant render as renderer.js
    participant RS as RenderStreaming
    participant Remote as 远端

    User->>chat: 输入消息 / 回车
    chat->>chat: sendMessage()
    chat->>chat: addMessage() 本地
    chat->>chat: notify(NEW_MESSAGE)
    render->>render: renderMessageState(NEW_MESSAGE)
    render->>render: renderChatMessages()
    render->>render: renderUnreadCount()

    chat->>store: getRenderStreaming()
    chat->>RS: sendMessage(chat-message)
    RS->>Remote: WebSocket 信令

    Remote-->>chat: handleChatMessage(data)
    chat->>chat: addMessage() 远端
    chat->>chat: notify(NEW_MESSAGE)
    render->>render: renderMessageState(NEW_MESSAGE)
    render->>render: renderChatMessages()
    render->>render: renderUnreadCount()

    User->>chat: 点击 toggleSidebar()
    chat->>chat: notify(SIDEBAR_TOGGLE)
    render->>render: renderMessageState(SIDEBAR_TOGGLE)
    render->>render: renderSidebar()
```

### Participant 管理流程

```mermaid
sequenceDiagram
    autonumber
    participant store as store.js
    participant render as renderer.js
    participant RS as RenderStreaming
    participant Remote as 远端Participant

    Note over RS,Remote: 新 Participant 加入
    RS-->>store: onParticipantJoined(participantId)
    store->>store: 初始化 participant 默认信息
    store->>store: notify(PARTICIPANTS_UPDATE)
    store->>RS: broadcastParticipantsList()
    render->>render: renderUserList()
    render->>render: syncParticipantTileNames()

    Note over RS,Remote: Participant 离开
    RS-->>store: onParticipantLeft(participantId)
    store->>store: 清理 remoteStreams / participants
    store->>store: notify(PARTICIPANT_LEFT)
    store->>store: notify(PARTICIPANTS_UPDATE)
    store->>RS: broadcastParticipantsList()
    render->>render: renderParticipantLeft()
    render->>render: renderUserList()

    Note over RS,Remote: 成员列表同步
    RS-->>store: onMessage(participants-sync)
    store->>store: 过滤自身条目 -> state.participants
    store->>store: notify(PARTICIPANTS_UPDATE)
    render->>render: renderUserList()
    render->>render: syncParticipantTileNames()
```

---

## 3.3 状态变化流转图

### Store -> Renderer 状态流转

```mermaid
graph LR
    subgraph StoreNotify[store.js notify 类型]
        A[INIT]
        B[LOCAL_STREAM_OBTAINED]
        C[LOCAL_MEDIA_CHANGE]
        D[REMOTE_STREAM_OBTAINED]
        E[REMOTE_MEDIA_CHANGE]
        F[USER_LIST_UPDATE]
        G[PARTICIPANTS_UPDATE]
        H[NETWORK_CHANGE]
        I[CALL_STATUS_CHANGE]
        J[CALL_ENDED]
        K[PARTICIPANT_LEFT]
        L[DURATION_UPDATE]
    end

    subgraph RenderMethod[renderer.js 渲染方法]
        RM1[renderRemoteVideo]
        RM2[renderLocalVideo]
        RM3[renderLocalStream]
        RM4[renderRemoteStream]
        RM5[renderControlButtons]
        RM6[renderUserList]
        RM7[renderNetworkStatus]
        RM8[renderCallStatus]
        RM9[renderCallEnded]
        RM10[renderParticipantLeft]
        RM11[renderCallDuration]
        RM12[renderHeader]
        RM13[renderParticipantVideoPlaceholder]
        RM14[syncParticipantTileNames]
    end

    A --> RM1 & RM2 & RM5 & RM6 & RM12
    B --> RM3 & RM2
    C --> RM5 & RM2 & RM6
    D --> RM4
    E --> RM1 & RM6 & RM13
    F --> RM6
    G --> RM6 & RM14
    H --> RM7
    I --> RM8
    J --> RM9
    K --> RM10
    L --> RM11
```

### chatMessage -> Renderer 状态流转

```mermaid
graph LR
    subgraph ChatNotify[chatmessage.js notify 类型]
        N[NEW_MESSAGE]
        S[SIDEBAR_TOGGLE]
    end

    subgraph MsgRender[renderer.js 消息渲染]
        MR1[renderChatMessages]
        MR2[renderUnreadCount]
        MR3[renderSidebar]
    end

    N --> MR1 & MR2
    S --> MR3 & MR2
```

---

## 3.4 各模块导出函数清单

### main.js

| 导出 | 类型 | 说明 |
|------|------|------|
| store | 变量 | 重新导出 store 单例，供外部调试使用 |

**内部全局函数（绑定到 window）：**

| 函数 | 说明 |
|------|------|
| toggleSidebar | 切换侧边栏显示 |
| toggleMute | 切换麦克风状态 |
| toggleVideo | 切换摄像头状态 |
| toggleLocalVideo | 本地视频悬停控制 |
| toggleRecording | 切换录屏状态 |
| endCall | 显示结束通话确认对话框 |
| cancelEndCall | 取消结束通话 |
| confirmEndCall | 确认结束通话，调用 store.endCall() |
| showCallRequest | 显示通话请求弹窗 |
| rejectCall | 拒绝通话请求 |
| acceptCall | 接受通话请求，初始化通话 |

### store.js (CallStateManager 类 / store 单例)

| 方法 | 说明 |
|------|------|
| subscribe(callback) | 订阅状态变化 |
| notify(changes) | 通知所有监听器 |
| init() | 初始化配置、用户设置、本地流 |
| loadUserSettings() | 从 localStorage 加载用户设置 |
| setupConfig() | 获取服务器配置（WebSocket 模式） |
| getLocalStream() | 获取本地摄像头媒体流 |
| updateLocalMedia(mediaType, value) | 更新本地媒体状态（音频/视频/录屏） |
| _createSignalingAndRTC(connectionId) | 创建信令和 RTC 实例 |
| setUp(connectionId) | 设置 WebRTC 连接入口 |
| _registerCallbacks() | 注册所有 WebRTC 回调 |
| _startConnection(connectionId) | 启动连接和检测 |
| hangUp() | 挂断连接，清理资源 |
| sendMessage(type, data) | 通过 RenderStreaming 发送消息 |
| broadcastParticipantsList() | Host 端广播成员列表 |
| setCodecPreferences(participantId) | 设置 H264 编解码器偏好 |
| updateRemoteMedia(mediaState, participantId) | 更新远端媒体状态 |
| updateRemoteUserStatus(status) | 更新远端用户在线状态 |
| updateRemoteUserNetworkQuality(q) | 更新远端网络质量 |
| endCall() | 用户主动结束通话入口 |
| joinCall(connectionId) | 加入通话 |
| createCall() | 创建通话 |
| detectNetworkQuality() | 基于 WebRTC stats 检测网络质量 |
| startActivityDetection(stream, opts) | 启动音频活动检测（VAD） |
| startNetworkQualityDetection() | 启动定时网络质量检测 |
| stopNetworkQualityDetection() | 停止网络质量检测 |
| emitMediaStateChange() | 发送媒体状态变化信令 |
| showStatsMessage() | 显示并定时输出 WebRTC 统计信息 |
| clearStatsMessage() | 清除统计定时器 |
| getState / getLocalUser / getRemoteUser / getConnectionId / getRenderStreaming | Getter 方法 |

### renderer.js (UIRenderer 类)

| 方法 | 说明 |
|------|------|
| constructor(stateManager) | 构造函数，订阅 store 和 chatMessage |
| render(state, changes) | 核心渲染分发器，根据 changes.type 路由 |
| renderMessageState(msgState, changes) | 消息状态渲染分发器 |
| renderCallStatus(status) | 渲染通话状态（连接中覆盖层） |
| renderHeader(session) | 渲染头部信息 |
| renderHeaderTitle() | 渲染标题（含 connectionId） |
| renderCallDuration(duration) | 渲染通话时长 |
| renderRemoteVideo(remoteUser) | 渲染远端视频和占位符 |
| renderHeaderNetworkStatus(q) | 渲染头部网络质量文本 |
| renderLocalVideo(localUser, stream) | 渲染本地视频和占位符 |
| renderLocalStream(stream) | 将本地流绑定到 video 元素 |
| renderRemoteStream(stream, id, isHost) | 远端流渲染分发 |
| renderParticipantStream(stream, id) | Host 端多 participant 视频网格渲染 |
| renderParticipantVideoPlaceholder(id, show) | 精准更新 participant tile 占位背景 |
| syncParticipantTileNames(participants) | 同步所有 tile 名称标签 |
| updateParticipantTileName(id, name) | 更新指定 tile 名称 |
| renderSingleRemoteStream(stream) | Participant 端单路远端视频渲染 |
| renderLocalUserStatus(localUser) | 渲染本地用户媒体状态文本 |
| renderUserList(local, remote, participants) | 渲染侧边栏用户列表（支持多 participant） |
| createUserEntry(options) | 创建通用用户条目 DOM |
| getVideoResolution(track) | 获取视频轨道分辨率 |
| adjustVideoSize(video, resolution) | 调整视频元素尺寸 |
| renderControlButtons(mediaState) | 渲染底部控制按钮状态 |
| renderChatMessages(messages) | 渲染聊天消息列表 |
| createMessageElement(message) | 创建单条消息 DOM |
| renderUnreadCount(count) | 渲染未读消息角标 |
| renderSidebar(isOpen) | 渲染侧边栏显隐 |
| renderNetworkStatus(quality) | 渲染网络状态提示 |
| updateHeaderNetworkIndicator(q) | 更新头部网络指示器颜色 |
| renderCallEnded() | 渲染通话结束，跳转 endcall 页面 |
| renderParticipantLeft(id) | 清理 participant tile |
| getStatusText / getNetworkQualityText | 状态/质量文本映射 |
| destroy() | 销毁，取消订阅 |

### chatmessage.js

| 导出函数 | 说明 |
|----------|------|
| subscribe(callback) | 订阅消息状态变化 |
| addMessage(message) | 添加消息到列表 |
| sendChatMessage(message) | 通过 RenderStreaming 发送聊天消息 |
| handleChatMessage(data) | 处理接收到的聊天消息 |
| toggleSidebar() | 切换侧边栏，重置未读数 |
| getMessageState() | 获取当前消息状态 |
| sendMessage() | 用户发送消息入口（文本） |
| handleChatSubmit(event) | 回车发送处理 |
| openImagePicker() | 打开图片选择器 |
| handleImageUpload(event) | 处理图片上传（限制 5MB） |
| sendImageMessage(url, fileName) | 发送图片消息 |
| bindMessageEvents() | 绑定消息相关 DOM 事件到 window |

### utils.js

| 导出函数 | 说明 |
|----------|------|
| formatTime(seconds) | 格式化为 MM:SS |
| formatTimestamp(timestamp) | 格式化为 HH:MM |
| generateId() | 生成随机唯一 ID |
| showNotification(message, duration) | 显示顶部通知 |
| toggleElement(element, show) | 切换元素显隐（hidden 类） |
| toggleButtonState(button, active) | 切换按钮图标状态 |

### models.js

| 导出 | 类型 | 说明 |
|------|------|------|
| mockCallSession | 常量对象 | 默认通话会话数据结构（含 localUser / remoteUser） |
| mockMessages | 常量数组 | 默认聊天消息数组（含系统消息） |

### connect/connect.js

| 全局函数 | 说明 |
|----------|------|
| joinCall() | 读取输入框 connectionId，保存并跳转 |
| createCall() | 生成随机 connectionId，保存并跳转 |
| getAllConnectionIds() | 从服务器获取所有连接 ID 列表 |
| displayConnectionIds(ids) | 渲染连接 ID 列表到 DOM |
| selectConnectionId(id) | 选择指定 ID 填充输入框 |
| saveSettings() | 保存用户设置到 localStorage |
| handleAvatarUpload(event) | 上传头像（限制 2MB） |
| copyUserId() | 复制用户 ID 到剪贴板 |
| toggleSettingsMenu() | 切换设置菜单显隐 |

### endcall/endcall.js

| 全局函数 | 说明 |
|----------|------|
| reconnectCall() | 重新连接，跳转 index.html |
| leaveCall() | 清除 connectionId，跳转 connect.html |

---

## 附录：页面跳转关系

```mermaid
graph LR
    connect[connect/connect.html] -->|joinCall / createCall| index[index.html]
    index -->|endCall| endcall[endcall/endcall.html]
    endcall -->|reconnectCall| index
    endcall -->|leaveCall| connect
    index -->|无 connectionId| connect
```