Blazor.MediaStreamRecording
A Blazor wrapper for the MediaStream Recording browser API.
This Web API makes it easy to record sound from a MediaStream.
It additionally makes it possible to query which encodings the current platform has available for recording.
This project implements a wrapper around the API for Blazor so that we can easily and safely record sound in the browser.
Demo
The sample project can be demoed at https://kristofferstrube.github.io/Blazor.MediaStreamRecording/
On each page, you can find the corresponding code for the example in the top right corner.
On the API Coverage Status page, you can see how much of the WebIDL specs this wrapper has covered.
Getting Started
Prerequisites
You need to install .NET 7.0 or newer to use the library.
Installation
You can install the package via NuGet with the Package Manager in your IDE or alternatively using the command line:
dotnet add package KristofferStrube.Blazor.MediaStreamRecordingUsage
The package can be used in Blazor WebAssembly and Blazor Server projects.
Import
You need to reference the package in order to use it in your pages. This can be done in _Import.razor by adding the following.
@using KristofferStrube.Blazor.MediaStreamRecordingRecording MediaStream
The primary purpose of the API is to record some MediaStream. You can get a MediaStream using the Blazor.MediaCaptureStreams library. After this you can use the following minimal sample for recording a MediaStream.
// List to collect each recording part.
List<Blob> blobsRecorded = new();
// Create new MediaRecorder from some existing MediaStream.
await using MediaRecorder recorder = await MediaRecorder.CreateAsync(JSRuntime, mediaStream);
// Add event listener for when each data part is available.
await using var dataAvailableEventListener =
await EventListener<BlobEvent>.CreateAsync(JSRuntime, async (BlobEvent e) =>
{
Blob blob = await e.GetDataAsync();
blobsRecorded.Add(blob);
});
await recorder.AddOnDataAvailableEventListenerAsync(dataAvailableEventListener);
// Starts Recording
await recorder.StartAsync();
// Records for 5 seconds.
await Task.Delay(5000);
// Stops recording
await recorder.StopAsync();
// Combines and collects the total audio data.
Blob combinedBlob = await Blob.CreateAsync(JSRuntime, [.. blobsRecorded]);
byte[] audioData = await combinedBlob.ArrayBufferAsync();
await combinedBlob.JSReference.DisposeAsync();
// Dispose of blob parts created while recording.
foreach (Blob blob in blobsRecorded)
await blob.JSReference.DisposeAsync();Related repositories
The library uses the following other packages to support its features:
- https://github.com/KristofferStrube/Blazor.WebIDL (To make error handling JSInterop)
- https://github.com/KristofferStrube/Blazor.DOM (To implement
MediaRecorderwhich extendsEventTarget) - https://github.com/KristofferStrube/Blazor.Window (For the
ErrorEventtype that is also exposed via theonErrorevent handler onMediaRecorder) - https://github.com/KristofferStrube/Blazor.MediaCaptureStreams (To enable the capturing of the
MediaStreams that should be recorded)
Related articles
This repository was built with inspiration and help from the following series of articles: