armcord/src/preload/capturer.ts

153 lines
4.1 KiB
TypeScript
Raw Normal View History

2021-11-07 14:12:42 +00:00
//Fixed context isolation version https://github.com/getferdi/ferdi/blob/develop/src/webview/screenshare.ts
//original https://github.com/electron/electron/issues/16513#issuecomment-602070250
2021-12-24 21:56:49 +00:00
import { desktopCapturer } from 'electron';
import {addStyle, addScript} from '../utils';
2021-11-07 14:12:42 +00:00
const CANCEL_ID = 'desktop-capturer-selection__cancel';
2021-12-24 21:56:49 +00:00
export async function getDisplayMediaSelector() {
2021-11-07 14:12:42 +00:00
const sources = await desktopCapturer.getSources({
types: ['screen', 'window'],
});
return `<div class="desktop-capturer-selection__scroller">
<ul class="desktop-capturer-selection__list">
${sources
.map(
({ id, name, thumbnail }) => `
<li class="desktop-capturer-selection__item">
<button class="desktop-capturer-selection__btn" data-id="${id}" title="${name}">
<img class="desktop-capturer-selection__thumbnail" src="${thumbnail.toDataURL()}" />
<span class="desktop-capturer-selection__name">${name}</span>
</button>
</li>
`,
)
.join('')}
<li class="desktop-capturer-selection__item">
<button class="desktop-capturer-selection__btn" data-id="${CANCEL_ID}" title="Cancel">
<span class="desktop-capturer-selection__name desktop-capturer-selection__name--cancel">Cancel</span>
</button>
</li>
</ul>
</div>`;
}
2021-11-07 14:12:42 +00:00
const screenShareCSS = `
.desktop-capturer-selection {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(30,30,30,.75);
color: #FFFFFF;
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: #2C2F33;
text-align: left;
@media (prefers-reduced-motion: no-preference) {
transition: background-color .15s, box-shadow .15s, color .15s;
}
2021-11-07 14:12:42 +00:00
color: #dedede;
}
.desktop-capturer-selection__btn:hover,
.desktop-capturer-selection__btn:focus {
background: #7289DA;
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;
color: white;
text-overflow: ellipsis;
text-align: center;
overflow: hidden;
}
.desktop-capturer-selection__name--cancel {
margin: auto 0;
}
`;
2021-11-07 14:12:42 +00:00
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.electron.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: {
2021-11-07 14:12:42 +00:00
chromeMediaSource: 'desktop',
chromeMediaSourceId: id,
},
},
});
resolve(stream);
}
2021-11-07 14:12:42 +00:00
} catch (err) {
reject(err);
} finally {
selectionElem.remove();
}
});
});
2021-11-07 14:12:42 +00:00
} catch (err) {
reject(err);
}
});
`;
document.addEventListener("DOMContentLoaded", function(event) {
2021-12-24 21:56:49 +00:00
addScript(screenShareJS);
addStyle(screenShareCSS);
2021-11-07 14:12:42 +00:00
});