How to broadcast media stream using SignalR

Question

We are trying to build .net core app to share screen or window. But it doesn't work.

The code is like this:

Html file:

<div class="container">
    <div class="row p-1">
        <h1>WebRTC Screen Sharing Demo</h1>
        <hr>
        <button onclick="captureScreen()">Capture</button>
        <video id="local-video" muted autoplay></video>
    </div>
</div>
<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="~/js/stream.js"></script>

Stream.js:

"use strict";
var connection = new signalR.HubConnectionBuilder().withUrl("/streamHub").build();
connection.start().then(function () {
    console.log("Connection started");
    }).catch(function (err) {
        return console.error(err.toString());
    });

connection.on("ClientReceiveStream", function (stream) {
    document.getElementById("local-video").srcObject = stream; // I need to set the video source to the media stream.
});

async function captureScreen() {
    let mediaStream = null;
    try 
    {
        mediaStream = await navigator.mediaDevices.getDisplayMedia({
            video:
            {
                cursor: "always"
            },
            audio: false
            });
    //Im trying to send the media stream to the server
        connection.invoke("ServerSendStream", mediaStream).catch(function (err) 
        {
            return console.error(err.toString());
        });
    } catch (ex) {
        console.log("Error occurred", ex);
    }
}

The hub:

public class StreamHub : Hub
{

    public async Task ServerSendStream(object mediaStream) // I need to get the media stream here
    {
        await Clients.All.SendAsync("ClientReceiveStream", mediaStream);
    }
}

How can we send this mediaStream object to the server, and then broadcast it?

Answer 1

There is no way to broadcast a stream to a client. The client needs to ask the server for a stream of data.

See the docs on how to do this: https://learn.microsoft.com/as.net/core/signalr/streaming?view=as.netcore-7.0#server-to-client-streaming-2

And when consuming the data on the client-side, you'll need to create some sort of stream and add the data to it, probably similar to the example in https://developer.mozilla.org/en-US/docs/Web/API/MediaSource