signalr - 如何在屏幕共享 html 页面中应用 signalR.js

Question

我正在开发一个需要共享屏幕的 Blazor 应用程序。我找到了如何在 Razor 页面中读取和显示屏幕，一旦它接收到来自客户端的信号消息，客户端是一个电子应用程序。这是电子应用程序的代码。

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));  
}  

但我试图找出这些代码行的等价物：

const { desktopCapturer } = require('electron')

const signalR = require('@microsoft/signalr')

desktopCapturer.getSources({ type: ['screen'], thumbnailSize: { width: screenWidth, height: screenHeight } },
    

在使用 signalR.js 时的 HTML 页面中。

非常感谢您的帮助！

标签： signalrblazorscreensharing