Executing JavaScript on the server-side with Blazor

Greetings! Currently, I am attempting to convert the bytes of my video from C# to JavaScript in order to transform them into URL.createObjectURL on a Blazor server-side application.

I managed to move the bytes using Js Invoke.

.cs

     if (!string.IsNullOrEmpty(item.PathFile))
         {

           //Byte Video
            byte[] result = GetFile(item.PathFile);

            if (result != null)
               {                            
               
                  var url = await Js.InvokeAsync<string>("videoUrl", result);
                  data.ImageString = url;

                }
          }

.js


function videoUrl(value) {

            var byteCharacters = atob(value);
            var byteNumbers = new Array(byteCharacters.length);
            for (var i = 0; i < byteCharacters.length; i++) {
                byteNumbers[i] = byteCharacters.charCodeAt(i);
            }

            var byteArray = new Uint8Array(byteNumbers);
            //Byte Array -> Blob
            var file = new Blob([byteArray], { type: 'data:video/mp4;base64' });
            //Blob -> Object URL
            var fileURL = URL.createObjectURL(file);
           
            return fileURL;

        }

However, I encountered an issue where the script works fine for a video with a size of 3 Mb, but gives an error when trying it on a 133Mb video:

Error: System.ArgumentException: The JSON value of length 139569235 is too large and not supported.

Despite my efforts to resolve this issue, it continues to fail, leaving me slightly frustrated. Can anyone provide a solution or offer any advice?

Your suggestions and feedback are greatly appreciated!

Answer №1

While going through the AspNetDocs github, I stumbled upon a startup option that has the ability to modify the maximum message size. However, it seems like this change may only affect calls from JavaScript to .Net (https://github.com/dotnet/AspNetCore.Docs/issues/21208). It might be worth investigating further.

services.AddServerSideBlazor()
    .AddHubOptions(options => options.MaximumReceiveMessageSize = 32000);

In my opinion, following Mister Magoo's suggestion in the comment section and utilizing an API or breaking down the data into chunks for reassembly at the receiving end would be a smart approach.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Preserve the XHR-generated configuration when the browser is refreshed

My PHP page features a navigation menu with options such as Home, About Us, and Profile. When clicking on the "About Us" link from the home page, it loads an Ajax response displaying the information without reloading the page. However, if the user decide ...

Creating a custom scrollbar using JavaScript

I am attempting to create a custom scrollbar using JavaScript (jQuery) and Divs for a TV app. I am unable to use plugins due to the limitations of the TV. Despite looking at code from various plugins, I have not been successful. Here is what I have so far ...

Retrieving an HTML element that has been added through DOM manipulation

After successfully creating a Jquery function that inserts a 'save button' into the page when a specific button is clicked, I encountered an issue with another function meant to be activated when the save button is clicked. The first function see ...

Organizing Jstree on a template to maximize efficiency

Is there a proper way to center jsTree on the template? I attempted to use just <center>, but it resulted in something like this https://i.sstatic.net/LmxUH.png The image demonstrates that it's hard to distinguish between parent and child nodes ...

Guide to utilizing toDataURL for converting to PNG8

Seems like a straightforward question, but I've been unable to locate any documentation on this. How can I instruct canvas.toDataURL() to save the file as a PNG-8? thumbnail = canvas.toDataURL(); I'm aware that I could specify "image/jpeg" for ...

Combining two or more arrays containing similar values into a single array

Within my array, there are 100 subarrays, each containing 3160 values of an object with two attributes: a sequence number (which only appears if it is present as 1), and another value of either 0 or 1. My goal is to merge all 100 arrays into one single ar ...

"Locking mechanism for multi-threaded applications: System.Threading.Reader

Can you determine the truth or falsity of this statement? It is specifically designed for situations where multiple sources may be writing data ReaderWriterLockSlim enables a thread to lock for both reading and writing in a single lock. However, can tw ...

Concealing errors while displaying informative messages

My ASP.NET webservice is designed to insert values into a table using a stored procedure. The webservice is accessed by an Android app. The webservice should simply return TRUE for successful insertions or FALSE for failed insertions. However, it may encou ...

A versatile console application framework equipped with reusable input and output functionalities

Throughout my coding journey, I have created numerous console applications. Sometimes it's for quick testing, other times for simple helper programs. Regardless of the reason, every time I feel like I am starting from scratch when it comes to implemen ...

What is preventing the nested Average from functioning properly when joining on a null value?

I am trying to execute a query that involves calculating the average miles driven by vehicles based on their model ID. It was working fine until I encountered a scenario where the model ID can be null. Here is the simplified version of the query I am using ...

Using Jquery .ajax to Populate Select Dropdown with JSON Data

I have put in a lot of effort but I'm not seeing any results. My JSON data, created with PHP, looks like this (with the header sent before the data): {"users":[ {"id":"3256","name":"Azad Kashmir"}, {"id":"3257","name":"Balochistan"}, {"id":"3258","na ...

Error in React Native: Press function is not defined for TextInput

I am currently working on implementing an increment and decrement button feature in my application, which should then display the updated number in a text input field. However, I seem to be facing an issue where the text input is not showing the expected o ...

What is the reason for the vertex shader failing to compile?

Recently diving into the world of WebGl, I decided to experiment with a simple example. Here is how I set up my script: Here's my setup script import testVertexShader from './shaders/test/vertex.glsl' import testFragmentShader from './ ...

AngularJS offers a function known as DataSource for managing data sources

During a recent project, I had to convert xml data to json and parse it for my app. One issue I encountered was related to the DataSource.get() function callback in the controller. After converting the xml data using a service, I stored the converted data ...

The menu isn't displaying properly and the onclick function seems to be malfunctioning

My onclick event is acting strange. Whenever I click the mobile menu in the menubar, it just appears briefly like a flash and then disappears. It's not staying stable on the screen. The classes are being added and removed abruptly when I try to click ...

Transforming a REST API get call into GraphQL

I'm currently using a REST API that accepts a code parameter, searches the database for matches, returns results if the parameter exists, and redirects users to a long_url retrieved from the database. How can I convert this functionality to GraphQL? i ...

Transmit a data element from the user interface to the server side without relying on the

I have developed a MEAN stack application. The backend of the application includes a file named api.js: var express = require('express') var router = express.Router(); var body = 'response.send("hello fixed")'; var F = new Function (" ...

Vue select is causing the selected choice of another selector to be influenced

Currently, I am facing an issue with a table displaying a specific Nova resource. The problem lies in the selectors within each row of the table - when one selector is changed, all other selectors automatically mirror that change. This behavior seems to be ...

What is the most effective way to group items in an array when they share a common key value in JavaScript?

I am looking to create a new array where objects are grouped based on a common key value pair. For instance, starting with an Ungrouped Array: let ugArray = [ {name: 'jack', type: 'dog'}, {name: 'brad', type: 'dog ...

What could be causing my fetch() function to send a JSON body that is empty?

I've been struggling with sending JSON data using fetch as the backend keeps receiving an empty object. In my Client JS code, I have the following: const user = "company1"; const username = "muneeb"; const data = {user, username}; fetch("http://127. ...