<div id="desktop-capturer-sources"></div>
<button id="get-sources">Get Sources</button>
#desktop-capturer-sources {
box-shadow: #c4c4c4 2px 4px 5px 2px;
.getElementById("get-sources")
.addEventListener("click", () => getSources());
const getSources = async () => {
const sources = await ...;
const container = document.getElementById("desktop-capturer-sources");
sources.forEach((source) => {
const el = document.createElement("div");
el.className = "desktop-source";
const img = document.createElement("img");
img.src = source.thumbnail;
// We'll create the getStream func later
el.addEventListener("click", () => getStream(source.id));
container.appendChild(el);