去掉没用的 测试文件

client/mobile/pages_live.tsx

@@ -1,434 +0,0 @@
-import React, { useState, useEffect } from 'react';
-// import 'https://g.alicdn.com/apsara-media-box/imp-interaction/1.6.1/alivc-im.iife.js'
-
-// 从 SDK 中提取需要的类型
-type ImEngine = InstanceType<typeof AliVCInteraction.ImEngine>;
-type ImGroupManager = AliVCInteraction.AliVCIMGroupManager;
-type ImMessageManager = AliVCInteraction.AliVCIMMessageManager;
-type ImLogLevel = AliVCInteraction.ImLogLevel;
-type ImMessageLevel = AliVCInteraction.ImMessageLevel;
-
-interface ImUser {
-  userId: string;
-  userExtension?: string;
-}
-
-interface ImGroupMessage {
-  groupId: string;
-  type: number;
-  data: string;
-  sender?: ImUser;
-  timestamp?: number;
-}
-
-interface ImGroupMemberChangeEvent {
-  groupId: string;
-  memberCount: number;
-  joinUsers: ImUser[];
-  leaveUsers: ImUser[];
-}
-
-interface ImGroupMuteChangeEvent {
-  groupId: string;
-  status: AliVCInteraction.ImGroupMuteStatus;
-}
-
-interface ImGroupInfoChangeEvent {
-  groupId: string;
-  info: AliVCInteraction.ImGroupInfoStatus;
-}
-
-interface ImError {
-  code: number;
-  msg: string;
-  message?: string;
-}
-
-const { ImEngine: ImEngineClass, ImLogLevel, ImMessageLevel } = window.AliVCInteraction;
-
-// 请从控制台复制对应的值填入下面 AppId、 AppKey、AppSign 变量当中
-// 注意：这里仅作为本地快速体验使用，实际开发请勿在前端泄露 AppKey
-const AppId = '4c2ab5e1b1b0';
-const AppKey = '314bb5eee5b623549e8a41574ba3ff32';
-const AppSign = 'H4sIAAAAAAAE/wCQAG//zguHB+lYCilkv7diSkk4GmcvLuds+InRu9vFOFebMwm/jEgsK5bBT85Z0owObMxG58uXHyPFlPEBEDQm9FswNJ+KmX0VDYkcfdPPWkafA6Hc0B6F+p5De9yJfPEfHzwo/DHMaygbHfLmBgUtmKveq421sJr/gNBz9D04Ewsg39us+ao0NegzLt7xtXvFXXXJAAAA//8BAAD//yoav6aQAAAA';
-
-export const LivePage = () => {
-    const [userId, setUserId] = useState<string>('');
-    const [groupId, setGroupId] = useState<string>('');
-    const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
-    const [isJoinedGroup, setIsJoinedGroup] = useState<boolean>(false);
-    const [msgText, setMsgText] = useState<string>('');
-    const [messageList, setMessageList] = useState<string[]>([]);
-    const [errorMessage, setErrorMessage] = useState<string>('');
-
-    const engine: ImEngine = ImEngineClass.createEngine();
-    const [groupManager, setGroupManager] = useState<ImGroupManager | null>(null);
-    const [messageManager, setMessageManager] = useState<ImMessageManager | null>(null);
-    const [joinedGroupId, setJoinedGroupId] = useState<string | null>(null);
-
-    const sha256 = async (message: string): Promise<string> => {
-        const encoder = new TextEncoder();
-        const data = encoder.encode(message);
-        const result = await crypto.subtle.digest('SHA-256', data).then((buffer) => {
-            let hash = Array.prototype.map.call(new Uint8Array(buffer), (x) => ('00' + x.toString(16)).slice(-2)).join('');
-            return hash;
-        });
-        return result;
-    };
-
-    const getLoginAuth = async (userId: string, role: string): Promise<AliVCInteraction.ImAuth> => {
-        const nonce = 'AK_4';
-        const timestamp = Math.floor(Date.now() / 1000) + 3600 * 3;
-        const pendingShaStr = `${AppId}${AppKey}${userId}${nonce}${timestamp}${role}`;
-        const appToken = await sha256(pendingShaStr);
-        return {
-            nonce,
-            timestamp,
-            token: appToken,
-            role,
-        };
-    };
-
-    const showMessage = (text: string): void => {
-        setMessageList([...messageList, text]);
-    };
-
-    const listenEngineEvents = (): void => {
-        engine.on('connecting', () => {
-            console.log('connecting');
-        });
-        engine.on('connectfailed', (err) => {
-            console.log(`connect failed: ${err.message}`);
-        });
-        engine.on('connectsuccess', () => {
-            console.log('connect success');
-        });
-        engine.on('disconnect', (code: number) => {
-            console.log(`disconnect: ${code}`);
-        });
-        engine.on('tokenexpired', async (cb: (error: null, auth: AliVCInteraction.ImAuth) => void) => {
-            console.log('token expired');
-            // 这里需要更新为获取新的登录信息的代码
-            // const auth = await getLoginAuth(userId, role);
-            // cb(null, auth);
-        });
-    };
-
-    const listenGroupEvents = (): void => {
-        if (!groupManager) {
-            return;
-        }
-        groupManager.on('exit', (groupId: string, reason: number) => {
-            showMessage(`group ${groupId} close, reason: ${reason}`);
-        });
-        groupManager.on('memberchange', (groupId: string, memberCount: number, joinUsers: ImUser[], leaveUsers: ImUser[]) => {
-            showMessage(`group ${groupId} member change, memberCount: ${memberCount}, joinUsers: ${joinUsers.map(u => u.userId).join(',')}, leaveUsers: ${leaveUsers.map(u => u.userId).join('')}`);
-        });
-        groupManager.on('mutechange', (groupId: string, status: AliVCInteraction.ImGroupMuteStatus) => {
-            showMessage(`group ${groupId} mute change`);
-        });
-        groupManager.on('infochange', (groupId: string, info: AliVCInteraction.ImGroupInfoStatus) => {
-            showMessage(`group ${groupId} info change`);
-        });
-    };
-
-    const listenMessageEvents = (): void => {
-        if (!messageManager) {
-            return;
-        }
-        messageManager.on('recvgroupmessage', (msg: AliVCInteraction.ImMessage, groupId: string) => {
-            console.log('recvgroupmessage', msg, groupId);
-            showMessage(`receive group: ${groupId}, type: ${msg.type}, data: ${msg.data}`);
-        });
-    };
-
-    const login = async (userId: string): Promise<void> => {
-        try {
-            await engine.init({
-                deviceId: 'xxxx',
-                appId: AppId,
-                appSign: AppSign,
-                logLevel: ImLogLevel.ERROR,
-            });
-            listenEngineEvents();
-            const role = 'admin';
-            const authData = await getLoginAuth(userId, role);
-            await engine.login({
-                user: {
-                    userId,
-                    userExtension: '{}',
-                },
-                userAuth: {
-                    timestamp: authData.timestamp,
-                    nonce: authData.nonce,
-                    role: authData.role,
-                    token: authData.token,
-                },
-            });
-            const gm = engine.getGroupManager();
-            const mm = engine.getMessageManager();
-            setGroupManager(gm || null);
-            setMessageManager(mm || null);
-            setIsLoggedIn(true);
-            setErrorMessage('');
-        } catch (err: any) {
-            setErrorMessage(`初始化、登录失败: ${err.code} ${err.msg}`);
-        }
-    };
-
-    const logout = async (): Promise<void> => {
-        try {
-            await engine.logout();
-            engine.unInit();
-            setGroupManager(null);
-            setMessageManager(null);
-            setJoinedGroupId(null);
-            setIsLoggedIn(false);
-            setIsJoinedGroup(false);
-            setErrorMessage('');
-        } catch (err: any) {
-            setErrorMessage(`登出失败: ${err.code} ${err.msg}`);
-        }
-    };
-
-    const joinGroup = async (groupId: string): Promise<void> => {
-        try {
-            if (!groupManager) {
-                return;
-            }
-            await groupManager.joinGroup(groupId);
-            setJoinedGroupId(groupId);
-            listenGroupEvents();
-            listenMessageEvents();
-            setIsJoinedGroup(true);
-            setErrorMessage('');
-        } catch (err: any) {
-            setErrorMessage(`加入群组失败: ${err.code} ${err.msg}`);
-        }
-    };
-
-    const leaveGroup = async (): Promise<void> => {
-        try {
-            if (!groupManager || !joinedGroupId) {
-                return;
-            }
-            await groupManager.leaveGroup(joinedGroupId);
-            groupManager.removeAllListeners();
-            messageManager?.removeAllListeners();
-            setJoinedGroupId(null);
-            setIsJoinedGroup(false);
-            setErrorMessage('');
-        } catch (err: any) {
-            setErrorMessage(`离开群组失败: ${err.code} ${err.msg}`);
-        }
-    };
-
-    const createGroup = async (): Promise<void> => {
-        try {
-            if (!groupManager) {
-                return;
-            }
-            const res = await groupManager.createGroup({
-                groupId,
-                groupName: 'xxx',
-                groupMeta: 'xxx',
-            });
-            console.log('创建群组成功', res);
-            setErrorMessage('');
-        } catch (err: any) {
-            setErrorMessage(`创建群组失败: ${err.code} ${err.msg}`);
-        }
-    };
-
-    const sendMessage = async (): Promise<void> => {
-        try {
-            if (!messageManager || !joinedGroupId) {
-                return;
-            }
-            const res = await messageManager.sendGroupMessage({
-                groupId: joinedGroupId,
-                data: msgText,
-                type: 88888,
-                skipAudit: false,
-                skipMuteCheck: false,
-                level: ImMessageLevel.NORMAL,
-                noStorage: true,
-                repeatCount: 1,
-            });
-            console.log('群消息发送成功', res);
-            setMsgText('');
-            setErrorMessage('');
-        } catch (err: any) {
-            setErrorMessage(`群消息发送失败: ${err.code} ${err.msg}`);
-        }
-    };
-
-    const clearMessages = (): void => {
-        setMessageList([]);
-    };
-
-    useEffect(() => {
-        return () => {
-            if (groupManager) {
-                groupManager.removeAllListeners();
-            }
-            if (messageManager) {
-                messageManager.removeAllListeners();
-            }
-            if (engine) {
-                engine.removeAllListeners();
-            }
-        };
-    }, []);
-
-    return (
-        <div className="container mx-auto p-4">
-            <h1 className="text-2xl font-bold mb-4">互动消息 quick start</h1>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div>
-                    <form>
-                        <div className="mb-2">
-                            <label htmlFor="userId" className="block text-sm font-medium text-gray-700">用户ID</label>
-                            <input
-                                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-                                id="userId"
-                                placeholder="请输入英文字母或数字"
-                                value={userId}
-                                onChange={(e) => setUserId(e.target.value)}
-                            />
-                        </div>
-                        <div className="mb-2">
-                            <label htmlFor="groupId" className="block text-sm font-medium text-gray-700">群组ID</label>
-                            <input
-                                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-                                id="groupId"
-                                placeholder="加入群组前请确认是否已存在，不存在先创建"
-                                value={groupId}
-                                onChange={(e) => setGroupId(e.target.value)}
-                            />
-                        </div>
-                        <div className="mb-2 flex space-x-2">
-                            <button
-                                id="loginBtn"
-                                type="button"
-                                className={`px-3 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${isLoggedIn? 'opacity-50 cursor-not-allowed' : ''}`}
-                                disabled={isLoggedIn}
-                                onClick={() => login(userId)}
-                            >
-                                登录
-                            </button>
-                            <button
-                                id="joinBtn"
-                                type="button"
-                                className={`px-3 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${isLoggedIn && isJoinedGroup? 'opacity-50 cursor-not-allowed' : ''}`}
-                                disabled={isLoggedIn && isJoinedGroup}
-                                onClick={() => joinGroup(groupId)}
-                            >
-                                加入群组
-                            </button>
-                            <button
-                                id="createBtn"
-                                type="button"
-                                className={`px-3 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${!isLoggedIn? 'opacity-50 cursor-not-allowed' : ''}`}
-                                disabled={!isLoggedIn}
-                                onClick={() => createGroup()}
-                            >
-                                创建群组
-                            </button>
-                            <button
-                                id="leaveBtn"
-                                type="button"
-                                className={`px-3 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 ${!isLoggedIn ||!isJoinedGroup? 'opacity-50 cursor-not-allowed' : ''}`}
-                                disabled={!isLoggedIn ||!isJoinedGroup}
-                                onClick={() => leaveGroup()}
-                            >
-                                离开群组
-                            </button>
-                            <button
-                                id="logoutBtn"
-                                type="button"
-                                className={`px-3 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 ${!isLoggedIn? 'opacity-50 cursor-not-allowed' : ''}`}
-                                disabled={!isLoggedIn}
-                                onClick={() => logout()}
-                            >
-                                登出
-                            </button>
-                        </div>
-                        <p className="mb-2 text-sm text-gray-600">假如群组ID已存在，可以一键登录+加入群组</p>
-                        <div className="mb-2 flex space-x-2">
-                            <button
-                                id="oneLoginBtn"
-                                type="button"
-                                className={`px-3 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${isLoggedIn && isJoinedGroup? 'opacity-50 cursor-not-allowed' : ''}`}
-                                disabled={isLoggedIn && isJoinedGroup}
-                                onClick={() => {
-                                    if (userId && groupId) {
-                                        login(userId).then(() => {
-                                            joinGroup(groupId);
-                                        });
-                                    }
-                                }}
-                            >
-                                一键登录+加入群组
-                            </button>
-                            <button
-                                id="oneLogoutBtn"
-                                type="button"
-                                className={`px-3 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 ${!isLoggedIn ||!isJoinedGroup? 'opacity-50 cursor-not-allowed' : ''}`}
-                                disabled={!isLoggedIn ||!isJoinedGroup}
-                                onClick={() => {
-                                    leaveGroup().then(() => {
-                                        logout();
-                                    });
-                                }}
-                            >
-                                一键离开群组+登出
-                            </button>
-                        </div>
-                    </form>
-                    <form className="mt-4">
-                        <div className="mb-2">
-                            <label htmlFor="msgText" className="block text-sm font-medium text-gray-700">消息</label>
-                            <input
-                                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-                                id="msgText"
-                                value={msgText}
-                                onChange={(e) => setMsgText(e.target.value)}
-                            />
-                        </div>
-                        <div className="mb-2">
-                            <button
-                                id="sendBtn"
-                                type="button"
-                                className={`px-3 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${!isLoggedIn ||!isJoinedGroup? 'opacity-50 cursor-not-allowed' : ''}`}
-                                disabled={!isLoggedIn ||!isJoinedGroup}
-                                onClick={() => sendMessage()}
-                            >
-                                发送
-                            </button>
-                        </div>
-                    </form>
-                </div>
-                <div>
-                    <h5 className="flex justify-between items-center text-lg font-medium mb-2">
-                        消息展示
-                        <button
-                            id="clearBtn"
-                            type="button"
-                            className="px-3 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
-                            onClick={clearMessages}
-                        >
-                            清空
-                        </button>
-                    </h5>
-                    <div id="msgList" className="mt-4 space-y-2">
-                        {messageList.map((msg, index) => (
-                            <div key={index} className="bg-gray-100 p-2 rounded-md">{msg}</div>
-                        ))}
-                    </div>
-                </div>
-            </div>
-            {errorMessage && <div className="mt-2 text-red-500">{errorMessage}</div>}
-        </div>
-    );
-};

