streamSelector improvements (#1479)

* removing the need of contentIsolation in the streamSelector part and other improvements

.vscode/launch.json

@@ -11,6 +11,39 @@
             "cwd": "${workspaceRoot}",
             "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
             "args" : ["--disable-http-cache","./app"]
-          }
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Electron: Main",
+            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
+            "runtimeArgs": [
+                "--remote-debugging-port=9223",
+                "."
+            ],
+            "windows": {
+                "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
+            }
+        },
+        {
+            "name": "Electron: Renderer",
+            "type": "chrome",
+            "request": "attach",
+            "port": 9223,
+            "webRoot": "${workspaceFolder}",
+            "timeout": 30000,
+            "resolveSourceMapLocations": [
+                "${workspaceFolder}"
+            ],
+        }
+    ],
+    "compounds": [
+        {
+            "name": "Electron: All",
+            "configurations": [
+                "Electron: Main",
+                "Electron: Renderer"
+            ]
+        }
     ]
 }

app/login/formSender.js

@@ -6,5 +6,10 @@ function sendForm(event) { // eslint-disable-line no-unused-vars
 		{
 			username: document.getElementById('username').value,
 			password: document.getElementById('password').value,
-		});
+		}
+	);
+	// window.api.submitForm({
+	// 	username: document.getElementById('username').value,
+	// 	password: document.getElementById('password').value,
+	// });
 }

app/login/index.js

@@ -1,5 +1,6 @@
 const { app, ipcMain, BrowserWindow } = require('electron');
 const { execSync } = require('child_process');
+// const path = require('path');
 
 let isFirstLoginTry = true;
 
