netless-io · syt-honey · Apr 4, 2023 · Apr 4, 2023
diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json
@@ -409,7 +409,8 @@
     "tip-window-title": "Ending screen sharing",
     "tip-window-body": "You are sharing the current screen",
     "tip-window-button": "End Sharing",
-    "self": "Share Screen"
+    "self": "Share Screen",
+    "with-audio": "Share Screen with Audio"
   },
   "app-store": "AppStore(Beta)",
   "recently-used": "Recently Used",

diff --git a/packages/flat-i18n/locales/zh-CN.json b/packages/flat-i18n/locales/zh-CN.json
@@ -409,7 +409,8 @@
     "tip-window-title": "结束屏幕共享",
     "tip-window-body": "正在共享屏幕",
     "tip-window-button": "结束共享",
-    "self": "屏幕分享"
+    "self": "屏幕分享",
+    "with-audio": "包含桌面音频"
   },
   "app-store": "应用中心（测试版）",
   "recently-used": "最近使用",

diff --git a/packages/flat-pages/src/components/ShareScreen/ShareScreenPicker/index.tsx b/packages/flat-pages/src/components/ShareScreen/ShareScreenPicker/index.tsx
@@ -4,7 +4,7 @@ import React, { useCallback, useLayoutEffect, useState } from "react";
 import classNames from "classnames";
 import { useTranslate } from "@netless/flat-i18n";
 import { ClassroomStore } from "@netless/flat-stores";
-import { Button, Modal, Spin } from "antd";
+import { Button, Modal, Spin, Checkbox, Row, Col } from "antd";
 import { observer } from "mobx-react-lite";
 
 import { ScreenList } from "./ScreenList";
@@ -39,12 +39,30 @@ const ShareScreenPickerModel = observer<ShareScreenPickerProps>(function ShareSc
                     padding: "16px 0 0 16px",
                 }}
                 className="share-screen-picker-model"
-                footer={[
-                    <Button key="cancel" className="footer-button" onClick={closeModal}>
-                        {t("cancel")}
-                    </Button>,
-                    <ConfirmButton key={"confirm"} handleOk={handleOk} isSelected={isSelected} />,
-                ]}
+                footer={
+                    <Row>
+                        <Col flex={1} style={{ textAlign: "left" }}>
+                            <Checkbox
+                                checked={classroomStore.shareScreenWithAudio}
+                                onChange={ev =>
+                                    classroomStore.toggleShareScreenWithAudio(ev.target.checked)
+                                }
+                            >
+                                {t("share-screen.with-audio")}
+                            </Checkbox>
+                        </Col>
+                        <Col>
+                            <Button key="cancel" className="footer-button" onClick={closeModal}>
+                                {t("cancel")}
+                            </Button>
+                            <ConfirmButton
+                                key="confirm"
+                                handleOk={handleOk}
+                                isSelected={isSelected}
+                            />
+                        </Col>
+                    </Row>
+                }
                 title={t("share-screen.choose-share-content")}
                 width="784px"
                 onCancel={closeModal}