client/mobile/pages_rtc.tsx

@@ -1,262 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import AliRtcEngine, { AliRtcSubscribeState, AliRtcVideoTrack,AliRtcSdkChannelProfile } from 'aliyun-rtc-sdk';
-import { ToastContainer, toast } from 'react-toastify';
-
-// 辅助函数
-function hex(buffer: ArrayBuffer): string {
-    const hexCodes = [];
-    const view = new DataView(buffer);
-    for (let i = 0; i < view.byteLength; i += 4) {
-        const value = view.getUint32(i);
-        const stringValue = value.toString(16);
-        const padding = '00000000';
-        const paddedValue = (padding + stringValue).slice(-padding.length);
-        hexCodes.push(paddedValue);
-    }
-    return hexCodes.join('');
-}
-
-async function generateToken(
-    appId: string,
-    appKey: string,
-    channelId: string,
-    userId: string,
-    timestamp: number
-): Promise<string> {
-    const encoder = new TextEncoder();
-    const data = encoder.encode(`${appId}${appKey}${channelId}${userId}${timestamp}`);
-    const hash = await crypto.subtle.digest('SHA-256', data);
-    return hex(hash);
-}
-
-function showToast(type: 'info' | 'success' | 'error', message: string): void {
-    switch(type) {
-        case 'info':
-            toast.info(message);
-            break;
-        case 'success':
-            toast.success(message);
-            break;
-        case 'error':
-            toast.error(message);
-            break;
-    }
-}
-
-const appId = 'a5842c2a-d94a-43be-81de-1fdb712476e1';
-const appKey = 'b71d65f4f84c450f6f058f4ad507bd42';
-
-export const RTCPage = () => {
-    const [channelId, setChannelId] = useState<string>('');
-    const [userId, setUserId] = useState<string>('');
-    const [isJoined, setIsJoined] = useState<boolean>(false);
-    const aliRtcEngine = useRef<AliRtcEngine | null>(null);
-    const remoteVideoElMap = useRef<Record<string, HTMLVideoElement>>({});
-    const remoteVideoContainer = useRef<HTMLDivElement>(null);
-
-    function removeRemoteVideo(userId: string, type: 'camera' | 'screen' = 'camera') {
-        const vid = `${type}_${userId}`;
-        const el = remoteVideoElMap.current[vid];
-        if (el) {
-            aliRtcEngine.current!.setRemoteViewConfig(null, userId, type === 'camera' ? AliRtcVideoTrack.AliRtcVideoTrackCamera : AliRtcVideoTrack.AliRtcVideoTrackScreen);
-            el.pause();
-            remoteVideoContainer.current?.removeChild(el);
-            delete remoteVideoElMap.current[vid];
-        }
-    }
-
-    function listenEvents() {
-        if (!aliRtcEngine.current) {
-            return;
-        }
-        aliRtcEngine.current.on('remoteUserOnLineNotify', (userId: string, elapsed: number) => {
-            console.log(`用户 ${userId} 加入频道，耗时 ${elapsed} 秒`);
-            showToast('info', `用户 ${userId} 上线`);
-        });
-
-        aliRtcEngine.current.on('remoteUserOffLineNotify', (userId, reason) => {
-            console.log(`用户 ${userId} 离开频道，原因码: ${reason}`);
-            showToast('info', `用户 ${userId} 下线`);
-            removeRemoteVideo(userId, 'camera');
-            removeRemoteVideo(userId, 'screen');
-        });
-
-        aliRtcEngine.current.on('bye', (code) => {
-            console.log(`bye, code=${code}`);
-            showToast('info', `您已离开频道，原因码: ${code}`);
-        });
-
-        aliRtcEngine.current.on('videoSubscribeStateChanged', (
-            userId: string,
-            oldState: AliRtcSubscribeState,
-            newState: AliRtcSubscribeState,
-            interval: number,
-            channelId: string
-        ) => {
-            console.log(`频道 ${channelId} 远端用户 ${userId} 订阅状态由 ${oldState} 变为 ${newState}`);
-            const vid = `camera_${userId}`;
-            if (newState === 3) {
-                const video = document.createElement('video');
-                video.autoplay = true;
-                video.className = 'w-80 h-45 mr-2 mb-2 bg-black';
-                remoteVideoElMap.current[vid] = video;
-                remoteVideoContainer.current?.appendChild(video);
-                aliRtcEngine.current!.setRemoteViewConfig(video, userId, AliRtcVideoTrack.AliRtcVideoTrackCamera);
-            } else if (newState === 1) {
-                removeRemoteVideo(userId, 'camera');
-            }
-        });
-
-        aliRtcEngine.current.on('screenShareSubscribeStateChanged', (
-            userId: string,
-            oldState: AliRtcSubscribeState,
-            newState: AliRtcSubscribeState,
-            interval: number,
-            channelId: string
-        ) => {
-            console.log(`频道 ${channelId} 远端用户 ${userId} 屏幕流的订阅状态由 ${oldState} 变为 ${newState}`);
-            const vid = `screen_${userId}`;
-            if (newState === 3) {
-                const video = document.createElement('video');
-                video.autoplay = true;
-                video.className = 'w-80 h-45 mr-2 mb-2 bg-black';
-                remoteVideoElMap.current[vid] = video;
-                remoteVideoContainer.current?.appendChild(video);
-                aliRtcEngine.current!.setRemoteViewConfig(video, userId, AliRtcVideoTrack.AliRtcVideoTrackScreen);
-            } else if (newState === 1) {
-                removeRemoteVideo(userId, 'screen');
-            }
-        });
-    }
-
-    const handleLoginSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
-        const timestamp = Math.floor(Date.now() / 1000) + 3600 * 3;
-
-        if (!channelId || !userId) {
-            showToast('error', '数据不完整');
-            return;
-        }
-
-        const engine = AliRtcEngine.getInstance();
-        aliRtcEngine.current = engine;
-        listenEvents();
-
-        try {
-            const token = await generateToken(appId, appKey, channelId, userId, timestamp);
-            aliRtcEngine.current!.setChannelProfile(AliRtcSdkChannelProfile.AliRtcSdkCommunication);
-            await aliRtcEngine.current.joinChannel(
-                {
-                    channelId,
-                    userId,
-                    appId,
-                    token,
-                    timestamp,
-                },
-                userId
-            );
-            showToast('success', '加入频道成功');
-            setIsJoined(true);
-            aliRtcEngine.current!.setLocalViewConfig('localPreviewer', AliRtcVideoTrack.AliRtcVideoTrackCamera);
-        } catch (error) {
-            console.log('加入频道失败', error);
-            showToast('error', '加入频道失败');
-        }
-    };
-
-    const handleLeaveClick = async () => {
-        Object.keys(remoteVideoElMap.current).forEach(vid => {
-            const arr = vid.split('_');
-            removeRemoteVideo(arr[1], arr[0] as 'screen' | 'camera');
-        });
-        if (aliRtcEngine.current) {
-            await aliRtcEngine.current.stopPreview();
-            await aliRtcEngine.current.leaveChannel();
-            aliRtcEngine.current.destroy();
-            aliRtcEngine.current = null;
-        }
-        setIsJoined(false);
-        showToast('info', '已离开频道');
-    };
-
-    useEffect(() => {
-        AliRtcEngine.setLogLevel(0);
-    }, []);
-
-    return (
-        <div className="container p-2">
-            <h1 className="text-2xl font-bold mb-4">aliyun-rtc-sdk 快速开始</h1>
-
-            <ToastContainer
-                position="top-right"
-                autoClose={5000}
-                hideProgressBar={false}
-                newestOnTop={false}
-                closeOnClick
-                rtl={false}
-                pauseOnFocusLoss
-                draggable
-                pauseOnHover
-            />
-
-            <div className="flex flex-wrap -mx-2 mt-6">
-                <div className="w-full md:w-1/2 px-2 mb-4">
-                    <form id="loginForm" onSubmit={handleLoginSubmit}>
-                        <div className="mb-2">
-                            <label htmlFor="channelId" className="block text-gray-700 text-sm font-bold mb-2">频道号</label>
-                            <input
-                                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-                                id="channelId"
-                                type="text"
-                                value={channelId}
-                                onChange={(e) => setChannelId(e.target.value)}
-                            />
-                        </div>
-                        <div className="mb-2">
-                            <label htmlFor="userId" className="block text-gray-700 text-sm font-bold mb-2">用户ID</label>
-                            <input
-                                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-                                id="userId"
-                                type="text"
-                                value={userId}
-                                onChange={(e) => setUserId(e.target.value)}
-                            />
-                        </div>
-                        <button
-                            id="joinBtn"
-                            type="submit"
-                            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mb-2"
-                            disabled={isJoined}
-                        >
-                            加入频道
-                        </button>
-                        <button
-                            id="leaveBtn"
-                            type="button"
-                            className="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded mb-2"
-                            disabled={!isJoined}
-                            onClick={handleLeaveClick}
-                        >
-                            离开频道
-                        </button>
-                    </form>
-
-                    <div className="mt-6">
-                        <h4 className="text-lg font-bold mb-2">本地预览</h4>
-                        <video
-                            id="localPreviewer"
-                            muted
-                            className="w-80 h-45 mr-2 mb-2 bg-black"
-                        ></video>
-                    </div>
-                </div>
-                <div className="w-full md:w-1/2 px-2">
-                    <h4 className="text-lg font-bold mb-2">远端用户</h4>
-                    <div id="remoteVideoContainer" ref={remoteVideoContainer}></div>
-                </div>
-            </div>
-        </div>
-    );
-};
-
-