dotnet / dotnet/aspnetcore

Support for serializing/deserializing `float[]` as `Float32Array` via Blazor JSInterop

Open
#67,926 9 comments 0 reactions 0 assignees View on GitHub
area-blazor feature-blazor-jsinterop
Dominant language
C#
Stars
38.4k
Forks
10.9k
Avg merge
2d 10h
Merged PRs (30d)
281

Description

### Is there an existing issue for this?

- [x] I have searched the existing issues

### Is your feature request related to a problem? Please describe the problem.

When you work with streams of analog data like sound data, you often use float arrays for storing data. Currently, if you work with float arrays (`float[]`) in .NET, but want to transfer this array to JavaScript to use some browser API, we have to convert the array to a byte array (`byte[]`) to efficiently transfer it as only byte arrays are optimized for Blazor JSInterop. So you end up with something like this every time you want to transfer a float array.
- Copy a float array into a byte array (using something like `Buffer.BlockCopy`).
- Send the byte array to JS via JSInterop where it will become an `Uint8Array`.
- Get the `ArrayBuffer` (memory view) of the `Uint8Array`.
- Create a `Float32Array` from the `ArrayBuffer`.

That is a rather tedious process especially because you will have to write your own JS function for the JS part (unless you use a framework like [Blazor.WebIDL](https://github.com/KristofferStrube/Blazor.WebIDL))

### Describe the solution you'd like

I would like for Blazor JSInterop to support efficient serialization of `float[]`s to the JS `Float32Array` type so that we can make calls like the one below:
```csharp
IJSObjectReference audioBuffer; // Some audio buffer
float[] source = [1f, 0f, -1f, 0f, 1f, 0f, -1f, 0f];
ulong channelNumber = 0;
await audioBuffer.InvokeVoidAsync("copyToChannel", source, channelNumber)
```
And I would likewise like for Blazor JSInterop to support efficient deserialization of `float[]`s from `Float32Array`s so that we can make calls like the one below:
```csharp
IJSObjectReference audioBuffer; // Some audio buffer
ulong channel = 0;
float[] data = await audioBuffer.InvokeAsync("getChannelData", channel);
```

### Additional context

This wish was first reported in `Blazor.WebIDL` and would be useful in `Blazor.WebAudio` where I have also had the same need previously. https://github.com/KristofferStrube/Blazor.WebIDL/issues/42

In the linked issue I have shown some alternative solutions for how you can achieve the desired transfer today, but I think the proposed feature in this issue would be the best solution.

Contributor guide

Open the contributing guide

Research direction

Start by tracing the Blazor JSInterop paths used by IJSObjectReference.InvokeVoidAsync and InvokeAsync; the issue does not name specific files or tests. Use the AudioBuffer copyToChannel and getChannelData examples to verify efficient float[]/Float32Array serialization and deserialization, including a round trip with the sample values.

Written by the indexing model from the issue text.

Assessment

Tech stack
csharp, javascript
Domain
api, web-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.