overhaul & improve Linux screenshare

src/main/index.ts

@@ -28,13 +28,15 @@ function init() {
     const { disableSmoothScroll, hardwareAcceleration } = Settings.store;
 
     if (hardwareAcceleration === false) app.disableHardwareAcceleration();
+    if (hardwareAcceleration === true) {
+        app.commandLine.appendSwitch("enable-features", "VaapiVideoDecodeLinuxGL,VaapiVideoEncoder,VaapiVideoDecoder");
+    }
     if (disableSmoothScroll) {
         app.commandLine.appendSwitch("disable-smooth-scrolling");
     }
 
     // work around chrome 66 disabling autoplay by default
     app.commandLine.appendSwitch("autoplay-policy", "no-user-gesture-required");
-
     // WinRetrieveSuggestionsOnlyOnDemand: Work around electron 13 bug w/ async spellchecking on Windows.
     // HardwareMediaKeyHandling,MediaSessionService: Prevent Discord from registering as a media service.
     //

src/renderer/components/ScreenSharePicker.tsx

@@ -36,6 +36,7 @@ interface StreamSettings {
     fps: StreamFps;
     audio: boolean;
     audioSource?: string;
+    contentHint?: string;
     workaround?: boolean;
 }
 
@@ -49,7 +50,7 @@ interface Source {
     url: string;
 }
 
-let currentSettings: StreamSettings | null = null;
+export let currentSettings: StreamSettings | null = null;
 
 addPatch({
     patches: [
@@ -59,6 +60,20 @@ addPatch({
                 match: /this.localWant=/,
                 replace: "$self.patchStreamQuality(this);$&"
             }
+        },
+        {
+            find: "x-google-max-bitrate",
+            replacement: [
+                {
+                    // eslint-disable-next-line no-useless-escape
+                    match: /"x-google-max-bitrate=".concat\(\i\)/,
+                    replace: '"x-google-max-bitrate=".concat("80_000")'
+                },
+                {
+                    match: /;level-asymmetry-allowed=1/,
+                    replace: ";b=AS:800000;level-asymmetry-allowed=1"
+                }
+            ]
         }
     ],
     patchStreamQuality(opts: any) {
@@ -73,6 +88,11 @@ addPatch({
             bitrateMax: 8000000,
             bitrateTarget: 600000
         });
+        console.log("opts: ", opts);
+//         Object.assign(opts.encode, {
+//             framerate,
+//             pixelCount: height * width
+//         });
         Object.assign(opts.capture, {
             framerate,
             width,
@@ -165,17 +185,32 @@ function StreamSettings({
             deps: [source.id]
         }
     );
-
+    const notVisible = false;
+    function setVisible() {
+        return !notVisible;
+    }
+    // the source's name is not properly being displayed
     return (
         <div>
             <Forms.FormTitle>What you're streaming</Forms.FormTitle>
-            <Card className="vcd-screen-picker-card vcd-screen-picker-preview">
-                <img src={thumb} alt="" />
+            <Switch
+                onChange={setVisible}
+                value={notVisible ?? false}
+                className="vcd-screen-picker-audio vcd-screen-picker-preview-switch"
+            >
+                Show Preview
+            </Switch>
+            <Card
+                className={
+                    notVisible
+                        ? "vcd-screen-picker-card vcd-screen-picker-preview not-visible"
+                        : "vcd-screen-picker-card vcd-screen-picker-preview"
+                }
+            >
+                <img src={thumb} alt="stream preview" />
                 <Text variant="text-sm/normal">{source.name}</Text>
             </Card>
-
             <Forms.FormTitle>Stream Settings</Forms.FormTitle>
-
             <Card className="vcd-screen-picker-card">
                 <div className="vcd-screen-picker-quality">
                     <section>
@@ -214,7 +249,39 @@ function StreamSettings({
                         </div>
                     </section>
                 </div>
-
+                <section>
+                    <Forms.FormTitle>Content Type</Forms.FormTitle>
+                    <div>
+                        <div className="vcd-screen-picker-radios">
+                            <label className="vcd-screen-picker-radio" data-checked={settings.contentHint === "motion"}>
+                                <Text variant="text-sm/bold">Prefer Smoothness</Text>
+                                <input
+                                    type="radio"
+                                    name="contenthint"
+                                    value="motion"
+                                    checked={settings.contentHint === "motion"}
+                                    onChange={() => setSettings(s => ({ ...s, contentHint: "motion" }))}
+                                />
+                            </label>
+                            <label className="vcd-screen-picker-radio" data-checked={settings.contentHint === "detail"}>
+                                <Text variant="text-sm/bold">Prefer Clarity</Text>
+                                <input
+                                    type="radio"
+                                    name="contenthint"
+                                    value="detail"
+                                    checked={settings.contentHint === "detail"}
+                                    onChange={() => setSettings(s => ({ ...s, contentHint: "detail" }))}
+                                />
+                            </label>
+                        </div>
+                        <div className="vcd-screen-picker-hint-description">
+                            <p>
+                                Choosing "Prefer Clarity" will result in a significantly lower framerate in exchange for
+                                a much sharper and clearer image.
+                            </p>
+                        </div>
+                    </div>
+                </section>
                 {isWindows && (
                     <Switch
                         value={settings.audio}
@@ -319,6 +386,7 @@ function ModalComponent({
     const [settings, setSettings] = useState<StreamSettings>({
         resolution: "1080",
         fps: "60",
+        contentHint: "motion",
         audio: true
     });
 
@@ -347,29 +415,67 @@ function ModalComponent({
                     disabled={!selected}
                     onClick={() => {
                         currentSettings = settings;
-
                         // If there are 2 connections, the second one is the existing stream.
                         // In that case, we patch its quality
-                        const conn = [...MediaEngineStore.getMediaEngine().connections][1];
-                        if (conn && conn.videoStreamParameters.length > 0) {
-                            const height = Number(settings.resolution);
-                            const width = Math.round(height * (16 / 9));
-                            Object.assign(conn.videoStreamParameters[0], {
-                                maxFrameRate: Number(settings.fps),
-                                maxPixelCount: width * height,
-                                maxBitrate: 8000000,
-                                maxResolution: {
-                                    type: "fixed",
-                                    width,
-                                    height
-                                }
-                            });
+                        try {
+                            var conn = [...MediaEngineStore.getMediaEngine().connections].find(
+                                connection => connection.streamUserId === UserStore.getCurrentUser().id
+                            );
+                        } catch {
+                            console.log("No current stream.");
+                        }
+                        console.log([...MediaEngineStore.getMediaEngine().connections]);
+                        try {
+                            if (conn) {
+                                console.log(conn);
+                                const track = conn.input.stream.getVideoTracks()[0];
+                                console.log(track);
+                                const frameRate = Number(settings.fps);
+                                const height = Number(settings.resolution);
+                                const width = Math.round(height * (16 / 9));
+                                var constraints = track.getConstraints();
+                                const newConstraints = {
+                                    ...constraints,
+                                    frameRate,
+                                    advanced: [{ width: width, height: height }],
+                                    resizeMode: "none"
+                                };
+                                track.applyConstraints(newConstraints).then(() => {
+                                    console.log("Applied constraints from ScreenSharePicker successfully.");
+                                    console.log("New constraints:", track.getConstraints());
+                                });
+                            }
+                        } catch {
+                            console.log("No current stream.");
+                        }
+                        try {
+                            if(!conn) {
+                                submit({
+                                    id: selected!,
+                                    ...settings
+                                });
+                            } else {
+                                console.log(conn);
+                                const track = conn.input.stream.getVideoTracks()[0];
+                                console.log(track);
+                                const frameRate = Number(settings.fps);
+                                const height = Number(settings.resolution);
+                                const width = Math.round(height * (16 / 9));
+                                var constraints = track.getConstraints();
+                                const newConstraints = {
+                                    ...constraints,
+                                    frameRate,
+                                    advanced: [{ width: width, height: height }],
+                                    resizeMode: "none"
+                                };
+                                track.applyConstraints(newConstraints).then(() => {
+                                    console.log("Applied constraints from ScreenSharePicker successfully.");
+                                    console.log("New constraints:", track.getConstraints());
+                                });
+                            }
+                        } catch {
+                            console.log("Unable to start stream.");
                         }
-
-                        submit({
-                            id: selected!,
-                            ...settings
-                        });
 
                         close();
                     }}

src/renderer/components/screenSharePicker.css

@@ -122,3 +122,18 @@
 .vcd-screen-picker-audio {
     margin-bottom: 0;
 }
+
+.vcd-screen-picker-hint-description {
+    font-size: 14px;
+    color: var(--text-normal);
+    width: 100%;
+    font-weight: 400;
+}
+
+.vcd-screen-picker-preview-switch {
+    margin-top: 1em;
+}
+
+.not-visible {
+    display: none;
+}

src/renderer/patches/index.ts

@@ -7,6 +7,6 @@
 // TODO: Possibly auto generate glob if we have more patches in the future
 import "./enableNotificationsByDefault";
 import "./platformClass";
-import "./screenShareAudio";
+import "./screenShareFixes";
 import "./spellCheck";
 import "./windowsTitleBar";

src/renderer/patches/screenShareAudio.ts → src/renderer/patches/screenShareFixes.ts

@@ -4,6 +4,7 @@
  * Copyright (c) 2023 Vendicated and Vencord contributors
  */
 
+import { currentSettings } from "renderer/components/ScreenSharePicker";
 import { isLinux } from "renderer/utils";
 
 if (isLinux) {
@@ -23,6 +24,25 @@ if (isLinux) {
         const stream = await original.call(this, opts);
         const id = await getVirtmic();
 
+        const frameRate = Number(currentSettings?.fps);
+        const height = Number(currentSettings?.resolution);
+        const width = Math.round(height * (16 / 9));
+        var track = stream.getVideoTracks()[0];
+
+        track.contentHint = String(currentSettings?.contentHint);
+        var constraints = track.getConstraints();
+        const newConstraints = {
+            ...constraints,
+            frameRate,
+            advanced: [{ width: width, height: height }],
+            resizeMode: "none"
+        };
+
+        track.applyConstraints(newConstraints).then(() => {
+            console.log("Applied constraints from ScreenShareFixes successfully.");
+            console.log("New constraints:", track.getConstraints());
+        });
+
         if (id) {
             const audio = await navigator.mediaDevices.getUserMedia({
                 audio: {