如何在屏幕共享HTML页面中应用signalR.js

问题描述

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

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.@R_27_4045@ion)  
        .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'],

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

非常感谢您的帮助！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

blazor screensharing