Merge pull request #418 from lowcoder-org/agora-integrationn

Agora Video Meetings V0.5

Author: FalkWolsky

client/packages/lowcoder/package.json

@@ -38,6 +38,7 @@
     "@types/react-virtualized": "^9.21.21",
     "agora-access-token": "^2.0.4",
     "agora-rtc-sdk-ng": "^4.19.0",
+    "agora-rtm-sdk": "^1.5.1",
     "ali-oss": "^6.17.1",
     "antd": "5.7.2",
     "antd-img-crop": "^4.12.2",

client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx

@@ -41,6 +41,7 @@ import { useUserViewMode } from "util/hooks";
 import { isNumeric } from "util/stringUtils";
 import { NameConfig, withExposingConfigs } from "../../generators/withExposing";
 
+import axios from "axios";
 import AgoraRTC, {
   ICameraVideoTrack,
   IMicrophoneAudioTrack,
@@ -52,6 +53,7 @@ import AgoraRTC, {
 
 import { JSONValue } from "@lowcoder-ee/index.sdk";
 import { getData } from "../listViewComp/listViewUtils";
+import AgoraRTM, { RtmChannel, RtmClient, RtmMessage } from "agora-rtm-sdk";
 
 const EventOptions = [closeEvent] as const;
 
@@ -105,6 +107,17 @@ let audioTrack: IMicrophoneAudioTrack;
 let videoTrack: ICameraVideoTrack;
 let screenShareStream: ILocalVideoTrack;
 let userId: UID | null | undefined;
+let rtmChannelResponse: RtmChannel;
+let rtmClient: RtmClient;
+
+const generateToken = async (
+  appId: any,
+  certificate: any,
+  channelName: any
+) => {
+  const agoraTokenUrl = `https://api.agora.io/v1/token?channelName=test&uid=${userId}&appID=${appId}&appCertificate=${certificate}`;
+  await axios.post(agoraTokenUrl);
+};
 
 const turnOnCamera = async (flag?: boolean) => {
   if (videoTrack) {
@@ -119,8 +132,6 @@ const turnOnMicrophone = async (flag?: boolean) => {
     return audioTrack.setEnabled(flag!);
   }
   audioTrack = await AgoraRTC.createMicrophoneAudioTrack();
-  // audioTrack.play();
-
   if (!flag) {
     await client.unpublish(audioTrack);
   } else {
@@ -141,7 +152,7 @@ const shareScreen = async (sharing: boolean) => {
         "disable"
       );
       await client.unpublish(videoTrack);
-      screenShareStream.play(userId + "");
+      screenShareStream.play("share-screen");
       await client.publish(screenShareStream);
     }
   } catch (error) {
@@ -158,15 +169,29 @@ const leaveChannel = async () => {
     await turnOnMicrophone(false);
   }
   await client.leave();
+  await rtmChannelResponse.leave();
 };
 
 const hostChanged = (users: any) => {};
 
-const publishVideo = async (appId: any, channel: any, height: any) => {
+const publishVideo = async (
+  appId: string,
+  channel: any,
+  height: any,
+  certifiCateKey: string
+) => {
+  // console.log(
+  //   "generateToken",
+  //   await generateToken(appId, certifiCateKey, channel)
+  // );
+
+  // return;
   await turnOnCamera(true);
   await client.join(appId, channel, null, userId);
   await client.publish(videoTrack);
 
+  await rtmInit(appId, userId, channel);
+
   const mediaStreamTrack = videoTrack.getMediaStreamTrack();
   if (mediaStreamTrack) {
     const videoSettings = mediaStreamTrack.getSettings();
@@ -177,6 +202,57 @@ const publishVideo = async (appId: any, channel: any, height: any) => {
   }
 };
 
+const sendMessageRtm = (message: any) => {
+  rtmChannelResponse
+    .sendMessage({ text: JSON.stringify(message) })
+    .then(() => {
+      console.log("message sent " + JSON.stringify(message));
+    })
+    .catch((e: any) => {
+      console.log("error", e);
+    });
+};
+
+const sendPeerMessageRtm = (message: any, toId: string) => {
+  rtmClient
+    .sendMessageToPeer({ text: JSON.stringify(message) }, toId)
+    .then(() => {
+      console.log("message sent " + JSON.stringify(message));
+    })
+    .catch((e: any) => {
+      console.log("error", e);
+    });
+};
+
+const rtmInit = async (appId: any, uid: any, channel: any) => {
+  rtmClient = AgoraRTM.createInstance(appId);
+  let options = {
+    uid: String(uid),
+  };
+  await rtmClient.login(options);
+
+  rtmClient.on("ConnectionStateChanged", function (state, reason) {
+    console.log("State changed To: " + state + " Reason: " + reason);
+  });
+
+  rtmChannelResponse = rtmClient.createChannel(channel);
+
+  await rtmChannelResponse.join().then(async () => {
+    console.log(
+      "You have successfully joined channel " + rtmChannelResponse.channelId
+    );
+  });
+
+  // Display channel member stats
+  rtmChannelResponse.on("MemberJoined", function (memberId) {
+    console.log(memberId + " joined the channel");
+  });
+  // Display channel member stats
+  rtmChannelResponse.on("MemberLeft", function (memberId) {
+    console.log(memberId + " left the channel");
+  });
+};
+
 export const meetingControllerChildren = {
   visible: booleanExposingStateControl("visible"),
   onEvent: eventHandlerControl(EventOptions),
@@ -199,6 +275,8 @@ export const meetingControllerChildren = {
   usersScreenShared: stateComp<JSONValue>([]),
   localUser: jsonObjectExposingStateControl(""),
   meetingName: stringExposingStateControl("meetingName"),
+  certifiCateKey: stringExposingStateControl(""),
+  messages: stateComp<JSONValue>([]),
 };
 let MTComp = (function () {
   return new ContainerCompBuilder(
@@ -222,6 +300,7 @@ let MTComp = (function () {
         [dispatch, isTopBom]
       );
       const [userIds, setUserIds] = useState<any>([]);
+      const [rtmMessages, setRtmMessages] = useState<any>([]);
 
       useEffect(() => {
         dispatch(
@@ -238,6 +317,32 @@ let MTComp = (function () {
         }
       }, [props.endCall.value]);
 
+      useEffect(() => {
+        if (rtmMessages) {
+          dispatch(
+            changeChildAction("messages", getData(rtmMessages).data, false)
+          );
+        }
+      }, [rtmMessages]);
+
+      useEffect(() => {
+        if (rtmChannelResponse) {
+          rtmClient.on("MessageFromPeer", function (message, peerId) {
+            console.log(
+              "Message from: " + peerId + " Message: " + message.text
+            );
+            setRtmMessages(message.text);
+          });
+          rtmChannelResponse.on("ChannelMessage", function (message, memberId) {
+            console.log("Message received from: " + memberId, message.text);
+            setRtmMessages(message.text);
+            dispatch(
+              changeChildAction("messages", getData(rtmMessages).data, false)
+            );
+          });
+        }
+      }, [rtmChannelResponse]);
+
       useEffect(() => {
         client.on("user-joined", (user: IAgoraRTCRemoteUser) => {
           let userData = {
@@ -331,6 +436,10 @@ let MTComp = (function () {
       <>
         <Section name={sectionNames.basic}>
           {children.appId.propertyView({ label: trans("meeting.appid") })}
+          {children.certifiCateKey.propertyView({
+            label: trans("meeting.certifiCateKey"),
+          })}
+
           {children.meetingName.propertyView({
             label: trans("meeting.meetingName"),
           })}
@@ -429,7 +538,6 @@ MTComp = withMethodExposing(MTComp, [
       } else {
         await turnOnCamera(value);
       }
-
       comp.children.videoControl.change(value);
     },
   },
@@ -450,10 +558,42 @@ MTComp = withMethodExposing(MTComp, [
         comp.children.meetingName.getView().value == ""
           ? "_meetingId"
           : comp.children.meetingName.getView().value,
-        comp.children
+        comp.children,
+        comp.children.certifiCateKey.getView().value
       );
     },
   },
+  {
+    method: {
+      name: "broadCast",
+      description: trans("meeting.broadCast"),
+      params: [],
+    },
+    execute: async (comp, values) => {
+      let otherData =
+        values != undefined && values[1] !== undefined ? values[1] : "";
+      let toUsers: any =
+        values != undefined && values[0] !== undefined ? values[0] : "";
+
+      let message: any = {
+        time: Date.now(),
+        from: userId,
+      };
+      message["data"] = otherData;
+
+      console.log(toUsers);
+
+      if (toUsers.length > 0 && toUsers[0] !== undefined) {
+        let peers = toUsers?.map((u: any) => u.user);
+        console.log("peers", peers);
+        peers.forEach((p: any) => {
+          sendPeerMessageRtm(message, String(p));
+        });
+      } else {
+        sendMessageRtm(message);
+      }
+    },
+  },
   {
     method: {
       name: "endMeeting",
@@ -484,8 +624,5 @@ export const VideoMeetingControllerComp = withExposingConfigs(MTComp, [
   new NameConfig("localUser", trans("meeting.host")),
   new NameConfig("participants", trans("meeting.participants")),
   new NameConfig("meetingName", trans("meeting.meetingName")),
+  new NameConfig("messages", trans("meeting.meetingName")),
 ]);
-
-export function agoraClient() {
-  return client;
-}

client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx

@@ -28,9 +28,7 @@ import { RefControl } from "comps/controls/refControl";
 import { useEffect, useRef, useState } from "react";
 
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
-import {
-  client,
-} from "./videoMeetingControllerComp";
+import { client } from "./videoMeetingControllerComp";
 
 import { IAgoraRTCRemoteUser } from "agora-rtc-sdk-ng";
 
@@ -60,7 +58,7 @@ const Container = styled.div<{ $style: any }>`
   display: flex;
   align-items: center;
   justify-content: center;
-`; 
+`;
 const VideoContainer = styled.video<{ $style: any }>`
   height: 100%;
   width: 100%;
@@ -154,6 +152,7 @@ const typeOptions = [
 
 export const meetingStreamChildren = {
   autoHeight: withDefault(AutoHeightControl, "fixed"),
+  shareScreen: withDefault(BoolCodeControl, false),
   type: dropdownControl(typeOptions, ""),
   onEvent: MeetingEventHandlerControl,
   disabled: BoolCodeControl,
@@ -246,8 +245,6 @@ let VideoCompBuilder = (function (props) {
       }
     }, [props.userId.value]);
 
-    
-
     return (
       <EditorContext.Consumer>
         {(editorState) => (
@@ -257,7 +254,7 @@ let VideoCompBuilder = (function (props) {
                 onClick={() => props.onEvent("videoClicked")}
                 ref={videoRef}
                 $style={props.style}
-                id={userId}
+                id={props.shareScreen ? "share-screen" : userId}
               ></VideoContainer>
             </Container>
           </ReactResizeDetector>
@@ -270,6 +267,9 @@ let VideoCompBuilder = (function (props) {
         <Section name={sectionNames.basic}>
           {children.userId.propertyView({ label: trans("meeting.videoId") })}
           {children.autoHeight.getPropertyView()}
+          {children.shareScreen.propertyView({
+            label: trans("meeting.shareScreen"),
+          })}
         </Section>
         <Section name={sectionNames.interaction}>
           {children.onEvent.getPropertyView()}

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -1448,6 +1448,7 @@ export const en = {
     top: "Top",
     host: "Host",
     participants: "Participants",
+    shareScreen: "Share Screen",
     appid: "Application Id",
     meetingName: "Meeting Name",
     right: "Right",
@@ -1462,6 +1463,8 @@ export const en = {
     width: "Drawer width",
     height: "Drawer height",
     actionBtnDesc: "Action Button",
+    broadCast: "BroadCast Messages",
+    certifiCateKey: "certifiCate Key",
     title: "Meeting title",
     meetingCompName: "Meeting Controller",
     videoCompName: "Video Stream",

client/yarn.lock

@@ -4767,6 +4767,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"agora-rtm-sdk@npm:^1.5.1":
+  version: 1.5.1
+  resolution: "agora-rtm-sdk@npm:1.5.1"
+  checksum: b7518664df7c63a8910d400c48660301da2536bccb2f2d55dc8daa074a8441ceb62c7987e97fd447fd76da5fb5285d44fff03f4c2e78bca78890fa3d62981947
+  languageName: node
+  linkType: hard
+
 "ahooks-v3-count@npm:^1.0.0":
   version: 1.0.0
   resolution: "ahooks-v3-count@npm:1.0.0"
@@ -11858,6 +11865,7 @@ __metadata:
     "@vitejs/plugin-react": ^2.2.0
     agora-access-token: ^2.0.4
     agora-rtc-sdk-ng: ^4.19.0
+    agora-rtm-sdk: ^1.5.1
     ali-oss: ^6.17.1
     antd: 5.7.2
     antd-img-crop: ^4.12.2