如何使用 webRTC 和 signalR 将屏幕从一个页面共享到另一个网页?

问题描述 投票:0回答:0

这是场景,我有 2 个 Urls,比方说

Url 1 - http://mydomain/teacher/dashboard

Url 2 - http://mydomain/students/workspace

Url 1中,用户只能共享屏幕,需要共享或广播到另一个url页面,即该页面视频元素中的Url 2。这可能吗?目前,我正在使用 webRTCsignalR 来完成这项任务。目前,我收到一个错误,该错误来自 signalR on-listener 函数中的这个 Url(http://mydomain/students/workspace) 在它被调用后和 url 中的视频元素( http://mydomain/students/workspace) 页面一直黑屏

Error: A callback for the method 'clientsharedscreen' threw error 'TypeError: Failed to set the 'srcObject' property on 'HTMLMediaElement': The provided value is not of type '(MediaSourceHandle or MediaStream)'.

有关更多详细信息,这是我使用的一些代码:

C# 中心:

// Live Screen Sharing...
        public async Task ServerSharedScreen(int classCode, object share)
        {
            await Clients.Others.SendAsync("ClientSharedScreen", classCode, share);
        }

HTML:

<div id="welcome-class-div3" class="col-md-12 col-lg-12 col-xl-12 col-sm-12 col-xs-12">
     <video id="share-screen-container" autoplay playsinline muted></video>
</div>

JS 与 signalR:

$('#share-screen-btn').click(function () {
    const options = { audio: true, video: true };
    const displaySurface = 'default';
    if (displaySurface !== 'default') {
        options.video = { displaySurface };
    }
    navigator.mediaDevices.getDisplayMedia(options)
        .then(handleSuccess, handleError);
});

function handleSuccess(stream) {
    connection.invoke("ServerSharedScreen", clsCode, stream)
        .catch(function (err) {
            return console.error(err.toString());
        });
}

 // Screen-sharing...
    connection.on("ClientSharedScreen", function (classCode2, stream) {
        if (classCode2 == classCode) {          
            const video = document.querySelector('video');
            video.srcObject = stream;           
        }
    });

如果您知道如何解决此类问题,请帮助分享您的想法。 谢谢你

javascript asp.net-core signalr webrtc
© www.soinside.com 2019 - 2024. All rights reserved.