From 92d845adc3c07bcea290eb6fefe0a998cd8f7a98 Mon Sep 17 00:00:00 2001
From: André Oliveira <37463445+SpecialAro@users.noreply.github.com>
Date: Thu, 2 May 2024 17:38:48 +0100
Subject: fix: screenshare feature not working on Teams (#1733)
---
src/webview/screenshare.ts | 154 +++++++++------------------------------------
1 file changed, 28 insertions(+), 126 deletions(-)
(limited to 'src/webview/screenshare.ts')
diff --git a/src/webview/screenshare.ts b/src/webview/screenshare.ts
index e631ce52f..521f95bd6 100644
--- a/src/webview/screenshare.ts
+++ b/src/webview/screenshare.ts
@@ -1,139 +1,41 @@
import { ipcRenderer } from 'electron';
+import { v4 as uuidV4 } from 'uuid';
-const CANCEL_ID = 'desktop-capturer-selection__cancel';
+const debug = require('../preload-safe-debug')('Ferdium:Screenshare');
export async function getDisplayMediaSelector() {
- const sources = await ipcRenderer.invoke('get-desktop-capturer-sources');
- return `
`;
-}
+ return new Promise((resolve, reject) => {
+ const trackerId = uuidV4();
+ debug('New screenshare request', trackerId);
-export const screenShareCss = `
-.desktop-capturer-selection {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100vh;
- background: rgba(30,30,30,.75);
- color: #fff;
- z-index: 10000000;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-.desktop-capturer-selection__scroller {
- width: 100%;
- max-height: 100vh;
- overflow-y: auto;
-}
-.desktop-capturer-selection__list {
- max-width: calc(100% - 100px);
- margin: 50px;
- padding: 0;
- display: flex;
- flex-wrap: wrap;
- list-style: none;
- overflow: hidden;
- justify-content: center;
-}
-.desktop-capturer-selection__item {
- display: flex;
- margin: 4px;
-}
-.desktop-capturer-selection__btn {
- display: flex;
- flex-direction: column;
- align-items: stretch;
- width: 145px;
- margin: 0;
- border: 0;
- border-radius: 3px;
- padding: 4px;
- background: #252626;
- text-align: left;
- @media (prefers-reduced-motion: no-preference) {
- transition: background-color .15s, box-shadow .15s, color .15s;
- }
- color: #dedede;
-}
-.desktop-capturer-selection__btn:hover,
-.desktop-capturer-selection__btn:focus {
- background: rgba(98,100,167,.8);
- box-shadow: 0 0 4px rgba(0,0,0,0.45), 0 0 2px rgba(0,0,0,0.25);
- color: #fff;
-}
-.desktop-capturer-selection__thumbnail {
- width: 100%;
- height: 81px;
- object-fit: cover;
-}
-.desktop-capturer-selection__name {
- margin: 6px 0;
- white-space: nowrap;
- text-overflow: ellipsis;
- text-align: center;
- overflow: hidden;
-}
-.desktop-capturer-selection__name--cancel {
- margin: auto 0;
+ ipcRenderer.sendToHost('load-available-displays', {
+ trackerId,
+ });
+
+ ipcRenderer.once(`selected-media-source:${trackerId}`, (_e, data) => {
+ if (data.mediaSourceId === 'desktop-capturer-selection__cancel') {
+ return reject(new Error('Cancelled by user'));
+ }
+
+ return resolve(data.mediaSourceId);
+ });
+ });
}
-`;
export const screenShareJs = `
window.navigator.mediaDevices.getDisplayMedia = () => new Promise(async (resolve, reject) => {
try {
- const selectionElem = document.createElement('div');
- selectionElem.classList = ['desktop-capturer-selection'];
- selectionElem.innerHTML = await window.ferdium.getDisplayMediaSelector();
- document.body.appendChild(selectionElem);
-
- document
- .querySelectorAll('.desktop-capturer-selection__btn')
- .forEach((button) => {
- button.addEventListener('click', async () => {
- try {
- const id = button.getAttribute('data-id');
- if (id === '${CANCEL_ID}') {
- reject(new Error('Cancelled by user'));
- } else {
- const stream = await window.navigator.mediaDevices.getUserMedia({
- audio: false,
- video: {
- mandatory: {
- chromeMediaSource: 'desktop',
- chromeMediaSourceId: id,
- },
- },
- });
- resolve(stream);
- }
- } catch (err) {
- reject(err);
- } finally {
- selectionElem.remove();
- }
- });
- });
+ const displayId = await window.ferdium.getDisplayMediaSelector();
+ const stream = await window.navigator.mediaDevices.getUserMedia({
+ audio: false,
+ video: {
+ mandatory: {
+ chromeMediaSource: 'desktop',
+ chromeMediaSourceId: displayId,
+ },
+ },
+ });
+ resolve(stream);
} catch (err) {
reject(err);
}
--
cgit v1.2.3-70-g09d2