MediaDevices

@inject Bit.Butil.MediaDevices mediaDevices

var supported = await mediaDevices.IsSupported();

var devices = await mediaDevices.EnumerateDevices();

foreach (var device in devices)
{
    // device.Kind: "audioinput" | "audiooutput" | "videoinput"
    // device.Label: blank until permission is granted
    Console.WriteLine($"{device.Kind}: {device.Label}");
}

private MediaStreamHandle? _stream;
private ElementReference _preview;

_stream = await mediaDevices.GetUserMedia(audio: true, video: true);
if (_stream is not null)
{
    await _stream.AttachTo(_preview);   // <video @ref="_preview" autoplay playsinline muted />
    await _stream.SetEnabled(false);    // pause all tracks
    await _stream.SetEnabled(true);     // resume
    await _stream.DisposeAsync();       // stop tracks, release the camera light
}

// prefer the front camera at 1280x720:
var stream = await mediaDevices.GetUserMedia(
    audio: false,
    video: true,
    videoConstraints: new
    {
        width = new { ideal = 1280 },
        height = new { ideal = 720 },
        facingMode = "user",
    });

// pin an exact input from EnumerateDevices:
var mic = await mediaDevices.GetUserMedia(
    audio: true,
    audioConstraints: new { deviceId = new { exact = someDeviceId } });

@implements IAsyncDisposable
@inject Bit.Butil.MediaDevices mediaDevices

<video @ref="_screenPreview" autoplay playsinline muted></video>

@* Must be a user gesture: the picker is refused without one. *@
<button @onclick="Share">Share a screen</button>

@code {
    private ElementReference _screenPreview;
    private MediaStreamHandle? _screen;

    private async Task Share()
    {
        _screen = await mediaDevices.GetDisplayMedia(
            audio: false,
            options: new DisplayMediaOptions
            {
                DisplaySurface = "monitor",     // pre-select a whole screen
                SelfBrowserSurface = "exclude", // don't offer this tab (avoids the hall of mirrors)
            },
            // The browser's own "stop sharing" bar ends it without telling the page anything else.
            onEnded: () => InvokeAsync(() =>
            {
                _screen = null;
                StateHasChanged();
            }));

        if (_screen is not null)
        {
            await _screen.AttachTo(_screenPreview);

            // what the user actually picked, not what was asked for:
            var settings = await mediaDevices.GetDisplaySettings(_screen);
            // settings.DisplaySurface: "monitor" | "window" | "browser"
            // settings.Width / Height / FrameRate
        }
    }

    public async ValueTask DisposeAsync()
    {
        if (_screen is not null) await _screen.DisposeAsync();
    }
}