Skip to content

Commit

Permalink
Merge branch 'agora-integrationn' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
@FalkWolsky
FalkWolsky authored Nov 10, 2023
2 parents 32d9889 + 9cfbfb0 commit 445f960
Show file tree
Hide file tree
Showing 2 changed files with 133 additions and 119 deletions.
153 changes: 99 additions & 54 deletions client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,15 +196,6 @@ const publishVideo = async (
await client.publish(videoTrack);

await rtmInit(appId, userId, channel);

const mediaStreamTrack = videoTrack.getMediaStreamTrack();
if (mediaStreamTrack) {
const videoSettings = mediaStreamTrack.getSettings();
const videoWidth = videoSettings.width;
const videoHeight = videoSettings.height;
// height.videoWidth.change(videoWidth);
// height.videoHeight.change(videoHeight);
}
};

const sendMessageRtm = (message: any) => {
Expand Down Expand Up @@ -278,12 +269,69 @@ let MTComp = (function () {
});
const [rtmMessages, setRtmMessages] = useState<any>([]);
const [localUserSpeaking, setLocalUserSpeaking] = useState<any>(false);
const [localUserVideo, setLocalUserVideo] =
useState<IAgoraRTCRemoteUser>();
const [userJoined, setUserJoined] = useState<IAgoraRTCRemoteUser>();
const [userLeft, setUserLeft] = useState<IAgoraRTCRemoteUser>();

useEffect(() => {
dispatch(
changeChildAction("participants", getData(userIds).data, false)
);
}, [userIds]);
if (userJoined) {
let userData = {
user: userJoined.uid,
host: false,
audiostatus: userJoined.hasAudio,
streamingVideo: true,
};
setUserIds((userIds: any) => [...userIds, userData]);
if (userIds.length == 0) {
userData.host = true;
} else {
userData.host = false;
}
dispatch(
changeChildAction(
"participants",
removeDuplicates(getData([...userIds, userData]).data, "user"),
false
)
);
}
}, [userJoined]);
function removeDuplicates(arr: any, prop: any) {
const uniqueObjects = [];
const seenValues = new Set();

for (const obj of arr) {
const objValue = obj[prop];

if (!seenValues.has(objValue)) {
seenValues.add(objValue);
uniqueObjects.push(obj);
}
}

return uniqueObjects;
}
useEffect(() => {
if (userLeft) {
let newUsers = userIds.filter(
(item: any) => item.user !== userLeft.uid
);
let hostExists = newUsers.filter((f: any) => f.host === true);
if (hostExists.length == 0 && newUsers.length > 0) {
newUsers[0].host = true;
hostChanged(newUsers);
}
setUserIds(newUsers);
dispatch(
changeChildAction(
"participants",
removeDuplicates(getData(newUsers).data, "user"),
false
)
);
}
}, [userLeft]);

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

useEffect(() => {
if (props.endCall.value) {
let newUsers = userIds.filter((item: any) => item.user !== userId);
dispatch(
changeChildAction("participants", getData(newUsers).data, false)
);
}
}, [props.endCall.value]);
let prevUsers: [] = props.participants as [];
const updatedItems = prevUsers.map((userInfo: any) => {
if (userInfo.user === localUserVideo?.uid) {
return { ...userInfo, streamingVideo: localUserVideo?.hasVideo };
}
return userInfo;
});
dispatch(
changeChildAction("participants", getData(updatedItems).data, false)
);
}, [localUserVideo?.hasVideo]);

