WebCodecs

@inject Bit.Butil.WebCodecs webCodecs

var isSupported = await webCodecs.IsSupported();

var ok = await webCodecs.IsConfigSupported(new VideoEncoderConfig
{
    Codec = "vp8",
    Width = 640,
    Height = 480,
    Bitrate = 1_000_000,
    Framerate = 30,
    LatencyMode = "realtime"
});

var encoder = await webCodecs.CreateVideoEncoder(
    new VideoEncoderConfig { Codec = "vp8", Width = 320, Height = 240, Bitrate = 500_000, Framerate = 10 },
    onChunk: chunk =>
    {
        // mux it, send it, store it - the chunk is yours
        Console.WriteLine($"{chunk.Type} {chunk.Data.Length} bytes at {chunk.Timestamp}us");
    },
    onError: message => Console.WriteLine(message));

await using var frame = await webCodecs.CreateFrame(rgbaBytes, "RGBA", 320, 240, timestamp: 0);
await encoder!.Encode(frame!, keyFrame: true);

await encoder.Flush();   // an encoder holds frames back; this is what makes it hand them over

@inject Bit.Butil.WebCodecs webCodecs

<canvas @ref="canvasElement" width="640" height="480"></canvas>

@code {
    private ElementReference canvasElement;

    private async Task Play(EncodedVideoChunk firstChunk, IEnumerable<EncodedVideoChunk> chunks)
    {
        var decoder = await webCodecs.CreateVideoDecoder(
            new VideoDecoderConfig { Codec = "vp8", Description = firstChunk.DecoderDescription },
            onFrame: async frame =>
            {
                // onFrame is an Action, so this lambda is async void: a throw would be unobserved
                try { await frame.DrawTo(canvasElement); }
                finally { await frame.DisposeAsync(); }   // required - the decoder stalls without it
            });

        foreach (var chunk in chunks) await decoder!.Decode(chunk);
        await decoder!.Flush();
    }
}

@inject Bit.Butil.WebCodecs webCodecs

@* A <video> playing a camera stream, a <canvas> you draw into, an <img> that has loaded. *@
<canvas @ref="canvasElement" width="640" height="480"></canvas>

@code {
    private ElementReference canvasElement;
    private VideoEncoderHandle? encoder;   // from CreateVideoEncoder

    // The timestamp is microseconds, and it is what orders the encoded chunks - 33,333 is one frame
    // at 30fps.
    private async Task Capture(int frameIndex)
    {
        await using var frame = await webCodecs.CaptureFrame(canvasElement, timestamp: frameIndex * 33_333);

        await encoder!.Encode(frame!);
    }
}

var encoder = await webCodecs.CreateAudioEncoder(
    new AudioEncoderConfig { Codec = "opus", SampleRate = 48000, NumberOfChannels = 1, Bitrate = 64_000 },
    onChunk: chunk => Console.WriteLine($"{chunk.Data.Length} bytes at {chunk.Timestamp}us"));

await using var data = await webCodecs.CreateAudioData(pcmFloatBytes, "f32", 48000,
                                                       numberOfFrames: 480, numberOfChannels: 1, timestamp: 0);
await encoder!.Encode(data!);
await encoder.Flush();