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