WebRtc

@inject Bit.Butil.WebRtc webRtc

var supported = await webRtc.IsSupported();

var a = await webRtc.CreatePeerConnection(
    iceServers: [new RtcIceServer { Urls = ["stun:stun.l.google.com:19302"] }],
    onIceCandidate: json => SendToTheOtherPeer(json),
    onConnectionState: state => InvokeAsync(StateHasChanged));

var channel = await a!.CreateDataChannel("chat");   // before the offer

var offer = await a.CreateOffer();
await a.SetLocalDescription(offer!);
// ... send offer.Sdp to the other peer, get an answer back ...
await a.SetRemoteDescription(answer);

@code {
    // The peer connection from the section above. A data channel has to be created before the offer
    // is made: it is part of what the offer describes.
    private PeerConnectionHandle? a;
    private RtcDataChannelHandle? channel;

    private async Task Chat()
    {
        channel = await a!.CreateDataChannel("chat", ordered: false, maxRetransmits: 0);
        channel!.Listen(
            onMessage: m => InvokeAsync(StateHasChanged),
            onOpen: () => { /* now it can send */ },
            onClose: () => { });

        await channel.SendText("hello, other browser");
        await channel.SendBytes([1, 2, 3, 4]);
    }
}

@inject Bit.Butil.WebRtc webRtc
@inject Bit.Butil.BroadcastChannel broadcastChannel

@code {
    private ButilSubscription? _signalling;
    private PeerConnectionHandle? _peer;
    private RtcDataChannelHandle? _channel;

    private async Task Connect()
    {
        // Signalling: anything that reaches the other side will do - WebRTC does not specify it.
        // Here, other windows of this browser.
        _signalling = await broadcastChannel.Subscribe("butil-webrtc-demo", OnSignal);

        _peer = await webRtc.CreatePeerConnection(
            iceServers: [new RtcIceServer { Urls = ["stun:stun.l.google.com:19302"] }],
            onIceCandidate: json => InvokeAsync(() => broadcastChannel.Post("butil-webrtc-demo",
                                                        new { type = "candidate", candidate = json }).AsTask()),
            onRemoteChannel: channel => { _channel = channel; channel.Listen(onMessage: Show); });
    }

    // Host, once the other window says it is there:
    private async Task Offer()
    {
        var offer = await _peer!.CreateOffer();
        await _peer.SetLocalDescription(offer!);
        await broadcastChannel.Post("butil-webrtc-demo", new { type = "offer", sdp = offer!.Sdp });
    }

    // Joiner, on that offer:
    private async Task Answer(string sdp)
    {
        await _peer!.SetRemoteDescription(new RtcSessionDescription("offer", sdp, null));
        var answer = await _peer.CreateAnswer();
        await _peer.SetLocalDescription(answer!);
        await broadcastChannel.Post("butil-webrtc-demo", new { type = "answer", sdp = answer!.Sdp });
    }
}

@code {
    private PeerConnectionHandle? a;   // a connected peer connection

    private async Task Inspect()
    {
        var stats = await a!.GetStats();

        // The nominated candidate pair is the route actually carrying traffic, out of everything ICE
        // tried.
        var path = stats.FirstOrDefault(s => s.Type == "candidate-pair" && s.Values.GetValueOrDefault("nominated") == "true");
        var rtt = path?.Values.GetValueOrDefault("currentRoundTripTime");
    }
}

@inject Bit.Butil.MediaDevices mediaDevices

<video @ref="_remoteVideo" autoplay playsinline></video>

@code {
    private ElementReference _remoteVideo;
    private PeerConnectionHandle? a;   // the sending side
    private PeerConnectionHandle? b;   // the receiving side

    private async Task SendCamera()
    {
        var stream = await mediaDevices.GetUserMedia(audio: false, video: true);

        // Before the offer: the tracks are part of what the offer describes, so adding them after it
        // needs a second round of negotiation.
        await a!.AddTracksFrom(stream!);

        // on the other side:
        await b!.AttachRemoteMedia(_remoteVideo);
    }
}