useEffect(() => {
if (rtmMessages) {
Expand All @@ -322,7 +374,7 @@ let MTComp = (function () {
}, [rtmMessages]);

useEffect(() => {
if (localUserSpeaking === true) {
if (localUserSpeaking === true || localUserVideo) {
let localObject = {
user: userId + "",
audiostatus: props.audioControl.value,
Expand All @@ -333,18 +385,6 @@ let MTComp = (function () {
}
}, [localUserSpeaking]);

useEffect(() => {
if (props.localUser.value) {
let newUsers = userIds.filter((item: any) => item.user !== userId);
if (newUsers.length == 0) return;
newUsers = props.localUser.value;
let updatedUsers = [...userIds, newUsers];
dispatch(
changeChildAction("participants", getData(updatedUsers).data, false)
);
}
}, [props.localUser.value]);

useEffect(() => {
if (rtmChannelResponse) {
rtmClient.on("MessageFromPeer", function (message, peerId) {
Expand All @@ -363,29 +403,10 @@ let MTComp = (function () {
if (client) {
client.enableAudioVolumeIndicator();
client.on("user-joined", (user: IAgoraRTCRemoteUser) => {
let userData = {
user: user.uid,
host: false,
audiostatus: user.hasVideo,
};

if (userIds.length == 0) {
userData.host = true;
} else {
userData.host = false;
}
setUserIds((userIds: any) => [...userIds, userData]);
setUserJoined(user);
});
client.on("user-left", (user: IAgoraRTCRemoteUser, reason: any) => {
let newUsers = userIds.filter(
(item: any) => item.user !== user.uid
);
let hostExists = newUsers.filter((f: any) => f.host === true);
if (hostExists.length == 0 && newUsers.length > 0) {
newUsers[0].host = true;
hostChanged(newUsers);
}
setUserIds(newUsers);
setUserLeft(user);
});
client.on("volume-indicator", (volumeInfos: any) => {
if (volumeInfos.length == 0) return;
Expand All @@ -401,6 +422,21 @@ let MTComp = (function () {
}
});
});

client.on(
"user-published",
async (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => {
setLocalUserVideo(user);
}
);
client.on(
"user-unpublished",
(user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => {
console.log("user-unpublished");

setLocalUserVideo(user);
}
);
}
}, [client]);

Expand Down Expand Up @@ -540,6 +576,7 @@ MTComp = withMethodExposing(MTComp, [
params: [],
},
execute: async (comp, values) => {
if (!comp.children.meetingActive.getView().value) return;
let sharing = !comp.children.sharing.getView().value;
await shareScreen(sharing);
comp.children.sharing.change(sharing);
Expand All @@ -552,6 +589,7 @@ MTComp = withMethodExposing(MTComp, [
params: [],
},
execute: async (comp, values) => {
if (!comp.children.meetingActive.getView().value) return;
let value = !comp.children.audioControl.getView().value;
comp.children.localUser.change({
user: userId + "",
Expand All @@ -570,12 +608,16 @@ MTComp = withMethodExposing(MTComp, [
params: [],
},
execute: async (comp, values) => {
//check if meeting is active
if (!comp.children.meetingActive.getView().value) return;
//toggle videoControl
let value = !comp.children.videoControl.getView().value;
if (videoTrack) {
videoTrack.setEnabled(value);
} else {
await turnOnCamera(value);
}
//change my local user data
let localData = {
user: userId + "",
streamingVideo: value,
Expand Down Expand Up @@ -633,6 +675,7 @@ MTComp = withMethodExposing(MTComp, [
params: [],
},
execute: async (comp, values) => {
if (!comp.children.meetingActive.getView().value) return;
let otherData =
values != undefined && values[1] !== undefined ? values[1] : "";
let toUsers: any =
Expand Down Expand Up @@ -684,6 +727,8 @@ MTComp = withMethodExposing(MTComp, [
params: [],
},
execute: async (comp, values) => {
if (!comp.children.meetingActive.getView().value) return;

let value = !comp.children.endCall.getView().value;
comp.children.endCall.change(value);
comp.children.meetingActive.change(false);
Expand Down
99 changes: 34 additions & 65 deletions client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,19 +169,6 @@ let VideoCompBuilder = (function (props) {
useEffect(() => {
if (props.userId.value !== "") {
let userData = JSON.parse(props.userId?.value);
if (
userData.user === userId &&
userData.streamingVideo === false &&
videoRef.current &&
videoRef.current?.id === userId + ""
) {
if (videoRef.current && videoRef.current?.id === userId + "") {
videoRef.current.srcObject = null;
setVideo(false);
}
} else {
setVideo(true);
}
client.on(
"user-published",
async (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => {
Expand Down Expand Up @@ -219,6 +206,8 @@ let VideoCompBuilder = (function (props) {
client.on(
"user-unpublished",
(user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => {
console.log("user-unpublished");

if (mediaType === "audio") {
if (
!user.hasAudio &&
Expand Down Expand Up @@ -246,7 +235,7 @@ let VideoCompBuilder = (function (props) {

setUserId(userData.user);
setUsername(userData.userName);
// console.log(userData);
setVideo(userData.streamingVideo);
}
}, [props.userId.value]);

Expand All @@ -269,60 +258,40 @@ let VideoCompBuilder = (function (props) {
}}
>
{userId ? (
showVideo ? (
<VideoContainer
onClick={() => props.onEvent("videoClicked")}
ref={videoRef}
style={{
display: `${showVideo ? "flex" : "none"}`,
aspectRatio: props.videoAspectRatio,
borderRadius: props.style.radius,
width: "auto",
}}
id={props.shareScreen ? "share-screen" : userId}
></VideoContainer>
) : (
<div
style={{
flexDirection: "column",
display: "flex",
alignItems: "center",
margin: "0 auto",
padding: props.profilePadding,
}}
>
<img alt=""
style={{
borderRadius: props.profileBorderRadius,
width: "100%",
overflow: "hidden",
}}
src={props.profileImageUrl.value}
/>
<p style={{ margin: "0" }}>{userName ?? ""}</p>
</div>
)
) : (
<div
<VideoContainer
onClick={() => props.onEvent("videoClicked")}
ref={videoRef}
style={{
flexDirection: "column",
display: "flex",
alignItems: "center",
margin: "0 auto",
padding: props.profilePadding,
display: `${showVideo ? "flex" : "none"}`,
aspectRatio: props.videoAspectRatio,
borderRadius: props.style.radius,
width: "auto",
}}
>
<img alt=""
style={{
borderRadius: props.profileBorderRadius,
width: "100%",
overflow: "hidden",
}}
src={props.profileImageUrl.value}
/>
<p style={{ margin: "0" }}>{userName ?? ""}</p>
</div>
id={props.shareScreen ? "share-screen" : userId}
></VideoContainer>
) : (
<></>
)}
<div
style={{
flexDirection: "column",
alignItems: "center",
display: `${!showVideo || userId ? "flex" : "none"}`,
margin: "0 auto",
padding: props.profilePadding,
}}
>
<img
alt=""
style={{
borderRadius: props.profileBorderRadius,
width: "100%",
overflow: "hidden",
}}
src={props.profileImageUrl.value}
/>
<p style={{ margin: "0" }}>{userName ?? ""}</p>
</div>
</div>
</ReactResizeDetector>
)}
Expand Down

0 comments on commit 445f960

Please sign in to comment.