How to apply signalR.js in a Screen sharing html page - signalr

Question

I am working on a Blazor application which needs the screen to be shared. I found how to read and display the screen in the Razor page, once it receives the signaled message from the client, which is an Electron application. This is the code for the Electron Application.
const { desktopCapturer } = require('electron')
const signalR = require('#microsoft/signalr')
let connection;
let subject;
let screenCastTimer;
let isStreaming = false;
const framepersecond = 10;
const screenWidth = 1280;
const screenHeight = 800;
async function initializeSignalR() {
connection = new signalR.HubConnectionBuilder()
.withUrl("http://localhost:51064")
.configureLogging(signalR.LogLevel.Information)
.build();
connection.on("NewViewer", function () {
if (isStreaming === false)
startStreamCast()
});
connection.on("NoViewer", function () {
if (isStreaming === true)
stopStreamCast()
});
await connection.start().then(function () {
console.log("connected");
});
return connection;
}
initializeSignalR();
function CaptureScreen() {
return new Promise(function (resolve, reject) {
desktopCapturer.getSources({ type: ['screen'], thumbnailSize: { width: screenWidth, height: screenHeight } },
(error, sources) => {
if (error) console.error(error);
for (const source of sources) {
if (source.name === 'Entire screen') {
resolve(source.thumbnail.toDataURL())
}
}
})
})
}
const agentName = document.getElementById('agentName');
const startCastBtn = document.getElementById('startCast');
const stopCastBtn = document.getElementById('stopCast');
stopCastBtn.setAttribute("disabled", "disabled");
startCastBtn.onclick = function () {
startCastBtn.setAttribute("disabled", "disabled");
stopCastBtn.removeAttribute("disabled");
connection.send("AddScreenCastAgent", agentName.value);
};
function startStreamCast() {
isStreaming = true;
subject = new signalR.Subject();
connection.send("StreamCastData", subject, agentName.value);
screenCastTimer = setInterval(function () {
try {
CaptureScreen().then(function (data) {
subject.next(data);
});
} catch (e) {
console.log(e);
}
}, Math.round(1000 / framepersecond));
}
But I am trying to figure out the equivalent of these lines of code:
const { desktopCapturer } = require('electron')
const signalR = require('#microsoft/signalr')
desktopCapturer.getSources({ type: ['screen'], thumbnailSize: { width: screenWidth, height: screenHeight } },
in an HTML page when signalR.js is used.
Help would be very much appreciated !