MediaDevices
How to use the MediaDevices class of the bit Butil?
Usage
Inject the MediaDevices class, enumerate the available cameras and microphones,
request a live stream, and attach it to a video element:
@inject Bit.Butil.MediaDevices mediaDevices
@code {
var devices = await mediaDevices.EnumerateDevices();
var stream = await mediaDevices.GetUserMedia(audio: true, video: true);
await stream.AttachTo(videoElement);
}Methods
The MediaDevices class wraps
navigator.mediaDevices.
IsSupported:
Returns whether navigator.mediaDevices is available in the current browser (MDN).
EnumerateDevices:
Lists all input/output media devices. Labels may be empty until the user has granted permission to a matching input (MDN).
GetUserMedia / AttachTo / SetEnabled:
Requests camera and/or microphone access and returns a MediaStreamHandle (or null when the user denies the prompt). Attach the stream to a video element with AttachTo, pause or resume its tracks with SetEnabled, and stop the stream by disposing the handle (MDN).
IsSupported:
Returns whether navigator.mediaDevices is available in the current browser (MDN).
@inject Bit.Butil.MediaDevices mediaDevices
<BitButton OnClick="IsSupported">IsSupported</BitButton>
<div>Is supported: @isSupported</div>
@code {
private string? isSupported;
private async Task IsSupported()
{
isSupported = (await mediaDevices.IsSupported()).ToString();
}
}EnumerateDevices:
Lists all input/output media devices. Labels may be empty until the user has granted permission to a matching input (MDN).
@inject Bit.Butil.MediaDevices mediaDevices
<BitButton OnClick="EnumerateDevices">EnumerateDevices</BitButton>
<div>Devices: @devices</div>
@code {
private string? devices;
private async Task EnumerateDevices()
{
var result = await mediaDevices.EnumerateDevices();
devices = string.Join(", ", result.Select(d => $"{d.Kind}: {d.Label}"));
}
}GetUserMedia / AttachTo / SetEnabled:
Requests camera and/or microphone access and returns a MediaStreamHandle (or null when the user denies the prompt). Attach the stream to a video element with AttachTo, pause or resume its tracks with SetEnabled, and stop the stream by disposing the handle (MDN).
@inject Bit.Butil.MediaDevices mediaDevices
<BitCheckbox @bind-Value="requestAudio" Label="Audio" />
<BitCheckbox @bind-Value="requestVideo" Label="Video" />
<BitButton OnClick="StartStream">Start stream</BitButton>
<BitButton OnClick="ToggleEnabled">Toggle enabled</BitButton>
<BitButton OnClick="StopStream">Stop stream</BitButton>
<video @ref="preview" autoplay playsinline muted></video>
@code {
private bool requestAudio = true;
private bool requestVideo = true;
private bool enabled = true;
private ElementReference preview;
private MediaStreamHandle? stream;
private async Task StartStream()
{
await StopStream();
stream = await mediaDevices.GetUserMedia(requestAudio, requestVideo);
if (stream is null) return;
await stream.AttachTo(preview);
enabled = true;
}
private async Task ToggleEnabled()
{
if (stream is null) return;
enabled = !enabled;
await stream.SetEnabled(enabled);
}
private async Task StopStream()
{
if (stream is null) return;
await stream.DisposeAsync();
stream = null;
}
}