web sdk 2.1.3-alpha

AgoraIO · Oct 25, 2024 · 225fb3a · 225fb3a
1 parent df30380
commit 225fb3a
Show file tree

Hide file tree

Showing 13 changed files with 143 additions and 87 deletions.
diff --git a/examples/web/package.json b/examples/web/package.json
@@ -10,7 +10,7 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "iot-callkit-web": "~2.1.2",
+        "iot-callkit-web": "2.1.3-alpha",
         "@vitejs/plugin-react": "^4.1.0",
         "antd-mobile": "~5.37.0",
         "antd-mobile-icons": "~0.3.0",

diff --git a/examples/web/src/App.tsx b/examples/web/src/App.tsx
@@ -8,7 +8,7 @@ import defaultSettings from "../src/configs/callkit.config";
 
 import { AuthProvider, useAuth } from "./hooks/useAuth";
 import { IotEngineProvider } from "./hooks/useIotEngine";
-import { useLocalStorage } from "./hooks/useLocalStorage";
+import { useSessionStorage } from "./hooks/useSessionStorage";
 import Home from "./pages/Home";
 import Login from "./pages/Login";
 import PersonalCenter from "./pages/PersonalCenter";
@@ -26,7 +26,7 @@ export const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
 };
 
 const App = () => {
-  useLocalStorage("settings", defaultSettings);
+  useSessionStorage("settings", defaultSettings);
 
   const [version, setVersion] = useState<{
     version: string | undefined;

diff --git a/examples/web/src/configs/callkit.config.ts b/examples/web/src/configs/callkit.config.ts
@@ -1,6 +1,6 @@
 export default {
-  appId: "5ea8ad97b4684c798966b99a965beb9a",
-  authKey: "59a44ef2b37745fe93c6c660f0700184",
-  secretKey: "65825d8c98b5461291f91726ef9cfb85",
+  appId: "",
+  authKey: "",
+  secretKey: "",
   region: ["cn"],
 };
diff --git a/examples/web/src/hooks/useAuth.tsx b/examples/web/src/hooks/useAuth.tsx
@@ -4,12 +4,11 @@ import { useNavigate } from "react-router-dom";
 
 import { ACTIVE_ACCOUNT, BASE_URL_TAIL, fetchAPI, generateBasicAuth } from "../configs/server";
 
-import { useLocalStorage } from "./useLocalStorage";
+import { useSessionStorage } from "./useSessionStorage";
 
 export interface AuthContextProps {
   user: User;
   login: (data: User) => Promise<void>;
-  logout: () => void;
 }
 
 export interface User {
@@ -23,12 +22,11 @@ export interface User {
 const AuthContext = createContext<AuthContextProps>({
   user: {},
   login: async () => {},
-  logout: () => {},
 });
 
 export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
-  const [user, setUser] = useLocalStorage("user", null);
-  const [settings] = useLocalStorage("settings", null);
+  const [user, setUser] = useSessionStorage("user", null);
+  const [settings] = useSessionStorage("settings", null);
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -38,6 +36,10 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
   }, []);
 
   const login = async (data: User) => {
+    if (settings.appId === "") {
+      Toast.show("please input appid in setting page");
+      return;
+    }
     const res = await fetchAPI({
       url: `${settings.region[0]}${BASE_URL_TAIL}${ACTIVE_ACCOUNT}`,
       body: {
@@ -72,16 +74,10 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
     }
   };
 
-  const logout = () => {
-    setUser(null);
-    navigate("/", { replace: true });
-  };
-
   const value = useMemo(
     () => ({
       user,
       login,
-      logout,
     }),
     [user],
   );

diff --git a/examples/web/src/hooks/useIotEngine.tsx b/examples/web/src/hooks/useIotEngine.tsx
@@ -3,7 +3,7 @@ import getAgoraIotEngine, { InitParam } from "iot-callkit-web";
 import { createContext, useContext, useEffect, useMemo, useRef } from "react";
 
 import { useAuth } from "./useAuth";
-import { useLocalStorage } from "./useLocalStorage";
+import { useSessionStorage } from "./useSessionStorage";
 
 export interface IotEngineContextProps {
   iotEngine: IAgoraIotAppSdk;
@@ -16,7 +16,7 @@ const IotEngineContext = createContext<IotEngineContextProps>({
 export const IotEngineProvider = ({ children }: { children: React.ReactNode }) => {
   const { user } = useAuth();
 
-  const [settings] = useLocalStorage("settings", null);
+  const [settings] = useSessionStorage("settings", null);
   const iotEngine = useRef<IAgoraIotAppSdk>(getAgoraIotEngine());
   useEffect(() => {
     if (!user || !settings) {

diff --git a/examples/web/src/hooks/useSessionStorage.tsx b/examples/web/src/hooks/useSessionStorage.tsx
@@ -0,0 +1,35 @@
+import { useState } from "react";
+
+export const useSessionStorage = (keyName: string, defaultValue?: any) => {
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      const value = window.sessionStorage.getItem(keyName);
+      if (value) {
+        return JSON.parse(value);
+      } else {
+        window.sessionStorage.setItem(keyName, JSON.stringify(defaultValue));
+        return defaultValue;
+      }
+    } catch (err) {
+      console.log(err);
+      return defaultValue;
+    }
+  });
+  const setValue = (newValue: any) => {
+    try {
+      window.sessionStorage.setItem(keyName, JSON.stringify(newValue));
+    } catch (err) {
+      console.log(err);
+    }
+    if (newValue instanceof Array) {
+      setStoredValue([...newValue]);
+    } else {
+      if (newValue instanceof Object) {
+        setStoredValue({ ...newValue });
+      } else {
+        setStoredValue(newValue);
+      }
+    }
+  };
+  return [storedValue, setValue];
+};
diff --git a/examples/web/src/pages/Home/index.scss b/examples/web/src/pages/Home/index.scss
@@ -1,7 +1,8 @@
 .home {
   .item {
     background: #333;
-    margin: 12px;
+    margin: 0 auto;
+    max-width: 600px;
   }
   .delete {
     color: #ffffff;

diff --git a/examples/web/src/pages/Home/index.tsx b/examples/web/src/pages/Home/index.tsx
@@ -9,7 +9,7 @@ import { useNavigate } from "react-router-dom";
 
 import LogSink, { log } from "../../components/LogSink";
 import { useIotEngine } from "../../hooks/useIotEngine";
-import { useLocalStorage } from "../../hooks/useLocalStorage";
+import { useSessionStorage } from "../../hooks/useSessionStorage";
 
 import "./index.scss";
 
@@ -23,30 +23,48 @@ interface ConnectionObjStore {
   localNodeId: string;
   isPreview: boolean;
   isFullScreen: boolean;
-  isConnected: boolean;
   isAudioMute: boolean;
   isMicOn: boolean;
 }
 
 const Home = () => {
   const navigate = useNavigate();
-  const [addPeerNodeId, setAddPeerNodeId] = useState("01HR439QSN8BM59HAR5P426TBP");
+  const [addPeerNodeId, setAddPeerNodeId] = useState("");
   const [isShowLogSink, setIsShowLogSink] = useState(false);
-  const [connectionObjStoreList, setConnectionObjStoreList] = useLocalStorage(
+  const [connectionObjStoreList, setConnectionObjStoreList] = useSessionStorage(
     "connectionObjStoreList",
     [],
   );
+  const connectionObjStoreListRef = useRef(connectionObjStoreList);
   const { iotEngine } = useIotEngine();
 
-  const preview = useRef<HTMLDivElement>(null);
-
   const connectionCreate = (peerNodeId: string) => {
     const connectionMgr: IConnectionMgr = iotEngine.getConnectionMgr();
     const param = new ConnectCreateParam({
       mAttachMsg: "",
       mPeerNodeId: peerNodeId,
     });
-    connectionMgr?.connectionCreate(param);
+    const connectObj = connectionMgr?.connectionCreate(param);
+    changeAndAddConnectObj(connectObj);
+  };
+
+  const changeAndAddConnectObj = (connectObj: IConnectionObj) => {
+    const nextConnectionObjStoreList = connectionObjStoreListRef.current;
+    if (
+      !nextConnectionObjStoreList.find(
+        (node: IConnectionObj) => node.peerNodeId === connectObj.peerNodeId,
+      )
+    ) {
+      nextConnectionObjStoreList.push({
+        peerNodeId: connectObj.peerNodeId,
+        localNodeId: connectObj.localNodeId,
+        isPreview: false,
+        isFullScreen: false,
+        isAudioMute: true,
+        isMicOn: false,
+      });
+    }
+    setConnectionObjStoreList(nextConnectionObjStoreList);
   };
 
   const connectionDestroy = (peerNodeId: string) => {
@@ -56,14 +74,22 @@ const Home = () => {
       .find(node => node.peerNodeId === peerNodeId);
     if (connectObj) {
       connectionMgr?.connectionDestroy(connectObj);
-      changeConnectionObjStore(connectObj.peerNodeId, "isConnected", false);
+      console.log(connectionMgr?.getConnectionList());
+      changeConnectionObjStore(peerNodeId, "isPreview", false);
+      changeConnectionObjStore(peerNodeId, "isAudioMute", true);
+      changeConnectionObjStore(peerNodeId, "isMicOn", false);
     }
   };
 
   const deleteConnectionObjStore = (peerNodeId: string) => {
-    setConnectionObjStoreList(
-      connectionObjStoreList.filter((node: ConnectionObjStore) => node.peerNodeId !== peerNodeId),
+    const nextConnectionObjStoreList = connectionObjStoreListRef.current;
+    const index = nextConnectionObjStoreList.findIndex(
+      (node: ConnectionObjStore) => node.peerNodeId === peerNodeId,
     );
+    if (index !== -1) {
+      nextConnectionObjStoreList.splice(index, 1);
+    }
+    setConnectionObjStoreList(nextConnectionObjStoreList);
   };
 
   useEffect(() => {
@@ -89,7 +115,6 @@ const Home = () => {
     const eventListener = {
       onConnectionCreateDone: (connectObj: IConnectionObj, errCode: number) => {
         log.log("onConnectionCreateDone", "connectObj", connectObj, "errCode", errCode);
-
         if (!connectObj) {
           Toast.show("error: connectObj is null");
           return;
@@ -100,34 +125,16 @@ const Home = () => {
           return;
         }
         connectObj.registerListener(connectionObjEventListeners);
-        if (
-          !connectionObjStoreList.find(
-            (node: IConnectionObj) => node.peerNodeId === connectObj.peerNodeId,
-          )
-        ) {
-          setConnectionObjStoreList([
-            ...connectionObjStoreList,
-            {
-              peerNodeId: connectObj.peerNodeId,
-              localNodeId: connectObj.localNodeId,
-              isPreview: false,
-              isFullScreen: false,
-              isConnected: true,
-            } as ConnectionObjStore,
-          ]);
-        } else {
-          changeConnectionObjStore(connectObj.peerNodeId, "isConnected", true);
-        }
+        changeAndAddConnectObj(connectObj);
       },
       onPeerDisconnected: (connectObj: IConnectionObj, errCode: number) => {
         log.log("onPeerDisconnected", "connectObj", connectObj, "errCode", errCode);
-
         if (!connectObj) {
           Toast.show("error: connectObj is null");
           return;
         }
         connectObj.unregisterListener(connectionObjEventListeners);
-        changeConnectionObjStore(connectObj.peerNodeId, "isConnected", false);
+        connectionDestroy(connectObj.peerNodeId);
       },
     };
     iotEngine.setLogLevel(LOG_LEVEL.LOG_LEVEL_DEBUG);
@@ -139,16 +146,9 @@ const Home = () => {
   }, []);
 
   const updateConnectionObjStoreList = () => {
-    const connectionMgr: IConnectionMgr = iotEngine.getConnectionMgr();
-    const connectionList = connectionMgr?.getConnectionList();
-
-    const nextConnectionObjStoreList = connectionObjStoreList;
+    const nextConnectionObjStoreList = connectionObjStoreListRef.current;
     for (let i = 0; i < nextConnectionObjStoreList.length; i++) {
       const node: ConnectionObjStore = nextConnectionObjStoreList[i];
-      const find = connectionList?.find((connection: IConnectionObj) => {
-        return connection.peerNodeId === node.peerNodeId;
-      });
-      node.isConnected = find?.getInfo().mState === ConnectStatus.CONNECTED;
       node.isPreview = false;
       node.isFullScreen = false;
       node.isAudioMute = true;
@@ -163,14 +163,17 @@ const Home = () => {
       return;
     }
     connectObj.streamSubscribeStart(STREAM_ID.BROADCAST_STREAM_1, "");
-    connectObj.setVideoDisplayView(STREAM_ID.BROADCAST_STREAM_1, preview.current);
+    connectObj.setVideoDisplayView(
+      STREAM_ID.BROADCAST_STREAM_1,
+      document.querySelector(`.grid-video-container-${peerNodeId}`) as HTMLDivElement,
+    );
 
     changeConnectionObjStore(peerNodeId, "isPreview", true);
   };
 
   const changeConnectionObjStore = (peerNodeId: string, key: string, value: any) => {
-    const nextConnectionObjStoreList = [...connectionObjStoreList];
-    connectionObjStoreList.find((node: ConnectionObjStore) => {
+    const nextConnectionObjStoreList = connectionObjStoreListRef.current;
+    nextConnectionObjStoreList.find((node: ConnectionObjStore) => {
       if (node.peerNodeId === peerNodeId && node.hasOwnProperty(key)) {
         (node as any)[key] = value;
       }
@@ -205,6 +208,7 @@ const Home = () => {
   };
 
   const goStreamManager = (peerNodeId: string) => {
+    muteAudio(peerNodeId, false);
     navigate(`/stream-manager/${peerNodeId}`);
   };
 
@@ -359,8 +363,9 @@ const Home = () => {
               </Grid.Item>
               <Grid.Item span={2}>
                 <div
-                  className={`grid-demo-item-block ${node.isFullScreen ? "fullscreen" : "preview"}`}
-                  ref={preview}
+                  className={`grid-demo-item-block ${
+                    node.isFullScreen ? "fullscreen" : "preview"
+                  } grid-video-container-${node.peerNodeId}`}
                 >
                   {node.isFullScreen && (
                     <Button
@@ -433,6 +438,8 @@ const Home = () => {
                   onClick={() => {
                     if (getStatus(node.peerNodeId) !== "CONNECTED") {
                       Toast.show("请先连接设备");
+                    } else if (node.isPreview !== true) {
+                      Toast.show("请先预览");
                     } else {
                       muteAudio(node.peerNodeId, node.isAudioMute);
                     }

diff --git a/examples/web/src/pages/PersonalCenter/index.tsx b/examples/web/src/pages/PersonalCenter/index.tsx
@@ -2,10 +2,10 @@ import { List, NavBar } from "antd-mobile";
 import { useEffect } from "react";
 
 import defaultSettings from "../../configs/callkit.config";
-import { useLocalStorage } from "../../hooks/useLocalStorage";
+import { useSessionStorage } from "../../hooks/useSessionStorage";
 
 const PersonalCenter = () => {
-  const [settings, setSettings] = useLocalStorage("settings");
+  const [settings, setSettings] = useSessionStorage("settings");
 
   useEffect(() => {
     if (!settings) {
@@ -18,12 +18,12 @@ const PersonalCenter = () => {
   };
 
   const logout = () => {
-    localStorage.removeItem("user");
+    sessionStorage.removeItem("user");
     location.reload();
   };
 
   const clearAll = () => {
-    localStorage.clear();
+    sessionStorage.clear();
     location.reload();
   };
 
@@ -34,7 +34,7 @@ const PersonalCenter = () => {
           <div>我的</div>
         </div>
       </NavBar>
-      <List header="可点击列表">
+      <List>
         <List.Item
           onClick={() => {
             logout();