@@ -16,6 +17,7 @@ exports.loginService = function loginService(parentWindow, callback) {
 		webPreferences: {
 			contextIsolation: false,
 			nodeIntegration: true
+			//preload: path.join(__dirname, 'preload.js')
 		}
 	});
 	win.once('ready-to-show', () => {

app/login/preload.js

@@ -0,0 +1,12 @@
+const {
+    contextBridge,
+    ipcRenderer
+} = require("electron");
+
+contextBridge.exposeInMainWorld(
+    "api", {
+        submitForm: (args) => {
+            ipcRenderer.send('submitForm', args);
+        },
+    },
+);

app/streamSelector/browser.js

@@ -1,32 +1,51 @@
-const { ipcRenderer } = require('electron');
-window.addEventListener('DOMContentLoaded', init());
-
-function init() {
-	return () => {
-		ipcRenderer.once('get-screensizes-response', (event, screens) => {
-			createPreviewScreen(screens);
-		});
-		ipcRenderer.send('get-screensizes-request');
-	};
-}
-
-function createPreviewScreen(screens) {
+window.addEventListener('DOMContentLoaded', () => {
+	const screens = [
+		{
+			width: 1280,
+			height: 720,
+			name: 'HD',
+			alt_name: '720p',
+			default: false
+		},
+		{
+			width: 1920,
+			height: 1080,
+			name: 'FHD',
+			alt_name: '1080p',
+			default: true
+		},
+		{
+			width: 2048,
+			height: 1080,
+			name: '2K',
+			alt_name: 'QHD',
+			default: false
+		},
+		{
+			width: 3840,
+			height: 2160,
+			name: '4K',
+			alt_name: 'UHD',
+			default: false
+		}
+	];
 	let windowsIndex = 0;
 	const sscontainer = document.getElementById('screen-size');
 	createEventHandlers({ screens, sscontainer });
-	ipcRenderer.invoke('desktop-capturer-get-sources', { types: ['window', 'screen'] }).then(async (sources) => {
-		const rowElement = document.querySelector('.container-fluid .row');
-		for (const source of sources) {
-			await createPreview({
-				source,
-				title: source.id.startsWith('screen:') ? source.name : `Window ${++windowsIndex}`,
-				rowElement,
-				screens,
-				sscontainer
-			});
-		}
-	});
-}
+	window.api.desktopCapturerGetSources({ types: ['window', 'screen'] })
+		.then(async (sources) => {
+			const rowElement = document.querySelector('.container-fluid .row');
+			for (const source of sources) {
+				await createPreview({
+					source,
+					title: source.id.startsWith('screen:') ? source.name : `Window ${++windowsIndex}`,
+					rowElement,
+					screens,
+					sscontainer
+				});
+			}
+		});
+});
 
 async function createPreview(properties) {
 	let columnElement = document.createElement('div');
@@ -75,7 +94,7 @@ async function createPreviewStream(properties, videoElement) {
 function playPreview(properties) {
 	properties.videoElement.onclick = () => {
 		closePreviews();
-		ipcRenderer.send('selected-source', {
+		window.api.selectedSource({
 			id: properties.source.id,
 			screen: properties.screens[properties.sscontainer.value]
 		});
@@ -89,7 +108,7 @@ function createEventHandlers(properties) {
 	document.querySelector('#btn-windows').addEventListener('click', toggleSources);
 	document.querySelector('#btn-close').addEventListener('click', () => {
 		closePreviews();
-		ipcRenderer.send('close-view');
+		window.api.closeView();
 	});
 }
 

app/streamSelector/index.js

@@ -1,35 +1,5 @@
-const { ipcMain, BrowserView } = require('electron');
+const { ipcMain, WebContentsView } = require('electron');
 const path = require('path');
-const resolutions = [
-	{
-		width: 1280,
-		height: 720,
-		name: 'HD',
-		alt_name: '720p',
-		default: false
-	},
-	{
-		width: 1920,
-		height: 1080,
-		name: 'FHD',
-		alt_name: '1080p',
-		default: true
-	},
-	{
-		width: 2048,
-		height: 1080,
-		name: '2K',
-		alt_name: 'QHD',
-		default: false
-	},
-	{
-		width: 3840,
-		height: 2160,
-		name: '4K',
-		alt_name: 'UHD',
-		default: false
-	}
-];
 
 let _StreamSelector_parent = new WeakMap();
 let _StreamSelector_window = new WeakMap();
@@ -54,7 +24,7 @@ class StreamSelector {
 	}
 
 	/**
-	 * @type {BrowserView}
+	 * @type {WebContentsView}
 	 */
 	get view() {
 		return _StreamSelector_window.get(this);
@@ -85,23 +55,24 @@ class StreamSelector {
 	show(callback) {
 		let self = this;
 		self.callback = callback;
-		self.view = new BrowserView({
+		self.view = new WebContentsView({
 			webPreferences: {
-				nodeIntegration: true,
-				contextIsolation: false
+				preload: path.join(__dirname, 'preload.js')
 			}
 		});
 
-		createScreenRequestHandler();
 		self.view.webContents.loadFile(path.join(__dirname, 'index.html'));
-		self.parent.addBrowserView(self.view);
+		self.parent.contentView.addChildView(self.view);
 
 		let _resize = () => {
 			resizeView(self);
 		};
 		resizeView(self);
 
 		let _close = (_event, source) => {
+			//'screen:x:0' -> whole screen
+			//'window:x:0' -> small window
+			// show captured source in a new view? Maybe reuse the same view, but make it smaller? probably best a new "file"/view
 			closeView({ view: self, _resize, _close, source });
 		};
 
@@ -135,12 +106,4 @@ function resizeView(view) {
 	}, 0);
 }
 
-function createScreenRequestHandler() {
-	ipcMain.once('get-screensizes-request', event => {
-		event.reply('get-screensizes-response', resolutions.map(resolution => {
-			return Object.assign({}, resolution);
-		}));
-	});
-}
-
 module.exports = { StreamSelector };

app/streamSelector/preload.js

@@ -0,0 +1,20 @@
+const {
+    contextBridge,
+    ipcRenderer
+} = require("electron");
+
+// Expose protected methods that allow the renderer process to use
+// the ipcRenderer without exposing the entire object
+contextBridge.exposeInMainWorld(
+    "api", {
+        selectedSource: (args) => {
+            return ipcRenderer.send('selected-source', args);
+        },
+        closeView: () => {
+            return ipcRenderer.send('close-view');
+        },
+        desktopCapturerGetSources: (args) => {
+            return ipcRenderer.invoke('desktop-capturer-get-sources', args);
+        },
+    }
+);

com.github.IsmaelMartinez.teams_for_linux.appdata.xml

@@ -14,14 +14,24 @@
 	<url type="bugtracker">https://github.com/IsmaelMartinez/teams-for-linux/issues</url>
 	<launchable type="desktop-id">com.github.IsmaelMartinez.teams_for_linux.desktop</launchable>
 	<releases>
+		<release version="1.12.0" date="2024-11-15">
+			<description>
+				<ul>
+					<li>Improving security on the streamSelector to work without the need of contentIsolation</li>
+					<li>Move from BaseView (deprecated), to WebContentsView in the streamSelector</li>
+					<li>Updating vsconfig to allow for electron and chrome debugging</li>
+				</ul>
+			</description>
+		</release>
 		<release version="1.11.5" date="2024-11-11">
 			<description>
 				<ul>
 					<li>Change the default value of frame to true</li>
 					<li>Package updates including moving to electron 33.2.0</li>
 				</ul>
 			</description>
-		</release><release version="1.11.4" date="2024-11-09">
+		</release>
+		<release version="1.11.4" date="2024-11-09">
 			<description>
 				<ul>
 					<li>Allow frameless window by using the config 'frame' option</li>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "teams-for-linux",
-  "version": "1.11.5",
+  "version": "1.12.0",
   "main": "app/index.js",
   "description": "Unofficial client for Microsoft Teams for Linux",
   "homepage": "https://github.com/IsmaelMartinez/teams-for-linux",