adding broadcast using agora rtm

Author: freddysundowner

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

@@ -52,6 +52,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 +106,8 @@ let audioTrack: IMicrophoneAudioTrack;
 let videoTrack: ICameraVideoTrack;
 let screenShareStream: ILocalVideoTrack;
 let userId: UID | null | undefined;
+let rtmChannelResponse: RtmChannel;
+let rtmClient: RtmClient;
 
 const turnOnCamera = async (flag?: boolean) => {
   if (videoTrack) {
@@ -119,8 +122,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 +142,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,6 +159,7 @@ const leaveChannel = async () => {
     await turnOnMicrophone(false);
   }
   await client.leave();
+  await rtmChannelResponse.leave();
 };
 
 const hostChanged = (users: any) => {};
@@ -167,6 +169,8 @@ const publishVideo = async (appId: any, channel: any, height: any) => {
   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 +181,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 +254,7 @@ export const meetingControllerChildren = {
   usersScreenShared: stateComp<JSONValue>([]),
   localUser: jsonObjectExposingStateControl(""),
   meetingName: stringExposingStateControl("meetingName"),
+  messages: stateComp<JSONValue>([]),
 };
 let MTComp = (function () {
   return new ContainerCompBuilder(
@@ -222,6 +278,7 @@ let MTComp = (function () {
         [dispatch, isTopBom]
       );
       const [userIds, setUserIds] = useState<any>([]);
+      const [rtmMessages, setRtmMessages] = useState<any>([]);
 
       useEffect(() => {
         dispatch(
@@ -238,6 +295,28 @@ let MTComp = (function () {
         }
       }, [props.endCall.value]);
 
+      useEffect(() => {
+        if (rtmChannelResponse) {
+          rtmClient.on("MessageFromPeer", function (message, peerId) {
+            console.log("Message from: " + peerId + " Message: " + message.text);
+            setRtmMessages((messages: any) => [...messages, message.text]);
+            console.log("messages " + rtmMessages);
+            dispatch(
+              changeChildAction("messages", getData(rtmMessages).data, false)
+            );
+          });
+          rtmChannelResponse.on("ChannelMessage", function (message, memberId) {
+            console.log("Message received from: " + memberId, message.text);
+            setRtmMessages((messages: any) => [...messages, message.text]);
+            dispatch(
+              changeChildAction("messages", getData(rtmMessages).data, false)
+            );
+          });
+        }
+      }, [rtmChannelResponse]);
+
+      console.log("rtmMessages ", props.messages);
+
       useEffect(() => {
         client.on("user-joined", (user: IAgoraRTCRemoteUser) => {
           let userData = {
@@ -429,7 +508,6 @@ MTComp = withMethodExposing(MTComp, [
       } else {
         await turnOnCamera(value);
       }
-
       comp.children.videoControl.change(value);
     },
   },
@@ -454,6 +532,30 @@ MTComp = withMethodExposing(MTComp, [
       );
     },
   },
+  {
+    method: {
+      name: "broadCast",
+      description: trans("meeting.broadCast"),
+      params: [],
+    },
+    execute: async (comp, values) => {
+      let message = {
+        time: new Date().getMilliseconds(),
+        from: comp.children.localUser.getView(),
+      };
+      console.log(values);
+
+      if (values != undefined && values[0] !== undefined) {
+        let peers = values?.map((u: any) => u.user);
+        peers.forEach((p) => {
+          sendPeerMessageRtm(message, String(p));
+        });
+      } else {
+        sendMessageRtm(message);
+      }
+      comp.children.messages.getView();
+    },
+  },
   {
     method: {
       name: "endMeeting",
@@ -484,8 +586,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,7 @@ export const en = {
     width: "Drawer width",
     height: "Drawer height",
     actionBtnDesc: "Action Button",
+    broadCast: "BroadCast Messages",
     title: "Meeting title",
     meetingCompName: "Meeting Controller",
     videoCompName: "Video Stream",