Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 445f960

Browse files
Merge branch 'agora-integrationn' into main
2 parents 32d9889 + 9cfbfb0 commit 445f960

File tree

2 files changed

+133
-119
lines changed

2 files changed

+133
-119
lines changed

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

Lines changed: 99 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -196,15 +196,6 @@ const publishVideo = async (
196196
await client.publish(videoTrack);
197197

198198
await rtmInit(appId, userId, channel);
199-
200-
const mediaStreamTrack = videoTrack.getMediaStreamTrack();
201-
if (mediaStreamTrack) {
202-
const videoSettings = mediaStreamTrack.getSettings();
203-
const videoWidth = videoSettings.width;
204-
const videoHeight = videoSettings.height;
205-
// height.videoWidth.change(videoWidth);
206-
// height.videoHeight.change(videoHeight);
207-
}
208199
};
209200

210201
const sendMessageRtm = (message: any) => {
@@ -278,12 +269,69 @@ let MTComp = (function () {
278269
});
279270
const [rtmMessages, setRtmMessages] = useState<any>([]);
280271
const [localUserSpeaking, setLocalUserSpeaking] = useState<any>(false);
272+
const [localUserVideo, setLocalUserVideo] =
273+
useState<IAgoraRTCRemoteUser>();
274+
const [userJoined, setUserJoined] = useState<IAgoraRTCRemoteUser>();
275+
const [userLeft, setUserLeft] = useState<IAgoraRTCRemoteUser>();
281276

282277
useEffect(() => {
283-
dispatch(
284-
changeChildAction("participants", getData(userIds).data, false)
285-
);
286-
}, [userIds]);
278+
if (userJoined) {
279+
let userData = {
280+
user: userJoined.uid,
281+
host: false,
282+
audiostatus: userJoined.hasAudio,
283+
streamingVideo: true,
284+
};
285+
setUserIds((userIds: any) => [...userIds, userData]);
286+
if (userIds.length == 0) {
287+
userData.host = true;
288+
} else {
289+
userData.host = false;
290+
}
291+
dispatch(
292+
changeChildAction(
293+
"participants",
294+
removeDuplicates(getData([...userIds, userData]).data, "user"),
295+
false
296+
)
297+
);
298+
}
299+
}, [userJoined]);
300+
function removeDuplicates(arr: any, prop: any) {
301+
const uniqueObjects = [];
302+
const seenValues = new Set();
303+
304+
for (const obj of arr) {
305+
const objValue = obj[prop];
306+
307+
if (!seenValues.has(objValue)) {
308+
seenValues.add(objValue);
309+
uniqueObjects.push(obj);
310+
}
311+
}
312+
313+
return uniqueObjects;
314+
}
315+
useEffect(() => {
316+
if (userLeft) {
317+
let newUsers = userIds.filter(
318+
(item: any) => item.user !== userLeft.uid
319+
);
320+
let hostExists = newUsers.filter((f: any) => f.host === true);
321+
if (hostExists.length == 0 && newUsers.length > 0) {
322+
newUsers[0].host = true;
323+
hostChanged(newUsers);
324+
}
325+
setUserIds(newUsers);
326+
dispatch(
327+
changeChildAction(
328+
"participants",
329+
removeDuplicates(getData(newUsers).data, "user"),
330+
false
331+
)
332+
);
333+
}
334+
}, [userLeft]);
287335

