diff options
Diffstat (limited to 'src/webview/screenshare.js')
-rw-r--r-- | src/webview/screenshare.js | 81 |
1 files changed, 35 insertions, 46 deletions
diff --git a/src/webview/screenshare.js b/src/webview/screenshare.js index 84d2e1e95..ab548a625 100644 --- a/src/webview/screenshare.js +++ b/src/webview/screenshare.js | |||
@@ -2,6 +2,27 @@ import { desktopCapturer } from 'electron'; | |||
2 | 2 | ||
3 | const CANCEL_ID = 'desktop-capturer-selection__cancel'; | 3 | const CANCEL_ID = 'desktop-capturer-selection__cancel'; |
4 | 4 | ||
5 | export async function getDisplayMediaSelector() { | ||
6 | const sources = await desktopCapturer.getSources({ types: ['screen', 'window'] }); | ||
7 | return `<div class="desktop-capturer-selection__scroller"> | ||
8 | <ul class="desktop-capturer-selection__list"> | ||
9 | ${sources.map(({ id, name, thumbnail }) => ` | ||
10 | <li class="desktop-capturer-selection__item"> | ||
11 | <button class="desktop-capturer-selection__btn" data-id="${id}" title="${name}"> | ||
12 | <img class="desktop-capturer-selection__thumbnail" src="${thumbnail.toDataURL()}" /> | ||
13 | <span class="desktop-capturer-selection__name">${name}</span> | ||
14 | </button> | ||
15 | </li> | ||
16 | `).join('')} | ||
17 | <li class="desktop-capturer-selection__item"> | ||
18 | <button class="desktop-capturer-selection__btn" data-id="${CANCEL_ID}" title="Cancel"> | ||
19 | <span class="desktop-capturer-selection__name desktop-capturer-selection__name--cancel">Cancel</span> | ||
20 | </button> | ||
21 | </li> | ||
22 | </ul> | ||
23 | </div>`; | ||
24 | } | ||
25 | |||
5 | export const screenShareCss = ` | 26 | export const screenShareCss = ` |
6 | .desktop-capturer-selection { | 27 | .desktop-capturer-selection { |
7 | position: fixed; | 28 | position: fixed; |
@@ -72,38 +93,12 @@ export const screenShareCss = ` | |||
72 | } | 93 | } |
73 | `; | 94 | `; |
74 | 95 | ||
75 | // Patch getDisplayMedia for screen sharing | 96 | export const screenShareJs = ` |
76 | window.navigator.mediaDevices.getDisplayMedia = () => async (resolve, reject) => { | 97 | window.navigator.mediaDevices.getDisplayMedia = () => new Promise(async (resolve, reject) => { |
77 | try { | 98 | try { |
78 | const sources = await desktopCapturer.getSources({ | ||
79 | types: ['screen', 'window'], | ||
80 | }); | ||
81 | |||
82 | const selectionElem = document.createElement('div'); | 99 | const selectionElem = document.createElement('div'); |
83 | selectionElem.classList = 'desktop-capturer-selection'; | 100 | selectionElem.classList = ['desktop-capturer-selection']; |
84 | selectionElem.innerHTML = ` | 101 | selectionElem.innerHTML = await window.ferdi.getDisplayMediaSelector(); |
85 | <div class="desktop-capturer-selection__scroller"> | ||
86 | <ul class="desktop-capturer-selection__list"> | ||
87 | ${sources | ||
88 | .map( | ||
89 | ({ id, name, thumbnail }) => ` | ||
90 | <li class="desktop-capturer-selection__item"> | ||
91 | <button class="desktop-capturer-selection__btn" data-id="${id}" title="${name}"> | ||
92 | <img class="desktop-capturer-selection__thumbnail" src="${thumbnail.toDataURL()}" /> | ||
93 | <span class="desktop-capturer-selection__name">${name}</span> | ||
94 | </button> | ||
95 | </li> | ||
96 | `, | ||
97 | ) | ||
98 | .join('')} | ||
99 | <li class="desktop-capturer-selection__item"> | ||
100 | <button class="desktop-capturer-selection__btn" data-id="${CANCEL_ID}" title="Cancel"> | ||
101 | <span class="desktop-capturer-selection__name desktop-capturer-selection__name--cancel">Cancel</span> | ||
102 | </button> | ||
103 | </li> | ||
104 | </ul> | ||
105 | </div> | ||
106 | `; | ||
107 | document.body.appendChild(selectionElem); | 102 | document.body.appendChild(selectionElem); |
108 | 103 | ||
109 | document | 104 | document |
@@ -112,25 +107,18 @@ window.navigator.mediaDevices.getDisplayMedia = () => async (resolve, reject) => | |||
112 | button.addEventListener('click', async () => { | 107 | button.addEventListener('click', async () => { |
113 | try { | 108 | try { |
114 | const id = button.getAttribute('data-id'); | 109 | const id = button.getAttribute('data-id'); |
115 | if (id === CANCEL_ID) { | 110 | if (id === '${CANCEL_ID}') { |
116 | reject(new Error('Cancelled by user')); | 111 | reject(new Error('Cancelled by user')); |
117 | } else { | 112 | } else { |
118 | const mediaSource = sources.find((source) => source.id === id); | 113 | const stream = await window.navigator.mediaDevices.getUserMedia({ |
119 | if (!mediaSource) { | 114 | audio: false, |
120 | throw new Error(`Source with id ${id} does not exist`); | 115 | video: { |
121 | } | 116 | mandatory: { |
122 | 117 | chromeMediaSource: 'desktop', | |
123 | const stream = await window.navigator.mediaDevices.getUserMedia( | 118 | chromeMediaSourceId: id, |
124 | { | ||
125 | audio: false, | ||
126 | video: { | ||
127 | mandatory: { | ||
128 | chromeMediaSource: 'desktop', | ||
129 | chromeMediaSourceId: mediaSource.id, | ||
130 | }, | ||
131 | }, | 119 | }, |
132 | }, | 120 | }, |
133 | ); | 121 | }); |
134 | resolve(stream); | 122 | resolve(stream); |
135 | } | 123 | } |
136 | } catch (err) { | 124 | } catch (err) { |
@@ -143,4 +131,5 @@ window.navigator.mediaDevices.getDisplayMedia = () => async (resolve, reject) => | |||
143 | } catch (err) { | 131 | } catch (err) { |
144 | reject(err); | 132 | reject(err); |
145 | } | 133 | } |
146 | }; | 134 | }); |
135 | `; | ||