Design proposal: #47685 Add blob() method to JS side of Blazor DotNetStreamReference

[MaxxBahr]

Summary

Add a blob([mimeType: string]) method to DotNetStreamReference in Blazor, allowing developers to obtain a Blob from a .NET stream in JavaScript, without fully loading the stream into memory. We chose this specific issue, because it is a "good-first-issue" and we are participating in a germany wide competition, where the subject is to work on issues in open source projects.
Link to issue: #47685

Motivation and goals

Blazor developers can currently pass .NET streams to JavaScript using DotNetStreamReference, which exposes two main methods:

• stream() (returns a ReadableStream)
• arrayBuffer() (loads the full stream into memory)

The problem:

• There is no direct way to obtain a Blob, which is required for many web APIs (like <video> elements, file downloads or drag-and-drop functionality).
• arrayBuffer() is not suitable for large files (like videos) because it fully buffers the stream in memory before use.
• Using stream() gives a ReadableStream, but many APIs (like <video src=...>, URL.createObjectURL()) require a Blob, not a stream, and converting a ReadableStream into a Blob in JS is non-trivial and inefficient.

Adding a blob() method would:

• Allow efficient handling of large files (like video or audio) without consuming excessive memory.
• Simplify developer workflows by aligning with common web APIs that expect a Blob.
• Close a usability gap in the current Blazor-JS interop system.

In scope

• A new method blob([mimeType: string]) on DotNetStreamReference that returns a Blob representing the .NET stream.
• Ensuring the Blob can be used with standard web APIs (e.g., <video>, <audio>, URL.createObjectURL()).
• Keeping performance and memory usage efficient for large streams.

Out of scope

• Changes to the existing stream() or arrayBuffer() methods.
• Polyfills for browsers that lack Blob support (modern browsers are assumed).
• Enhancements to streaming APIs beyond providing the Blob.

Risks / unknowns

• Browser behavior: While Blobs are widely supported, the implementation detail of
  streaming data into a Blob without full buffering might depend on browser internals.
  Some browsers may still buffer the entire Blob in memory before making it available.

• Memory use: Even if we avoid buffering in .NET or JS, the underlying browser may still
  end up consuming memory when the Blob is accessed, especially for very large files.

• Implementation complexity: Creating a Blob from a .NET stream across JS interop
  might require platform-level work to ensure true streaming behavior rather than just
  buffering and converting.

Examples

Blazor usage example

<video @ref="videoPlayer" controls autoplay></video>

<button @onclick="PlayVideo">Play Streamed Video</button>

@code {
    private ElementReference videoPlayer;

    private async Task PlayVideo()
    {
        using var fileStream = File.OpenRead("bigvideo.mp4");
        var streamRef = new DotNetStreamReference(fileStream);

        // JS call to create a blob URL from the .NET stream
        var videoUrl = await JS.InvokeAsync<string>("createVideoBlobUrl", streamRef);

        // Set the video source
        await JS.InvokeVoidAsync("setVideoSrc", videoPlayer, videoUrl);
    }
}

JavaScript interop

window.createVideoBlobUrl = async function (streamRef) {
    const blob = await streamRef.blob("video/mp4");
    return URL.createObjectURL(blob);
};

window.setVideoSrc = function (videoElement, src) {
    videoElement.src = src;
};

[javiercn]

@MaxxBahr thanks for contacting us.

Memory use: Even if we avoid buffering in .NET or JS, the underlying browser may still
end up consuming memory when the Blob is accessed, especially for very large files.

Blobs are immutable in JS, so if you have a stream you end up having to buffer all the data in memory.

Here is a sample snippet

async function readableStreamToBlob(readableStream, mimeType = "application/octet-stream") {
    const reader = readableStream.getReader();
    const chunks = [];

    while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        chunks.push(value); // Buffering chunks in memory
    }

    return new Blob(chunks, { type: mimeType });
}

// Example usage:
fetch('https://example.com/file') // Fetch returns a Response object with a ReadableStream
    .then(response => readableStreamToBlob(response.body, "application/pdf"))
    .then(blob => console.log(blob));

That's said, I think we will take in a PR if you want to send us one that contains the implementation and relevant tests.

[javiercn]

We would add a blob(type:string) method that would create a blob from the stream to suppor this scenario