diff --git a/packages/flat-services/src/services/video-chat/share-screen.ts b/packages/flat-services/src/services/video-chat/share-screen.ts
@@ -21,7 +21,7 @@ export abstract class IServiceShareScreen {
     public readonly events = new Remitter<IServiceShareScreenData>();
 
     public abstract setParams(params: IServiceShareScreenParams | null): void;
-    public abstract enable(enabled: boolean): void;
+    public abstract enable(enabled: boolean, withAudio?: boolean): void;
     public abstract setElement(element: HTMLElement | null): void;
 
     public getScreenInfo(): Promise<IServiceShareScreenInfo[]> {

diff --git a/packages/flat-stores/src/classroom-store/index.ts b/packages/flat-stores/src/classroom-store/index.ts
@@ -103,6 +103,7 @@ export class ClassroomStore {
     public shareScreenInfo: IServiceShareScreenInfo[] = [];
 
     public selectedScreenInfo: IServiceShareScreenInfo | null = null;
+    public shareScreenWithAudio = false;
 
     public shareScreenPickerVisible = false;
 
@@ -972,8 +973,12 @@ export class ClassroomStore {
         this.rtc.shareScreen.setScreenInfo(info);
     };
 
+    public toggleShareScreenWithAudio = (force = !this.shareScreenWithAudio): void => {
+        this.shareScreenWithAudio = force;
+    };
+
     public toggleShareScreen = (force = !this.isScreenSharing): void => {
-        this.rtc.shareScreen.enable(force);
+        this.rtc.shareScreen.enable(force, this.shareScreenWithAudio);
         this.toggleShareScreenPicker(false);
     };
 

diff --git a/service-providers/agora-rtc/agora-rtc-electron/src/rtc-share-screen.ts b/service-providers/agora-rtc/agora-rtc-electron/src/rtc-share-screen.ts
@@ -44,6 +44,8 @@ export class AgoraRTCElectronShareScreen extends IServiceShareScreen {
 
     private readonly _screenInfo$ = new Val<IServiceShareScreenInfo | null>(null);
 
+    private _withAudio = false;
+
     public constructor(config: AgoraRTCElectronShareScreenAvatarConfig) {
         super();
 
@@ -160,10 +162,13 @@ export class AgoraRTCElectronShareScreen extends IServiceShareScreen {
         this._screenInfo$.setValue(info);
     }
 
-    public enable(enabled: boolean): void {
+    public enable(enabled: boolean, withAudio?: boolean): void {
         if (this._el$.value && this._active$.value) {
             throw new Error("There already exists remote screen track.");
         }
+        if (typeof withAudio === "boolean") {
+            this._withAudio = withAudio;
+        }
         this._enabled$.setValue(enabled);
     }
 
@@ -195,32 +200,36 @@ export class AgoraRTCElectronShareScreen extends IServiceShareScreen {
 
         const { roomUUID, token, uid } = this._params$.value;
 
+        const withAudio = this._withAudio;
+
         this._pTogglingShareScreen = new Promise<void>(resolve => {
             this.client.once("videoSourceJoinedSuccess", () => {
-                // Internally it enables "local audio" (microphone) in the video source instance
-                // "video source" means the *second* instance of AgoraRtcEngine.
-                // There could only be 2 instances in electron sdk.
-                //
-                // After that, the loopback recording can be *mixed* into the microphone stream.
-                // After that, we adjust the microphone stream volume to 0 to make it only includes the loopback sound.
-                this.client.videoSourceEnableAudio();
-
-                // Install the virtual sound card "soundflower" on macOS.
-                // https://api-ref.agora.io/en/voice-sdk/electron/3.x/classes/agorartcengine.html#videosourceenableloopbackrecording
-                // https://docs.agora.io/cn/video-legacy/API%20Reference/electron/classes/agorartcengine.html#videosourceenableloopbackrecording
-                let deviceName: string | null = null;
-                if (this._rtc.isMac) {
-                    for (const device of this.client.getAudioPlaybackDevices()) {
-                        const name = (device as { devicename: string }).devicename;
-                        if (name.toLowerCase().includes("soundflower")) {
-                            deviceName = name;
-                            break;
+                if (withAudio) {
+                    // Internally it enables "local audio" (microphone) in the video source instance
+                    // "video source" means the *second* instance of AgoraRtcEngine.
+                    // There could only be 2 instances in electron sdk.
+                    //
+                    // After that, the loopback recording can be *mixed* into the microphone stream.
+                    // After that, we adjust the microphone stream volume to 0 to make it only includes the loopback sound.
+                    this.client.videoSourceEnableAudio();
+
+                    // Install the virtual sound card "soundflower" on macOS.
+                    // https://api-ref.agora.io/en/voice-sdk/electron/3.x/classes/agorartcengine.html#videosourceenableloopbackrecording
+                    // https://docs.agora.io/cn/video-legacy/API%20Reference/electron/classes/agorartcengine.html#videosourceenableloopbackrecording
+                    let deviceName: string | null = null;
+                    if (this._rtc.isMac) {
+                        for (const device of this.client.getAudioPlaybackDevices()) {
+                            const name = (device as { devicename: string }).devicename;
+                            if (name.toLowerCase().includes("soundflower")) {
+                                deviceName = name;
+                                break;
+                            }
                         }
                     }
+                    this.client.videoSourceEnableLoopbackRecording(true, deviceName);
+                    // Because there's no way to disable microphone stream, adjust the volume to 0 to simulate.
+                    this.client.videoSourceAdjustRecordingSignalVolume(0);
                 }
-                this.client.videoSourceEnableLoopbackRecording(true, deviceName);
-                // Because there's no way to disable microphone stream, adjust the volume to 0 to simulate.
-                this.client.videoSourceAdjustRecordingSignalVolume(0);
 
                 this.client.videoSourceSetVideoProfile(43, false);
                 if (screenInfo.type === "display") {