feat: init agora

src/routes/chat/VoiceChat/Dashboard.tsx

@@ -0,0 +1,70 @@
+import { useEffect } from 'react';
+import AgoraRTC from "agora-rtc-sdk-ng";
+import useConfig from '../../../common/hook/useConfig';
+import { useDispatch } from 'react-redux';
+import { updateVoiceStatus } from '../../../app/slices/auth.data';
+
+type Props = {
+  channel: string,
+  uid: number,
+  voicing?: boolean;
+}
+
+const Dashboard = ({ voicing, uid, channel }: Props) => {
+  const dispatch = useDispatch();
+  console.log("aaaaa");
+
+  const { agoraConfig } = useConfig("agora");
+  useEffect(() => {
+    console.log("aaa", agoraConfig);
+    const startConnect = async () => {
+      // Create an instance of the Agora Engine
+      const agoraEngine = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
+
+      // Listen for the "user-published" event to retrieve an AgoraRTCRemoteUser object.
+      agoraEngine.on("user-published", async (user, mediaType) => {
+        // Subscribe to the remote user when the SDK triggers the "user-published" event.
+        await agoraEngine.subscribe(user, mediaType);
+        console.log("subscribe success");
+
+        // // Subscribe and play the remote audio track.
+        // if (mediaType == "audio")
+        // {
+        //   channelParameters.remoteUid=user.uid;
+        //   // Get the RemoteAudioTrack object from the AgoraRTCRemoteUser object.
+        //   channelParameters.remoteAudioTrack = user.audioTrack;
+        //   // Play the remote audio track. 
+        //   channelParameters.remoteAudioTrack.play();
+        //   console.log("Remote user connected: " + user.uid);
+
+        // }
+
+        // Listen for the "user-unpublished" event.
+        agoraEngine.on("user-unpublished", user => {
+          console.log(user.uid + "has left the channel");
+          console.log("Remote user has left the channel");
+        });
+      });
+      // Join a channel.
+      console.log("join data ", agoraConfig);
+      await agoraEngine.join(agoraConfig!.app_id, agoraConfig!.rtm_key, agoraConfig!.rtm_secret, uid);
+      console.log("Joined channel: " + agoraConfig!.rtm_key);
+      // // Create a local audio track from the microphone audio.
+      // channelParameters.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
+      // // Publish the local audio track in the channel.
+      // await agoraEngine.publish(channelParameters.localAudioTrack);
+      // console.log("Publish success!");
+      dispatch(updateVoiceStatus(true));
+    };
+
+    if (!voicing && agoraConfig) {
+      startConnect();
+    }
+  }, [voicing, agoraConfig, uid, channel]);
+
+  return (
+    <div>Dashboard</div>
+  );
+};
+
+export default Dashboard;

src/routes/chat/VoiceChat/index.tsx

@@ -0,0 +1,36 @@
+// import React from 'react';
+import Tippy from '@tippyjs/react';
+import { useTranslation } from 'react-i18next';
+import { useAppSelector } from '../../../app/store';
+import IconHeadphone from '../../../assets/icons/headphone.svg';
+import Tooltip from '../../../common/component/Tooltip';
+import Dashboard from './Dashboard';
+
+type Props = {
+    channel: string
+}
+
+const VoiceChat = ({ channel }: Props) => {
+    const { loginUser, voice } = useAppSelector(store => { return { loginUser: store.authData.user, voice: store.authData.voice }; });
+    const { t } = useTranslation("chat");
+    const toolClass = `relative cursor-pointer`;
+    if (!loginUser) return null;
+    return (
+        <Tooltip tip={t("fav")} placement="left">
+            <Tippy
+                placement="left-start"
+                popperOptions={{ strategy: "fixed" }}
+                offset={[0, 164]}
+                interactive
+                trigger="click"
+                content={<Dashboard uid={loginUser.uid} channel={channel} voicing={voice} />}
+            >
+                <li className={`${toolClass}`}>
+                    <IconHeadphone className="fill-gray-500" />
+                </li>
+            </Tippy>
+        </Tooltip>
+    );
+};
+
+export default VoiceChat;