288336
useEffect(() => {
289337
if (updateVolume.userid) {
@@ -305,13 +353,17 @@ let MTComp = (function () {
305353
}, [updateVolume]);
306354

307355
useEffect(() => {
308-
if (props.endCall.value) {
309-
let newUsers = userIds.filter((item: any) => item.user !== userId);
310-
dispatch(
311-
changeChildAction("participants", getData(newUsers).data, false)
312-
);
313-
}
314-
}, [props.endCall.value]);
356+
let prevUsers: [] = props.participants as [];
357+
const updatedItems = prevUsers.map((userInfo: any) => {
358+
if (userInfo.user === localUserVideo?.uid) {
359+
return { ...userInfo, streamingVideo: localUserVideo?.hasVideo };
360+
}
361+
return userInfo;
362+
});
363+
dispatch(
364+
changeChildAction("participants", getData(updatedItems).data, false)
365+
);
366+
}, [localUserVideo?.hasVideo]);
315367

316368
useEffect(() => {
317369
if (rtmMessages) {
@@ -322,7 +374,7 @@ let MTComp = (function () {
322374
}, [rtmMessages]);
323375

324376
useEffect(() => {
325-
if (localUserSpeaking === true) {
377+
if (localUserSpeaking === true||localUserVideo) {
326378
let localObject = {
327379
user: userId + "",
328380
audiostatus: props.audioControl.value,
@@ -333,18 +385,6 @@ let MTComp = (function () {
333385
}
334386
}, [localUserSpeaking]);
335387

336-
useEffect(() => {
337-
if (props.localUser.value) {
338-
let newUsers = userIds.filter((item: any) => item.user !== userId);
339-
if (newUsers.length == 0) return;
340-
newUsers = props.localUser.value;
341-
let updatedUsers = [...userIds, newUsers];
342-
dispatch(
343-
changeChildAction("participants", getData(updatedUsers).data, false)
344-
);
345-
}
346-
}, [props.localUser.value]);
347-
348388
useEffect(() => {
349389
if (rtmChannelResponse) {
350390
rtmClient.on("MessageFromPeer", function (message, peerId) {
@@ -363,29 +403,10 @@ let MTComp = (function () {
363403
if (client) {
364404
client.enableAudioVolumeIndicator();
365405
client.on("user-joined", (user: IAgoraRTCRemoteUser) => {
366-
let userData = {
367-
user: user.uid,
368-
host: false,
369-
audiostatus: user.hasVideo,
370-
};
371-
372-
if (userIds.length == 0) {
373-
userData.host = true;
374-
} else {
375-
userData.host = false;
376-
}
377-
setUserIds((userIds: any) => [...userIds, userData]);
406+
setUserJoined(user);
378407
});
379408
client.on("user-left", (user: IAgoraRTCRemoteUser, reason: any) => {
380-
let newUsers = userIds.filter(
381-
(item: any) => item.user !== user.uid
382-
);
383-
let hostExists = newUsers.filter((f: any) => f.host === true);
384-
if (hostExists.length == 0 && newUsers.length > 0) {
385-
newUsers[0].host = true;
386-
hostChanged(newUsers);
387-
}
388-
setUserIds(newUsers);
409+
setUserLeft(user);
389410
});
390411
client.on("volume-indicator", (volumeInfos: any) => {
391412
if (volumeInfos.length == 0) return;
@@ -401,6 +422,21 @@ let MTComp = (function () {
401422
}
402423
});
403424
});
425+
426+
client.on(
427+
"user-published",
428+
async (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => {
429+
setLocalUserVideo(user);
430+
}
431+
);
432+
client.on(
433+
"user-unpublished",
434+
(user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => {
435+
console.log("user-unpublished");
436+
437+
setLocalUserVideo(user);
438+
}
439+
);
404440
}
405441
}, [client]);
406442

@@ -540,6 +576,7 @@ MTComp = withMethodExposing(MTComp, [
540576
params: [],
541577
},
542578
execute: async (comp, values) => {
579+
if (!comp.children.meetingActive.getView().value) return;
543580
let sharing = !comp.children.sharing.getView().value;
544581
await shareScreen(sharing);
545582
comp.children.sharing.change(sharing);
@@ -552,6 +589,7 @@ MTComp = withMethodExposing(MTComp, [
552589
params: [],
553590
},
554591
execute: async (comp, values) => {
592+
if (!comp.children.meetingActive.getView().value) return;
555593
let value = !comp.children.audioControl.getView().value;
556594
comp.children.localUser.change({
557595
user: userId + "",
@@ -570,12 +608,16 @@ MTComp = withMethodExposing(MTComp, [
570608
params: [],
571609
},
572610
execute: async (comp, values) => {
611+
//check if meeting is active
612+
if (!comp.children.meetingActive.getView().value) return;
613+
//toggle videoControl
573614
let value = !comp.children.videoControl.getView().value;
574615
if (videoTrack) {
575616
videoTrack.setEnabled(value);
576617
} else {
577618
await turnOnCamera(value);
578619
}
620+
//change my local user data
579621
let localData = {
580622
user: userId + "",
581623
streamingVideo: value,
@@ -633,6 +675,7 @@ MTComp = withMethodExposing(MTComp, [
633675
params: [],
634676
},
635677
execute: async (comp, values) => {
678+
if (!comp.children.meetingActive.getView().value) return;
636679
let otherData =
637680
values != undefined && values[1] !== undefined ? values[1] : "";
638681
let toUsers: any =
@@ -684,6 +727,8 @@ MTComp = withMethodExposing(MTComp, [
684727
params: [],
685728
},
686729
execute: async (comp, values) => {
730+
if (!comp.children.meetingActive.getView().value) return;
731+
687732
let value = !comp.children.endCall.getView().value;
688733
comp.children.endCall.change(value);
689734
comp.children.meetingActive.change(false);

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

Lines changed: 34 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -169,19 +169,6 @@ let VideoCompBuilder = (function (props) {
169169
useEffect(() => {
170170
if (props.userId.value !== "") {
171171
let userData = JSON.parse(props.userId?.value);
172-
if (
173-
userData.user === userId &&
174-
userData.streamingVideo === false &&
175-
videoRef.current &&
176-
videoRef.current?.id === userId + ""
177-
) {
178-
if (videoRef.current && videoRef.current?.id === userId + "") {
179-
videoRef.current.srcObject = null;
180-
setVideo(false);
181-
}
182-
} else {
183-
setVideo(true);
184-
}
185172
client.on(
186173
"user-published",
187174
async (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => {
@@ -219,6 +206,8 @@ let VideoCompBuilder = (function (props) {
219206
client.on(
220207
"user-unpublished",
221208
(user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => {
209+
console.log("user-unpublished");
210+
222211
if (mediaType === "audio") {
223212
if (
224213
!user.hasAudio &&
@@ -246,7 +235,7 @@ let VideoCompBuilder = (function (props) {
246235

247236
setUserId(userData.user);
248237
setUsername(userData.userName);
249-
// console.log(userData);
238+
setVideo(userData.streamingVideo);
250239
}
251240
}, [props.userId.value]);
252241

@@ -269,60 +258,40 @@ let VideoCompBuilder = (function (props) {
269258
}}
270259
>
271260
{userId ? (
272-
showVideo ? (
273-
<VideoContainer
274-
onClick={() => props.onEvent("videoClicked")}
275-
ref={videoRef}
276-
style={{
277-
display: `${showVideo ? "flex" : "none"}`,
278-
aspectRatio: props.videoAspectRatio,
279-
borderRadius: props.style.radius,
280-
width: "auto",
281-
}}
282-
id={props.shareScreen ? "share-screen" : userId}
283-
></VideoContainer>
284-
) : (
285-
<div
286-
style={{
287-
flexDirection: "column",
288-
display: "flex",
289-
alignItems: "center",
290-
margin: "0 auto",
291-
padding: props.profilePadding,
292-
}}
293-
>
294-
<img alt=""
295-
style={{
296-
borderRadius: props.profileBorderRadius,
297-
width: "100%",
298-
overflow: "hidden",
299-
}}
300-
src={props.profileImageUrl.value}
301-
/>
302-
<p style={{ margin: "0" }}>{userName ?? ""}</p>
303-
</div>
304-
)
305-
) : (
306-
<div
261+
<VideoContainer
262+
onClick={() => props.onEvent("videoClicked")}
263+
ref={videoRef}
307264
style={{
308-
flexDirection: "column",
309-
display: "flex",
310-
alignItems: "center",
311-
margin: "0 auto",
312-
padding: props.profilePadding,
265+
display: `${showVideo ? "flex" : "none"}`,
266+
aspectRatio: props.videoAspectRatio,
267+
borderRadius: props.style.radius,
268+
width: "auto",
313269
}}
314-
>
315-
<img alt=""
316-
style={{
317-
borderRadius: props.profileBorderRadius,
318-
width: "100%",
319-
overflow: "hidden",
320-
}}
321-
src={props.profileImageUrl.value}
322-
/>
323-
<p style={{ margin: "0" }}>{userName ?? ""}</p>
324-
</div>
270+
id={props.shareScreen ? "share-screen" : userId}
271+
></VideoContainer>
272+
) : (
273+
<></>
325274
)}
275+
<div
276+
style={{
277+
flexDirection: "column",
278+
alignItems: "center",
279+
display: `${!showVideo || userId ? "flex" : "none"}`,
280+
margin: "0 auto",
281+
padding: props.profilePadding,
282+
}}
283+
>
284+
<img
285+
alt=""
286+
style={{
287+
borderRadius: props.profileBorderRadius,
288+
width: "100%",
289+
overflow: "hidden",
290+
}}
291+
src={props.profileImageUrl.value}
292+
/>
293+
<p style={{ margin: "0" }}>{userName ?? ""}</p>
294+
</div>
326295
</div>
327296
</ReactResizeDetector>
328297
)}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /