Skip to content

Commit e1f4013

Browse files
BlackHole1BlackHole1
authored
fix(desktop): share display failed in windows system (#998)
1 parent 26cd62e commit e1f4013

File tree

5 files changed

+47
-45
lines changed

5 files changed

+47
-45
lines changed

‎desktop/renderer-app/src/apiMiddleware/share-screen.ts

+12-10
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { globalStore } from "../stores/GlobalStore";
22
import { AGORA } from "../constants/Process";
33
import type AgoraSDK from "agora-electron-sdk";
4+
import { ScreenSymbol } from "agora-electron-sdk/types/Api/native_type";
45

56
export class RTCShareScreen {
67
public constructor(
@@ -10,7 +11,7 @@ export class RTCShareScreen {
1011
private readonly existOtherUserStream: () => boolean,
1112
) {}
1213

13-
public enable(isDisplayScreen: boolean, screenID: number): void {
14+
public enable(shareSymbol: ShareSymbol): void {
1415
if (!globalStore.rtcShareScreen) {
1516
return;
1617
}
@@ -36,18 +37,16 @@ export class RTCShareScreen {
3637
this.roomClient.once("videoSourceJoinedSuccess", () => {
3738
this.roomClient.videoSourceSetVideoProfile(43, false);
3839

39-
if (isDisplayScreen) {
40+
if (shareSymbol.type === "display") {
41+
console.log(this.roomClient.getScreenDisplaysInfo());
4042
this.roomClient.videoSourceStartScreenCaptureByScreen(
41-
{
42-
// @ts-ignore
43-
id: screenID,
44-
},
43+
shareSymbol.data,
4544
rect,
4645
videoSourceParam,
4746
);
4847
} else {
4948
this.roomClient.videoSourceStartScreenCaptureByWindow(
50-
screenID,
49+
shareSymbol.data as number,
5150
rect,
5251
videoSourceParam,
5352
);
@@ -95,9 +94,7 @@ export class RTCShareScreen {
9594
}
9695

9796
export type ScreenDisplaysInfo = {
98-
readonly displayId: {
99-
readonly id: number;
100-
};
97+
readonly displayId: ScreenSymbol;
10198
readonly width: number;
10299
readonly height: number;
103100
readonly image: Uint8Array;
@@ -124,3 +121,8 @@ export type ScreenInfo = {
124121
displayList: ScreenDisplaysInfo[];
125122
windowList: ScreenWindowsInfo[];
126123
};
124+
125+
export type ShareSymbol = {
126+
type: "window" | "display";
127+
data: ScreenSymbol | number;
128+
};

‎desktop/renderer-app/src/components/ShareScreen/ShareScreenPicker/ScreenList/Utils.ts

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ScreenInfo } from "../../../../apiMiddleware/share-screen";
1+
import { ScreenInfo, ShareSymbol } from "../../../../apiMiddleware/share-screen";
22

33
export const uint8ArrayToImageURL = (buffer: Uint8Array): string => {
44
return URL.createObjectURL(
@@ -10,22 +10,22 @@ export const uint8ArrayToImageURL = (buffer: Uint8Array): string => {
1010

1111
export const getScreenInfo = (
1212
info: ScreenInfo["windowList"][0] | ScreenInfo["displayList"][0],
13-
): {
14-
id: number;
15-
isDisplay: boolean;
16-
name: string;
17-
} => {
13+
): IScreenInfo => {
1814
if ("displayId" in info) {
1915
return {
20-
id: info.displayId.id,
21-
isDisplay: true,
16+
type: "display",
17+
data: info.displayId,
2218
name: "Desktop",
2319
};
2420
} else {
2521
return {
26-
id: info.windowId,
27-
isDisplay: false,
22+
type: "window",
23+
data: info.windowId,
2824
name: `${info.ownerName} - ${info.name}`,
2925
};
3026
}
3127
};
28+
29+
interface IScreenInfo extends ShareSymbol {
30+
name: string;
31+
}

‎desktop/renderer-app/src/components/ShareScreen/ShareScreenPicker/ScreenList/index.tsx

+18-12
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import "./style.less";
22
import React, { useCallback, useEffect, useState } from "react";
33
import { observer } from "mobx-react-lite";
4-
import { ScreenInfo } from "../../../../apiMiddleware/share-screen";
4+
import { ScreenInfo, ShareSymbol } from "../../../../apiMiddleware/share-screen";
55
import { getScreenInfo, uint8ArrayToImageURL } from "./Utils";
66
import classNames from "classnames";
77
import { ShareScreenStore } from "../../../../stores/ShareScreenStore";
@@ -27,24 +27,22 @@ export const ScreenList = observer<ScreenListProps>(function ShareScreen({
2727
}, [screenInfo.windowList, t]);
2828

2929
const onClick = useCallback(
30-
(isDisplay: boolean, id: number) => {
31-
setActiveInfo(`${isDisplay ? "display" : "window"}-${id}`);
32-
shareScreenStore.updateIsDisplayScreen(isDisplay);
33-
shareScreenStore.updateScreenID(id);
30+
(screenInfo: ShareSymbol, activeKey: string) => {
31+
setActiveInfo(activeKey);
32+
shareScreenStore.updateShareSymbolInfo(screenInfo);
3433
},
3534
[shareScreenStore],
3635
);
3736

3837
const cancelSelected = useCallback(() => {
3938
setActiveInfo("");
40-
shareScreenStore.updateIsDisplayScreen(null);
41-
shareScreenStore.updateScreenID(null);
39+
shareScreenStore.updateShareSymbolInfo(null);
4240
}, [shareScreenStore]);
4341

4442
return (
4543
<div className="screen-list">
46-
{screenInfo.displayList.map(info => {
47-
const key = `display-${info.displayId.id}`;
44+
{screenInfo.displayList.map((info, index) => {
45+
const key = `display-${index}`;
4846
const isActive = activeInfo === key;
4947

5048
return (
@@ -53,6 +51,7 @@ export const ScreenList = observer<ScreenListProps>(function ShareScreen({
5351
handleClick={isActive ? cancelSelected : onClick}
5452
active={isActive}
5553
key={key}
54+
activeKey={key}
5655
/>
5756
);
5857
})}
@@ -66,6 +65,7 @@ export const ScreenList = observer<ScreenListProps>(function ShareScreen({
6665
handleClick={isActive ? cancelSelected : onClick}
6766
active={activeInfo === key}
6867
key={key}
68+
activeKey={key}
6969
/>
7070
);
7171
})}
@@ -75,11 +75,17 @@ export const ScreenList = observer<ScreenListProps>(function ShareScreen({
7575

7676
interface ScreenItemProps {
7777
info: ScreenInfo["windowList"][0] | ScreenInfo["displayList"][0];
78-
handleClick: (isDisplay: boolean, id: number) => void;
78+
handleClick: (screenInfo: ShareSymbol, key: string) => void;
7979
active: boolean;
80+
activeKey: string;
8081
}
8182

82-
const ScreenItem = observer<ScreenItemProps>(function ScreenItem({ info, handleClick, active }) {
83+
const ScreenItem = observer<ScreenItemProps>(function ScreenItem({
84+
info,
85+
handleClick,
86+
active,
87+
activeKey,
88+
}) {
8389
const screenInfo = getScreenInfo(info);
8490

8591
return (
@@ -89,7 +95,7 @@ const ScreenItem = observer<ScreenItemProps>(function ScreenItem({ info, handleC
8995
className={classNames("screen-image-box", {
9096
active,
9197
})}
92-
onClick={() => handleClick(screenInfo.isDisplay, screenInfo.id)}
98+
onClick={() => handleClick(screenInfo, activeKey)}
9399
>
94100
<img src={uint8ArrayToImageURL(info.image)} alt="screenshots" />
95101
</div>

‎desktop/renderer-app/src/components/ShareScreen/ShareScreenPicker/index.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,7 @@ const ShareScreenPickerModel = observer<ShareScreenPickerProps>(function ShareSc
3030
shareScreenStore.updateShowShareScreenPicker(false);
3131
}, [shareScreenStore]);
3232

33-
const isSelected =
34-
shareScreenStore.isDisplayScreen !== null && shareScreenStore.screenID !== null;
33+
const isSelected = shareScreenStore.shareSymbol !== null;
3534

3635
return (
3736
<div>

‎desktop/renderer-app/src/stores/ShareScreenStore/index.ts

+6-11
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { autorun, makeAutoObservable, observable, reaction, runInAction } from "mobx";
2-
import { RTCShareScreen, ScreenInfo } from "../../apiMiddleware/share-screen";
2+
import { RTCShareScreen, ScreenInfo, ShareSymbol } from "../../apiMiddleware/share-screen";
33
import { ListenerOtherUserShareScreen } from "./ListenerOtherUserShareScreen";
44

55
export class ShareScreenStore {
@@ -9,8 +9,7 @@ export class ShareScreenStore {
99
public screenInfo: ScreenInfo | null = null;
1010
public existOtherShareScreen = false;
1111
public showShareScreenPicker = false;
12-
public isDisplayScreen: boolean | null = null;
13-
public screenID: number | null = null;
12+
public shareSymbol: ShareSymbol | null = null;
1413
public isWritable = false;
1514

1615
private element: HTMLElement | null = null;
@@ -98,12 +97,8 @@ export class ShareScreenStore {
9897
this.screenInfo = null;
9998
}
10099

101-
public updateIsDisplayScreen(isDisplay: boolean | null): void {
102-
this.isDisplayScreen = isDisplay;
103-
}
104-
105-
public updateScreenID(id: number | null): void {
106-
this.screenID = id;
100+
public updateShareSymbolInfo(shareSymbol: ShareSymbol | null): void {
101+
this.shareSymbol = shareSymbol;
107102
}
108103

109104
public updateIsWritable(isWritable: boolean): void {
@@ -122,8 +117,8 @@ export class ShareScreenStore {
122117
public enable(): void {
123118
// same as updateScreenInfo
124119
setTimeout(() => {
125-
if (this.rtcShareScreen && this.isDisplayScreen !== null && this.screenID !== null) {
126-
this.rtcShareScreen.enable(this.isDisplayScreen, this.screenID);
120+
if (this.rtcShareScreen && this.shareSymbol !== null) {
121+
this.rtcShareScreen.enable(this.shareSymbol);
127122
}
128123

129124
this.updateShowShareScreenPicker(false);

0 commit comments

Comments
 (0)