armcord/src/preload/capturer.ts

91 lines
3.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
2022-03-04 17:53:18 +00:00
import {ipcRenderer} from "electron";
import {addStyle, addScript} from "../utils";
2022-07-11 19:42:35 +00:00
import fs from "fs";
import path from "path";
2022-02-26 21:26:16 +00:00
const desktopCapturer = {
2022-03-04 17:53:18 +00:00
getSources: (opts: any) => ipcRenderer.invoke("DESKTOP_CAPTURER_GET_SOURCES", opts)
2022-02-26 21:26:16 +00:00
};
2022-03-04 17:53:18 +00:00
const CANCEL_ID = "desktop-capturer-selection__cancel";
2021-12-24 21:56:49 +00:00
2022-03-04 16:30:23 +00:00
interface IPCSources {
2022-03-04 17:53:18 +00:00
id: string;
name: string;
thumbnail: HTMLCanvasElement;
2022-03-04 16:30:23 +00:00
}
2021-12-24 21:56:49 +00:00
export async function getDisplayMediaSelector() {
2022-03-04 17:53:18 +00:00
const sources: IPCSources[] = await desktopCapturer.getSources({
types: ["screen", "window"]
});
return `<div class="desktop-capturer-selection__scroller">
2021-11-07 14:12:42 +00:00
<ul class="desktop-capturer-selection__list">
${sources
2022-03-04 17:53:18 +00:00
.map(
({id, name, thumbnail}) => `
2021-11-07 14:12:42 +00:00
<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>
2022-03-04 17:53:18 +00:00
`
)
.join("")}
2021-11-07 14:12:42 +00:00
<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 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.armcord.getDisplayMediaSelector();
2021-11-07 14:12:42 +00:00
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);
}
});
`;
2022-03-04 17:53:18 +00:00
document.addEventListener("DOMContentLoaded", function () {
addScript(screenShareJS);
2022-07-11 19:42:35 +00:00
const screenshareCss = path.join(__dirname, "../", "/content/css/screenshare.css");
addStyle(fs.readFileSync(screenshareCss, "utf8"));
2022-03-04 17:53:18 +00:00
console.log("Capturer injected.");
2021-11-07 14:12:42 +00:00
});