2

Here's the scenario, I have 2 Urls, let's say

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

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

In Url 1 is where the user can only share the screen and needs to be shared or broadcasted to the other url page which is Url 2 within the video element of that page. Is this possible? Currently, I'm using webRTC and signalR to do this task. At the moment, I got an error which is coming from this Url(http://mydomain/students/workspace) within the signalR on-listener function after it was invoked and the video element in the url(http://mydomain/students/workspace) page remains in black screen.

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)'.

For more details here are some codes I used:

C# Hub:

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

Please help share your thoughts if you know how to resolve this type of problem. Thank u.

timmack
  • 590
  • 2
  • 12
  • 43
  • Your `stream` does not seem to conform to the type supported by `srcObject`. Please check [this link](https://velog-io.translate.goog/@gcodaily/230102-ERROR-srcObject%EA%B0%80-%EC%9B%90%ED%95%98%EB%8A%94-%EC%9C%A0%ED%98%95-MediaSourceHandle-%EB%98%90%EB%8A%94-MediaStream?_x_tr_sl=ko&_x_tr_tl=en&_x_tr_hl=en&_x_tr_pto=sc), it might help you. – Chen Mar 02 '23 at 09:41
  • @Chen...based on the link it uses getUserMedia instead of getDisplayMedia. Do I still need to use RTCPeerConnection as well? – timmack Mar 03 '23 at 01:54
  • when I tried to log the stream object from the connection.on function, it will return a null value. Any thoughts? – timmack Mar 03 '23 at 02:49

0 Answers0