Introduction

A Blazor wrapper for the browser API Streams

The API standardizes ways to create, compose, and consume streams of data that map to low-level I/O primitives in the browser. This project implements a wrapper around the API for Blazor so that we can easily and safely interact with the streams of the browser.

Demo

The sample project can be demoed at https://kristofferstrube.github.io/Blazor.Streams/

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 get an overview over what parts of the API we support currently.

Getting Started

The package can be used in Blazor projects.

Prerequisites

You need to install .NET 7.0 or newer to use the library.

Download .NET 7

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.Streams

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.Streams

Creating wrapper instance

We can call the constructor for ReadableStream, WritableStream, or TransformStream from C# and work on these objects like so:

@inject IJSInProcessRuntime JSRuntime

@code {
    protected override async Task OnInitializedAsync()
    {
        // Construct a stream in .NET.
        using var data = new System.IO.MemoryStream(new byte[1000 * 1024]);
        
        // Convert a .NET Stream to a JS ReadableStream.
        using var streamRef = new DotNetStreamReference(stream: data, leaveOpen: false);
        var jSStreamReference = await JSRuntime.InvokeAsync<IJSInProcessObjectReference>("jSStreamReference", streamRef);
        
        // Create a wrapper instance of the ReadableStream.
        var readableStream = await ReadableStream.CreateAsync(JSRuntime, jSStreamReference);

        // Get the reader and iterate that.
        var readableStreamReader = await readableStream.GetDefaultReaderAsync();
        await foreach (var chunk in readableStreamReader)
        {
            var length = await JSRuntime.InvokeAsync<int>("getAttribute", chunk, "length");
            Console.WriteLine(length);
            await Task.Delay(100);
        }
    }
}

For the above example we use two small JavaScript functions that basically serves as a way to convert the .NET DotNetStreamReference object into an IJSObjectReference and a way to get any attribute of an IJSObjectReference. These methods looks like this and can be defined in the index.html or _host.razor page.

function jSStreamReference(streamRef) { return streamRef.stream(); }
function getAttribute(object, attribute) { return object[attribute]; }

Issues

Feel free to open issues on the repository if you find any errors with the package or have wishes for features.

Related articles

This repository was build with inspiration and help from the following series of articles:

• Wrapping JavaScript libraries in Blazor WebAssembly/WASM
• Call anonymous C# functions from JS in Blazor WASM
• Using JS Object References in Blazor WASM to wrap JS libraries
• Blazor WASM 404 error and fix for GitHub Pages
• How to fix Blazor WASM base path problems