Remove tab mirroring

ext/src/_locales/de/messages.json

@@ -12,10 +12,6 @@
         "message": "Diese Medien",
         "description": "Receiver selector media type <option> text for media casting."
     },
-    "popupMediaTypeTab": {
-        "message": "Diesen Tab",
-        "description": "Receiver selector media type <option> text for current tab."
-    },
     "popupMediaTypeScreen": {
         "message": "Bildschirm",
         "description": "Receiver selector media type <option> text for screen."

ext/src/_locales/en/messages.json

@@ -4,7 +4,7 @@
         "description": "Name of the extension and the native receiver selector window title."
     },
     "extensionDescription": {
-        "message": "Enables Chromecast support for casting web apps (like Netflix or BBC iPlayer), HTML5 video and screen/tab sharing.",
+        "message": "Enables Chromecast support for casting web apps (like Netflix or BBC iPlayer), HTML5 video and screen sharing.",
         "description": "Description of the extension shown in the add-ons manager."
     },
 
@@ -42,10 +42,6 @@
         "message": "this media",
         "description": "Receiver selector media type <option> text for media casting."
     },
-    "popupMediaTypeTab": {
-        "message": "Tab",
-        "description": "Receiver selector media type <option> text for current tab."
-    },
     "popupMediaTypeScreen": {
         "message": "Screen",
         "description": "Receiver selector media type <option> text for screen."
@@ -483,7 +479,7 @@
     },
 
     "optionsMirroringCategoryName": {
-        "message": "Screen/tab casting",
+        "message": "Screen mirroring",
         "description": "Options page mirroring category name."
     },
     "optionsMirroringCategoryDescription": {
@@ -491,7 +487,7 @@
         "description": "Options page mirroring category description."
     },
     "optionsMirroringEnabled": {
-        "message": "Enable screen/tab casting (experimental)",
+        "message": "Enable screen mirroring (experimental)",
         "description": "Mirroring enabled checkbox label."
     },
     "optionsMirroringAppId": {

ext/src/_locales/es/messages.json

@@ -29,10 +29,6 @@
         "message": "este medio",
         "description": "Receiver selector media type <option> text for media casting."
     },
-    "popupMediaTypeTab": {
-        "message": "Pestaña",
-        "description": "Receiver selector media type <option> text for current tab."
-    },
     "popupMediaTypeScreen": {
         "message": "Pantalla",
         "description": "Receiver selector media type <option> text for screen."

ext/src/_locales/it/messages.json

@@ -29,10 +29,6 @@
         "message": "questo media ",
         "description": "Receiver selector media type <option> text for media casting."
     },
-    "popupMediaTypeTab": {
-        "message": "Tab",
-        "description": "Receiver selector media type <option> text for current tab."
-    },
     "popupMediaTypeScreen": {
         "message": "Schermo",
         "description": "Receiver selector media type <option> text for screen."

ext/src/_locales/nl/messages.json

@@ -11,10 +11,6 @@
         "message": "Deze media",
         "description": "Receiver selector media type <option> text for media casting."
     },
-    "popupMediaTypeTab": {
-        "message": "Tab",
-        "description": "Receiver selector media type <option> text for current tab."
-    },
     "popupMediaTypeScreen": {
         "message": "Scherm",
         "description": "Receiver selector media type <option> text for screen."

ext/src/_locales/no/messages.json

@@ -16,10 +16,6 @@
         "message": "dette medium",
         "description": "Receiver selector media type <option> text for media casting."
     },
-    "popupMediaTypeTab": {
-        "message": "Fane",
-        "description": "Receiver selector media type <option> text for current tab."
-    },
     "popupMediaTypeScreen": {
         "message": "Skjerm",
         "description": "Receiver selector media type <option> text for screen."

ext/src/background/castManager.ts

@@ -514,11 +514,9 @@ const castManager = new (class {
                 break;
             }
 
-            case ReceiverSelectorMediaType.Tab:
             case ReceiverSelectorMediaType.Screen:
                 await browser.tabs.executeScript(contentContext.tabId, {
                     code: stringify`
-                        window.mirroringMediaType = ${selection.mediaType};
                         window.receiverDevice = ${selection.device};
                         window.contextTabId = ${contentContext.tabId};
                     `,
@@ -561,7 +559,7 @@ async function getReceiverSelection(selectionOpts: {
         selectionOpts.castInstance = undefined;
     }
 
-    let defaultMediaType = ReceiverSelectorMediaType.Tab;
+    let defaultMediaType = ReceiverSelectorMediaType.Screen;
     let availableMediaTypes = ReceiverSelectorMediaType.None;
 
     // Default frame ID
@@ -635,9 +633,7 @@ async function getReceiverSelection(selectionOpts: {
 
     // Disable mirroring media types if mirroring is not enabled
     if (!opts.mirroringEnabled) {
-        availableMediaTypes &= ~(
+        availableMediaTypes &= ~ReceiverSelectorMediaType.Screen;
-            ReceiverSelectorMediaType.Tab | ReceiverSelectorMediaType.Screen
-        );
     }
 
     // Ensure status manager is initialized

ext/src/cast/senders/mirroring.ts

@@ -1,7 +1,7 @@
 import options from "../../lib/options";
 import { Logger } from "../../lib/logger";
 
-import { ReceiverDevice, ReceiverSelectorMediaType } from "../../types";
+import type { ReceiverDevice } from "../../types";
 
 import type { ReceiverAvailability } from "../sdk/enums";
 import type Session from "../sdk/Session";
@@ -18,18 +18,12 @@ type MirroringAppMessage =
     | { subject: "iceCandidate"; data: RTCIceCandidateInit }
     | { subject: "close" };
 
-type MirroringMediaType =
-    | ReceiverSelectorMediaType.Tab
-    | ReceiverSelectorMediaType.Screen;
-
 interface MirroringSenderOpts {
-    mirroringMediaType: MirroringMediaType;
     contextTabId?: number;
     receiverDevice?: ReceiverDevice;
 }
 
 class MirroringSender {
-    private mirroringMediaType: MirroringMediaType;
     private contextTabId?: number;
     private receiverDevice?: ReceiverDevice;
 
@@ -39,7 +33,6 @@ class MirroringSender {
     private peerConnection?: RTCPeerConnection;
 
     constructor(opts: MirroringSenderOpts) {
-        this.mirroringMediaType = opts.mirroringMediaType;
         this.contextTabId = opts.contextTabId;
         this.receiverDevice = opts.receiverDevice;
 
@@ -109,6 +102,19 @@ class MirroringSender {
         });
 
         this.peerConnection = new RTCPeerConnection();
+
+        this.peerConnection.addEventListener("negotiationneeded", async () => {
+            if (!this.peerConnection) return;
+
+            const offer = await this.peerConnection.createOffer();
+            await this.peerConnection.setLocalDescription(offer);
+
+            this.sendMirroringAppMessage({
+                subject: "peerConnectionOffer",
+                data: offer
+            });
+        });
+
         this.peerConnection.addEventListener("icecandidate", ev => {
             if (!ev.candidate) return;
             this.sendMirroringAppMessage({
@@ -117,91 +123,19 @@ class MirroringSender {
             });
         });
 
-        switch (this.mirroringMediaType) {
+        try {
-            case ReceiverSelectorMediaType.Tab:
+            // Add screen media stream
-                this.peerConnection.addStream(this.getTabStream());
+            this.peerConnection.addStream(
-                break;
+                await navigator.mediaDevices.getDisplayMedia({
-            case ReceiverSelectorMediaType.Screen:
+                    video: { cursor: "motion" },
-                this.peerConnection.addStream(await this.getScreenStream());
+                    audio: false
-                break;
+                })
-        }
-
-        const offer = await this.peerConnection.createOffer();
-        await this.peerConnection.setLocalDescription(offer);
-
-        this.sendMirroringAppMessage({
-            subject: "peerConnectionOffer",
-            data: offer
-        });
-    }
-
-    private getTabStream() {
-        const canvas = document.createElement("canvas");
-        const ctx = canvas.getContext("2d");
-        if (!ctx) {
-            throw logger.error("Failed to get tab canvas context!");
-        }
-
-        // Set initial size
-        canvas.width = window.innerWidth * window.devicePixelRatio;
-        canvas.height = window.innerHeight * window.devicePixelRatio;
-        ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
-
-        // Resize canvas whenever the window resizes
-        window.addEventListener("resize", () => {
-            canvas.width = window.innerWidth * window.devicePixelRatio;
-            canvas.height = window.innerHeight * window.devicePixelRatio;
-            ctx.setTransform(1, 0, 0, 1, 0, 0);
-            ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
-        });
-
-        const drawFlags =
-            ctx.DRAWWINDOW_DRAW_CARET |
-            ctx.DRAWWINDOW_DRAW_VIEW |
-            ctx.DRAWWINDOW_ASYNC_DECODE_IMAGES |
-            ctx.DRAWWINDOW_USE_WIDGET_LAYERS;
-
-        let lastFrame: DOMHighResTimeStamp;
-        window.requestAnimationFrame(function draw(now: DOMHighResTimeStamp) {
-            if (!lastFrame) {
-                lastFrame = now;
-            }
-
-            if (now - lastFrame > 1000 / 30) {
-                ctx.drawWindow(
-                    window, // window
-                    0,
-                    0, // x, y
-                    canvas.width, // w
-                    canvas.height, // h
-                    "white", // bgColor
-                    drawFlags
-                ); // flags
-
-                lastFrame = now;
-            }
-
-            window.requestAnimationFrame(draw);
-        });
-
-        return canvas.captureStream();
-    }
-
-    private getScreenStream() {
-        return new Promise<MediaStream>(resolve => {
-            window.addEventListener(
-                "click",
-                () => {
-                    resolve(
-                        navigator.mediaDevices.getDisplayMedia({
-                            video: { cursor: "motion" },
-                            audio: false
-                        })
-                    );
-                },
-                { once: true }
             );
-        });
+        } catch (err) {
+            logger.error("Failed to add display media stream!", err);
+            this.peerConnection.close();
+            this.session?.stop();
+        }
     }
 }
 
@@ -212,7 +146,6 @@ if (window.location.protocol !== "moz-extension:") {
     const window_ = window as any;
 
     new MirroringSender({
-        mirroringMediaType: window_.mirroringMediaType,
         contextTabId: window_.contextTabId,
         receiverDevice: window_.receiverDevice
     });

ext/src/lib/utils.ts

@@ -58,11 +58,6 @@ export function getMediaTypesForPageUrl(
         return availableMediaTypes;
     }
 
-    // Only meant to run on normal web pages
-    if (url.protocol === "http:" || url.protocol === "https:") {
-        availableMediaTypes |= ReceiverSelectorMediaType.Tab;
-    }
-
     /**
      * When on an insecure origin, MediaDevices.getDisplayMedia
      * will not exist (and legacy MediaDevices.getUserMedia

ext/src/ui/popup/Popup.svelte

@@ -95,7 +95,6 @@
                 );
 
             /** Mirroring requires video output capability. */
-            case ReceiverSelectorMediaType.Tab:
             case ReceiverSelectorMediaType.Screen:
                 return !!(
                     device.capabilities & ReceiverDeviceCapabilities.VIDEO_OUT
@@ -126,23 +125,19 @@
              * type is valid.
              */
             if (ev.detail.includes("mirroringEnabled")) {
-                const mirroringMediaTypes =
-                    ReceiverSelectorMediaType.Tab |
-                    ReceiverSelectorMediaType.Screen;
-
                 if (!opts.mirroringEnabled) {
-                    availableMediaTypes &= ~mirroringMediaTypes;
+                    availableMediaTypes &= ~ReceiverSelectorMediaType.Screen;
                 } else {
-                    availableMediaTypes |= mirroringMediaTypes;
+                    availableMediaTypes |= ReceiverSelectorMediaType.Screen;
                 }
 
                 if (!(availableMediaTypes & mediaType)) {
                     if (availableMediaTypes & ReceiverSelectorMediaType.App) {
                         mediaType = ReceiverSelectorMediaType.App;
                     } else if (
-                        availableMediaTypes & ReceiverSelectorMediaType.Tab
+                        availableMediaTypes & ReceiverSelectorMediaType.Screen
                     ) {
-                        mediaType = ReceiverSelectorMediaType.Tab;
+                        mediaType = ReceiverSelectorMediaType.Screen;
                     } else {
                         mediaType = ReceiverSelectorMediaType.App;
                     }
@@ -366,14 +361,6 @@
                 </option>
 
                 {#if opts?.mirroringEnabled}
-                    <option
-                        value={ReceiverSelectorMediaType.Tab}
-                        disabled={!(
-                            availableMediaTypes & ReceiverSelectorMediaType.Tab
-                        )}
-                    >
-                        {_("popupMediaTypeTab")}
-                    </option>
                     <option
                         value={ReceiverSelectorMediaType.Screen}
                         disabled={!(