webRtc/WebApp/client/public/onebyone/store.js

/**
 * 状态管理
 * 使用简单的 Observable 模式，可替换为 Redux/Vuex/Pinia
 */
import { mockCallSession, mockMessages } from './models.js';

class CallStateManager {
    constructor() {
        // 核心状态
        this.state = {
            session: { ...mockCallSession },
            messages: [...mockMessages],
            isSidebarOpen: false,
            unreadCount: 0,
            localStream: null,  // MediaStream 对象
            remoteStream: null  // MediaStream 对象
        };

        // 监听器数组
        this.listeners = [];

        // 初始化
        this.init();
    }

    // 订阅状态变化
    subscribe(callback) {
        this.listeners.push(callback);
        return () => {
            this.listeners = this.listeners.filter(cb => cb !== callback);
        };
    }

    // 通知所有监听器
    notify(changes) {
        this.listeners.forEach(cb => cb(this.state, changes));
    }

    // 初始化
    init() {
        // 启动通话时长计时器
        this.durationInterval = setInterval(() => {
            this.state.session.duration++;
            this.notify({ type: 'DURATION_UPDATE', duration: this.state.session.duration });
        }, 1000);

        // 获取本地摄像头视频流
        this.getLocalStream();

        // 模拟远端音频活动 (实际应由 WebRTC VAD 检测触发)
        this.simulateRemoteActivity();

        // 模拟网络质量变化
        this.simulateNetworkChange();
    }

    // 获取本地摄像头视频流
    async getLocalStream() {
        try {
            console.log('Requesting camera permission...');

            // 检查浏览器是否支持getUserMedia
            if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
                console.error('getUserMedia is not supported');
                throw new Error('getUserMedia is not supported');
            }

            // 请求摄像头权限并获取媒体流
            const stream = await navigator.mediaDevices.getUserMedia({
                video: true,
                audio: true
            });

            console.log('Stream obtained successfully:', stream);
            console.log('Video tracks:', stream.getVideoTracks());
            console.log('Audio tracks:', stream.getAudioTracks());

            this.state.localStream = stream;
            this.state.session.localUser.mediaState.video = true;
            this.state.session.localUser.mediaState.audio = true;

            console.log('Local stream stored, notifying UI...');

            // 先通知视频流已获取
            this.notify({ type: 'LOCAL_STREAM_OBTAINED', stream });
            // 再通知媒体状态变化
            this.notify({ type: 'LOCAL_MEDIA_CHANGE', mediaType: 'video', value: true });
            this.notify({ type: 'LOCAL_MEDIA_CHANGE', mediaType: 'audio', value: true });

            // 发送媒体状态到服务器
            this.emitMediaStateChange();
        } catch (error) {
            console.error('Error getting local stream:', error);
            // 如果获取视频失败，保持视频关闭状态
            this.state.session.localUser.mediaState.video = false;
            this.state.session.localUser.mediaState.audio = false;

            // 通知媒体状态变化
            this.notify({ type: 'LOCAL_MEDIA_CHANGE', mediaType: 'video', value: false });
            this.notify({ type: 'LOCAL_MEDIA_CHANGE', mediaType: 'audio', value: false });
        }
    }

    // 更新本地媒体状态
    async updateLocalMedia(mediaType, value) {
        // 如果是关闭视频，释放摄像头资源
        if (mediaType === 'video' && !value && this.state.localStream) {
            this.state.localStream.getTracks().forEach(track => {
                if (track.kind === 'video') {
                    track.stop();
                }
            });

        }

        // 如果是音频状态变化，控制本地音频轨道
        if (mediaType === 'audio' && this.state.localStream) {
            this.state.localStream.getTracks().forEach(track => {
                if (track.kind === 'audio') {
                    track.enabled = value;
                }
            });
        }

        // 如果是开启视频，重新获取摄像头资源
        if (mediaType === 'video' && value ) {
            if(this.state.localStream){
                this.state.localStream=null;
            }
            //if(this.state.localStream.getVideoTracks().length==0){
                 // 请求摄像头权限并获取媒体流
                this.state.localStream = await navigator.mediaDevices.getUserMedia({
                video: true,
                audio: true
            });
           // }
            await this.getLocalStream();
        } else {
            // 直接更新媒体状态
            this.state.session.localUser.mediaState[mediaType] = value;
            this.notify({ type: 'LOCAL_MEDIA_CHANGE', mediaType, value });

            // 发送媒体状态到服务器
            this.emitMediaStateChange();
        }
    }

    // 更新远端媒体状态 (由 WebSocket 消息触发)
    updateRemoteMedia(mediaState) {
        this.state.session.remoteUser.mediaState = {
            ...this.state.session.remoteUser.mediaState,
            ...mediaState
        };
        this.notify({ type: 'REMOTE_MEDIA_CHANGE', mediaState });
    }

    // 添加消息
    addMessage(message) {
        this.state.messages.push(message);

        // 如果侧边栏关闭且不是自己发的，增加未读
        if (!this.state.isSidebarOpen && !message.isSelf) {
            this.state.unreadCount++;
        }

        this.notify({ type: 'NEW_MESSAGE', message, unreadCount: this.state.unreadCount });
    }

    // 切换侧边栏
    toggleSidebar() {
        this.state.isSidebarOpen = !this.state.isSidebarOpen;
        if (this.state.isSidebarOpen) {
            this.state.unreadCount = 0;
        }
        this.notify({ type: 'SIDEBAR_TOGGLE', isOpen: this.state.isSidebarOpen });
    }

    // 结束通话
    endCall() {
        clearInterval(this.durationInterval);
        this.state.session.status = 'ended';
        this.notify({ type: 'CALL_ENDED' });

        // 发送结束通话请求到服务器
        // [API_CALL: POST /api/call/:callId/leave]
        // [WEBSOCKET_EMIT: leave-call]
    }

    // 模拟远端活动 (开发测试用)
    simulateRemoteActivity() {
        setInterval(() => {
            if (Math.random() > 0.7) {
                const isSpeaking = Math.random() > 0.5;
                this.updateRemoteMedia({ isSpeaking });
            }
        }, 800);
    }

    // 模拟网络质量变化 (开发测试用)
    simulateNetworkChange() {
        const qualities = ['excellent', 'good', 'fair', 'poor'];
        setInterval(() => {
            if (Math.random() > 0.8) {
                const quality = qualities[Math.floor(Math.random() * qualities.length)];
                this.state.session.remoteUser.networkQuality = quality;
                this.notify({ type: 'NETWORK_CHANGE', quality });
            }
        }, 5000);
    }

    // 发送媒体状态到服务器
    emitMediaStateChange() {
        const payload = {
            userId: this.state.session.localUser.id,
            ...this.state.session.localUser.mediaState
        };
        console.log('[WebSocket Emit] media-state-changed:', payload);
        // socket.emit('media-state-changed', payload);
    }

    // Getters
    getState() { return this.state; }
    getLocalUser() { return this.state.session.localUser; }
    getRemoteUser() { return this.state.session.remoteUser; }
    getMessages() { return this.state.messages; }
}

// 创建单例实例
const store = new CallStateManager();

export default store;