Skip to content

Commit ad20fbc

Browse files
freddysundownerfreddysundowner
committed
adding broadcast using agora rtm
1 parent 7420095 commit ad20fbc

File tree

10 files changed

+2172
-19
lines changed

10 files changed

+2172
-19
lines changed

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

Lines changed: 107 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ import AgoraRTC, {
5252

5353
import { JSONValue } from "@lowcoder-ee/index.sdk";
5454
import { getData } from "../listViewComp/listViewUtils";
55+
import AgoraRTM, { RtmChannel, RtmClient, RtmMessage } from "agora-rtm-sdk";
5556

5657
const EventOptions = [closeEvent] as const;
5758

@@ -105,6 +106,8 @@ let audioTrack: IMicrophoneAudioTrack;
105106
let videoTrack: ICameraVideoTrack;
106107
let screenShareStream: ILocalVideoTrack;
107108
let userId: UID | null | undefined;
109+
let rtmChannelResponse: RtmChannel;
110+
let rtmClient: RtmClient;
108111

109112
const turnOnCamera = async (flag?: boolean) => {
110113
if (videoTrack) {
@@ -119,8 +122,6 @@ const turnOnMicrophone = async (flag?: boolean) => {
119122
return audioTrack.setEnabled(flag!);
120123
}
121124
audioTrack = await AgoraRTC.createMicrophoneAudioTrack();
122-
// audioTrack.play();
123-
124125
if (!flag) {
125126
await client.unpublish(audioTrack);
126127
} else {
@@ -141,7 +142,7 @@ const shareScreen = async (sharing: boolean) => {
141142
"disable"
142143
);
143144
await client.unpublish(videoTrack);
144-
screenShareStream.play(userId + "");
145+
screenShareStream.play("share-screen");
145146
await client.publish(screenShareStream);
146147
}
147148
} catch (error) {
@@ -158,6 +159,7 @@ const leaveChannel = async () => {
158159
await turnOnMicrophone(false);
159160
}
160161
await client.leave();
162+
await rtmChannelResponse.leave();
161163
};
162164

163165
const hostChanged = (users: any) => {};
@@ -167,6 +169,8 @@ const publishVideo = async (appId: any, channel: any, height: any) => {
167169
await client.join(appId, channel, null, userId);
168170
await client.publish(videoTrack);
169171

172+
await rtmInit(appId, userId, channel);
173+
170174
const mediaStreamTrack = videoTrack.getMediaStreamTrack();
171175
if (mediaStreamTrack) {
172176
const videoSettings = mediaStreamTrack.getSettings();
@@ -177,6 +181,57 @@ const publishVideo = async (appId: any, channel: any, height: any) => {
177181
}
178182
};
179183

184+
const sendMessageRtm = (message: any) => {
185+
rtmChannelResponse
186+
.sendMessage({ text: JSON.stringify(message) })
187+
.then(() => {
188+
console.log("message sent " + JSON.stringify(message));
189+
})
190+
.catch((e: any) => {
191+
console.log("error", e);
192+
});
193+
};
194+
195+
const sendPeerMessageRtm = (message: any, toId: string) => {
196+
rtmClient
197+
.sendMessageToPeer({ text: JSON.stringify(message) }, toId)
198+
.then(() => {
199+
console.log("message sent " + JSON.stringify(message));
200+
})
201+
.catch((e: any) => {
202+
console.log("error", e);
203+
});
204+
};
205+
206+
const rtmInit = async (appId: any, uid: any, channel: any) => {
207+
rtmClient = AgoraRTM.createInstance(appId);
208+
let options = {
209+
uid: String(uid),
210+
};
211+
await rtmClient.login(options);
212+
213+
rtmClient.on("ConnectionStateChanged", function (state, reason) {
214+
console.log("State changed To: " + state + " Reason: " + reason);
215+
});
216+
217+
rtmChannelResponse = rtmClient.createChannel(channel);
218+
219+
await rtmChannelResponse.join().then(async () => {
220+
console.log(
221+
"You have successfully joined channel " + rtmChannelResponse.channelId
222+
);
223+
});
224+
225+
// Display channel member stats
226+
rtmChannelResponse.on("MemberJoined", function (memberId) {
227+
console.log(memberId + " joined the channel");
228+
});
229+
// Display channel member stats
230+
rtmChannelResponse.on("MemberLeft", function (memberId) {
231+
console.log(memberId + " left the channel");
232+
});
233+
};
234+
180235
export const meetingControllerChildren = {
181236
visible: booleanExposingStateControl("visible"),
182237
onEvent: eventHandlerControl(EventOptions),
@@ -199,6 +254,7 @@ export const meetingControllerChildren = {
199254
usersScreenShared: stateComp<JSONValue>([]),
200255
localUser: jsonObjectExposingStateControl(""),
201256
meetingName: stringExposingStateControl("meetingName"),
257+
messages: stateComp<JSONValue>([]),
202258
};
203259
let MTComp = (function () {
204260
return new ContainerCompBuilder(
@@ -222,6 +278,7 @@ let MTComp = (function () {
222278
[dispatch, isTopBom]
223279
);
224280
const [userIds, setUserIds] = useState<any>([]);
281+
const [rtmMessages, setRtmMessages] = useState<any>([]);
225282

226283
useEffect(() => {
227284
dispatch(
@@ -238,6 +295,28 @@ let MTComp = (function () {
238295
}
239296
}, [props.endCall.value]);
240297

298+
useEffect(() => {
299+
if (rtmChannelResponse) {
300+
rtmClient.on("MessageFromPeer", function (message, peerId) {
301+
console.log("Message from: " + peerId + " Message: " + message.text);
302+
setRtmMessages((messages: any) => [...messages, message.text]);
303+
console.log("messages " + rtmMessages);
304+
dispatch(
305+
changeChildAction("messages", getData(rtmMessages).data, false)
306+
);
307+
});
308+
rtmChannelResponse.on("ChannelMessage", function (message, memberId) {
309+
console.log("Message received from: " + memberId, message.text);
310+
setRtmMessages((messages: any) => [...messages, message.text]);
311+
dispatch(
312+
changeChildAction("messages", getData(rtmMessages).data, false)
313+
);
314+
});
315+
}
316+
}, [rtmChannelResponse]);
317+
318+
console.log("rtmMessages ", props.messages);
319+
241320
useEffect(() => {
242321
client.on("user-joined", (user: IAgoraRTCRemoteUser) => {
243322
let userData = {
@@ -429,7 +508,6 @@ MTComp = withMethodExposing(MTComp, [
429508
} else {
430509
await turnOnCamera(value);
431510
}
432-
433511
comp.children.videoControl.change(value);
434512
},
435513
},
@@ -454,6 +532,30 @@ MTComp = withMethodExposing(MTComp, [
454532
);
455533
},
456534
},
535+
{
536+
method: {
537+
name: "broadCast",
538+
description: trans("meeting.broadCast"),
539+
params: [],
540+
},
541+
execute: async (comp, values) => {
542+
let message = {
543+
time: new Date().getMilliseconds(),
544+
from: comp.children.localUser.getView(),
545+
};
546+
console.log(values);
547+
548+
if (values != undefined && values[0] !== undefined) {
549+
let peers = values?.map((u: any) => u.user);
550+
peers.forEach((p) => {
551+
sendPeerMessageRtm(message, String(p));
552+
});
553+
} else {
554+
sendMessageRtm(message);
555+
}
556+
comp.children.messages.getView();
557+
},
558+
},
457559
{
458560
method: {
459561
name: "endMeeting",
@@ -484,8 +586,5 @@ export const VideoMeetingControllerComp = withExposingConfigs(MTComp, [
484586
new NameConfig("localUser", trans("meeting.host")),
485587
new NameConfig("participants", trans("meeting.participants")),
486588
new NameConfig("meetingName", trans("meeting.meetingName")),
589+
new NameConfig("messages", trans("meeting.meetingName")),
487590
]);
488-
489-
export function agoraClient() {
490-
return client;
491-
}

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,7 @@ import { RefControl } from "comps/controls/refControl";
2828
import { useEffect, useRef, useState } from "react";
2929

3030
import { AutoHeightControl } from "comps/controls/autoHeightControl";
31-
import {
32-
client,
33-
} from "./videoMeetingControllerComp";
31+
import { client } from "./videoMeetingControllerComp";
3432

3533
import { IAgoraRTCRemoteUser } from "agora-rtc-sdk-ng";
3634

@@ -60,7 +58,7 @@ const Container = styled.div<{ $style: any }>`
6058
display: flex;
6159
align-items: center;
6260
justify-content: center;
63-
`;
61+
`;
6462
const VideoContainer = styled.video<{ $style: any }>`
6563
height: 100%;
6664
width: 100%;
@@ -154,6 +152,7 @@ const typeOptions = [
154152

155153
export const meetingStreamChildren = {
156154
autoHeight: withDefault(AutoHeightControl, "fixed"),
155+
shareScreen: withDefault(BoolCodeControl, false),
157156
type: dropdownControl(typeOptions, ""),
158157
onEvent: MeetingEventHandlerControl,
159158
disabled: BoolCodeControl,
@@ -246,8 +245,6 @@ let VideoCompBuilder = (function (props) {
246245
}
247246
}, [props.userId.value]);
248247

249-
250-
251248
return (
252249
<EditorContext.Consumer>
253250
{(editorState) => (
@@ -257,7 +254,7 @@ let VideoCompBuilder = (function (props) {
257254
onClick={() => props.onEvent("videoClicked")}
258255
ref={videoRef}
259256
$style={props.style}
260-
id={userId}
257+
id={props.shareScreen ? "share-screen" : userId}
261258
></VideoContainer>
262259
</Container>
263260
</ReactResizeDetector>
@@ -270,6 +267,9 @@ let VideoCompBuilder = (function (props) {
270267
<Section name={sectionNames.basic}>
271268
{children.userId.propertyView({ label: trans("meeting.videoId") })}
272269
{children.autoHeight.getPropertyView()}
270+
{children.shareScreen.propertyView({
271+
label: trans("meeting.shareScreen"),
272+
})}
273273
</Section>
274274
<Section name={sectionNames.interaction}>
275275
{children.onEvent.getPropertyView()}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1448,6 +1448,7 @@ export const en = {
14481448
top: "Top",
14491449
host: "Host",
14501450
participants: "Participants",
1451+
shareScreen: "Share Screen",
14511452
appid: "Application Id",
14521453
meetingName: "Meeting Name",
14531454
right: "Right",
@@ -1462,6 +1463,7 @@ export const en = {
14621463
width: "Drawer width",
14631464
height: "Drawer height",
14641465
actionBtnDesc: "Action Button",
1466+
broadCast: "BroadCast Messages",
14651467
title: "Meeting title",
14661468
meetingCompName: "Meeting Controller",
14671469
videoCompName: "Video Stream",

‎node_modules/.package-lock.json

Lines changed: 25 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)