Skip to content

Commit 36de39c

Browse files
freddysundownerfreddysundowner
committed
added sharing of screen
1 parent 26a980a commit 36de39c

File tree

3 files changed

+54
-12
lines changed

3 files changed

+54
-12
lines changed

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

Lines changed: 45 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
booleanExposingStateControl,
1313
jsonObjectExposingStateControl,
1414
numberExposingStateControl,
15+
stringExposingStateControl,
1516
} from "comps/controls/codeStateControl";
1617
import { PositionControl } from "comps/controls/dropdownControl";
1718
import {
@@ -45,6 +46,8 @@ import AgoraRTC, {
4546
IMicrophoneAudioTrack,
4647
IAgoraRTCClient,
4748
IAgoraRTCRemoteUser,
49+
UID,
50+
ILocalVideoTrack,
4851
} from "agora-rtc-sdk-ng";
4952
import { JSONValue } from "@lowcoder-ee/index.sdk";
5053
import { getData } from "../listViewComp/listViewUtils";
@@ -99,13 +102,14 @@ export const client: IAgoraRTCClient = AgoraRTC.createClient({
99102
});
100103
let audioTrack: IMicrophoneAudioTrack;
101104
let videoTrack: ICameraVideoTrack;
102-
105+
let screenShareStream: ILocalVideoTrack;
106+
let userId: UID | null | undefined;
103107
const turnOnCamera = async (flag?: boolean) => {
104108
if (videoTrack) {
105109
return videoTrack.setEnabled(flag!);
106110
}
107111
videoTrack = await AgoraRTC.createCameraVideoTrack();
108-
videoTrack.play("host-video");
112+
videoTrack.play(userId + "");
109113
};
110114

111115
const turnOnMicrophone = async (flag?: boolean) => {
@@ -115,24 +119,42 @@ const turnOnMicrophone = async (flag?: boolean) => {
115119
audioTrack = await AgoraRTC.createMicrophoneAudioTrack();
116120
audioTrack.play();
117121
};
118-
122+
const shareScreen = async (sharing: boolean) => {
123+
try {
124+
if (sharing == false) {
125+
await client.unpublish(screenShareStream);
126+
await client.publish(videoTrack);
127+
videoTrack.play(userId + "");
128+
} else {
129+
screenShareStream = await AgoraRTC.createScreenVideoTrack(
130+
{
131+
screenSourceType: "screen",
132+
},
133+
"disable"
134+
);
135+
await client.unpublish(videoTrack);
136+
screenShareStream.play(userId + "");
137+
await client.publish(screenShareStream);
138+
}
139+
} catch (error) {
140+
console.error("Failed to create screen share stream:", error);
141+
}
142+
};
119143
const leaveChannel = async () => {
120-
console.log("user leaving 3");
121144
if (videoTrack) {
122145
await turnOnCamera(false);
123146
await client.unpublish(videoTrack);
124147
videoTrack.stop();
125148
}
126149

127-
console.log("user leaving 2");
128150
if (audioTrack) {
129151
await turnOnMicrophone(false);
130152
await client.unpublish(audioTrack);
131153
audioTrack.stop();
132154
}
133-
console.log("user leaving");
134155

135156
await client.leave();
157+
window.location.reload(); //FixMe: this reloads the page when user leaves
136158
isJoined = false;
137159
};
138160
let isJoined = false;
@@ -145,7 +167,6 @@ const joinChannel = async (appId: any, channel: any, token: any) => {
145167
if (isJoined) {
146168
await leaveChannel();
147169
}
148-
let userId = Math.floor(100000 + Math.random() * 900000);
149170
console.log("me joining ", userId);
150171
await client.join(appId, channel, token || null, userId);
151172

@@ -154,8 +175,6 @@ const joinChannel = async (appId: any, channel: any, token: any) => {
154175

155176
const publishVideo = async (appId: any, channel: any, height: any) => {
156177
await turnOnCamera(true);
157-
console.log(appId, channel);
158-
159178
if (!isJoined) {
160179
await joinChannel(appId, channel, null);
161180
}
@@ -188,11 +207,13 @@ let MTComp = (function () {
188207
audioControl: booleanExposingStateControl("false"),
189208
videoControl: booleanExposingStateControl("true"),
190209
endCall: booleanExposingStateControl("false"),
210+
sharingScreen: booleanExposingStateControl("false"),
191211
videoSettings: jsonObjectExposingStateControl(""),
192212
videoWidth: numberExposingStateControl("videoWidth", 200),
193213
videoHeight: numberExposingStateControl("videoHeight", 200),
194214
appId: withDefault(StringControl, trans("prop.appid")),
195215
participants: stateComp<JSONValue>([]),
216+
host: stringExposingStateControl("host"),
196217
};
197218
return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
198219
const isTopBom = ["top", "bottom"].includes(props.placement);
@@ -349,6 +370,18 @@ MTComp = withMethodExposing(MTComp, [
349370
comp.children.visible.getView().onChange(true);
350371
},
351372
},
373+
{
374+
method: {
375+
name: "startSharing",
376+
description: trans("drawer.openDrawerDesc"),
377+
params: [],
378+
},
379+
execute: async (comp, values) => {
380+
let sharing = !comp.children.sharingScreen.getView().value;
381+
comp.children.sharingScreen.change(sharing);
382+
await shareScreen(sharing);
383+
},
384+
},
352385
{
353386
method: {
354387
name: "audioControl",
@@ -380,6 +413,8 @@ MTComp = withMethodExposing(MTComp, [
380413
params: [],
381414
},
382415
execute: async (comp, values) => {
416+
userId = Math.floor(100000 + Math.random() * 900000);
417+
comp.children.host.change(userId + "");
383418
await publishVideo(
384419
comp.children.appId.getView(),
385420
"testsdaadasdsa",
@@ -395,7 +430,6 @@ MTComp = withMethodExposing(MTComp, [
395430
},
396431
execute: async (comp, values) => {
397432
let value = !comp.children.endCall.getView().value;
398-
console.log("");
399433

400434
await leaveChannel();
401435
comp.children.endCall.change(value);
@@ -416,6 +450,7 @@ MTComp = withMethodExposing(MTComp, [
416450
export const VideoMeetingControllerComp = withExposingConfigs(MTComp, [
417451
new NameConfig("visible", trans("export.visibleDesc")),
418452
new NameConfig("appId", trans("prop.appid")),
453+
new NameConfig("host", trans("prop.appid")),
419454
new NameConfig("participants", trans("prop.participants")),
420455
]);
421456

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import { useEffect, useRef, useState } from "react";
3131
import { AutoHeightControl } from "comps/controls/autoHeightControl";
3232
import { client } from "./videoMeetingControllerComp";
3333

34-
import { IAgoraRTCRemoteUser, UID } from "agora-rtc-sdk-ng";
34+
import AgoraRTC, { IAgoraRTCRemoteUser, UID } from "agora-rtc-sdk-ng";
3535

3636
import { stringExposingStateControl } from "@lowcoder-ee/index.sdk";
3737

@@ -168,12 +168,18 @@ let VideoCompBuilder = (function (props) {
168168
videoCo!.style.width = container?.clientWidth + "px";
169169
};
170170
useEffect(() => {
171+
171172
client.on(
172173
"user-published",
173174
async (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => {
174175
if (mediaType === "video") {
175176
const remoteTrack = await client.subscribe(user, mediaType);
176-
remoteTrack.play(user.uid + "");
177+
let userId = user.uid + "";
178+
const element = document.getElementById(userId);
179+
if (element) {
180+
console.log("userId", element);
181+
remoteTrack.play(userId);
182+
}
177183
}
178184
if (mediaType === "audio") {
179185
const remoteTrack = await client.subscribe(user, mediaType);

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1452,6 +1452,7 @@ export const en = {
14521452
title: "Meeting title",
14531453
meetingCompName: "Meeting Controller",
14541454
videoCompName: "Video Stream",
1455+
videoSharingCompName: "Video Sharing",
14551456
meetingControlCompName: "Controls Buttons",
14561457
meetingCompDesc: "Meeting component",
14571458
meetingCompControls: "Meeting control",

0 commit comments

Comments
 (0)