sps014 / ffmpegblazor Goto Github PK

Can this support network streaming? like rtmp, rtsp

I have a .NET 7 project running blazor server side.
When initializing the JSRuntime, an exception is thrown:

await FFmpegFactory.Init(Runtime); // throws System.InvalidCastException: 'Unable to cast object of type 'Microsoft.AspNetCore.Components.Server.Circuits.RemoteJSRuntime' to type 'Microsoft.JSInterop.IJSUnmarshalledRuntime'.'

I found this -> https://github.com/dotnet/AspNetCore.Docs/blob/main/aspnetcore/blazor/javascript-interoperability/import-export-interop.md#obsolete-javascript-interop-api

I'm doing a two-pass conversion on an MP4 to AVI. If it works, things seems great. But if my parameters will not allow a file to be created, I get an error that I can sort of see with logging messages, but I get an immediate RuntimeError: memory access out of bounds right after that. I'm running locally in a "Start without Debugging" mode. I'm not sure if it's something I'm doing, or if it's something happening in the code with this approach. Any ideas?

On Firefox I can not use the library because of bad CORS:

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg.min.js. (Grund: CORS-Anfrage schlug fehl).

Modul-Quell-URI ist in diesem Dokument nicht erlaubt: "https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg.min.js".

How can this be fixed?

i'm not sure if it's somehow related with #6 but there i get the following error if i want to use FFmpegBlazor in my WebAssembly project. I noticed that there is a JSException on the hosted version on netlify as well.
i'm testing https://ffmpegblazor.netlify.app/tomp3

Microsoft.JSInterop.JSException: SharedArrayBuffer is not defined
ReferenceError: SharedArrayBuffer is not defined
    at blob:https://localhost:5011/8b279815-9592-46f1-806c-a92e17d96ca7:22:175
    at https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg.min.js:1:7334
    at f (https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg.min.js:1:12320)
    at Generator._invoke (https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg.min.js:1:12108)
    at Generator.next (https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg.min.js:1:12745)
    at i (https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg.min.js:1:5052)
    at c (https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg.min.js:1:5255)
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[Microsoft.JSInterop.Infrastructure.IJSVoidResult, Microsoft.JSInterop, Version=6.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()
   at Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeVoidAsync(IJSObjectReference jsObjectReference, String identifier, Object[] args)
   at FFmpegBlazor.FFMPEG.Load(Boolean triggerEvents)

i'm happy to provide more info if needed.
Thank you

Hi there. Awesome project. Stumbled upon it after finding your issue over here: dotnet/aspnetcore#27983

Your CreateURLFromBuffer does exactly what I want to do. I am trying to create a Tesla Sentry viewer Blazor Webassembly app, but when I try to implement your package, and use your example, I get the following error:

Not allowed to load local resource: blob:System.Runtime.CompilerServices.AsyncTaskMethodBuilder`1+AsyncStateMachineBox`1[System.String,TeslaViewer.Pages.Index+<GetVideoStream>d__9]

What I am trying to do is pretty simple: Use an InputFile element set to multiple webkitdirectory directory to allow the user to add a directory with .mp4 files in it, then simply embed those files on the page. I've tried a bunch of things, but I cannot get past the Not allowed to load local resource error, which comes when I try to read the stream into the buffer via await stream.ReadAsync(buffer).

Here's what I do:

@page "/"
@using FFmpegBlazor;
@using Microsoft.AspNetCore.Components.Forms;
@using System.Linq;
@using System.Globalization;
@inject IJSRuntime Runtime

<h3>Sentry Clips Viewer</h3>

<InputFile OnChange="@LoadFiles" multiple webkitdirectory directory @ref="inputFile" />

@if (events != null)
{
    <InputSelect @bind-Value="selectedEvent" @oninput="OnEventChanged">
        @foreach (var e in events)
        {
            <option value="@e.Key">@e.Key.ToString("yyyy-MM-dd_HH-mm-ss")</option>
        }
    </InputSelect>

    if (selectedFiles != null)
    {
        <div>
            @foreach (var file in selectedFiles)
            {
                <h4>@file.Name</h4>
                <video controls src="blob:@GetVideoStream(file)" style="max-width: 300px;"></video>
                <br />
            }
        </div>
    }
}

@code {
    private IEnumerable<IGrouping<DateTime, IBrowserFile>>? events;
    private List<IBrowserFile>? selectedFiles;
    private DateTime selectedEvent;
    private InputFile? inputFile;

    protected override async Task OnInitializedAsync()
    {
        if (FFmpegFactory.Runtime == null)
        {
            FFmpegFactory.Logger += WriteLogs;
        }

        //initialize Library
        await FFmpegFactory.Init(Runtime);
    }

    void WriteLogs(Logs m)
    {
        Console.WriteLine(m.Type + " " + m.Message);
    }

    private void LoadFiles(InputFileChangeEventArgs args)
    {
        var files = args.GetMultipleFiles(int.MaxValue);

        events = files
            .Where(x => x.ContentType == "video/mp4")
            .GroupBy(x => DateTime.ParseExact(x.Name.Substring(0, 19), "yyyy-MM-dd_HH-mm-ss", CultureInfo.InvariantCulture, DateTimeStyles.None))
            .OrderByDescending(x => x.Key)
            .ToList();

        selectedEvent = events.First().Key;

        StateHasChanged();
    }

    private void OnEventChanged()
    {
        selectedFiles = events
            .Single(x => x.Key == selectedEvent)
            .ToList();
    }

    private async Task<string> GetVideoStream(IBrowserFile file)
    {
        using var stream = file.OpenReadStream(int.MaxValue); //Max size for file that can be read
        var buffer = new byte[file.Size];

        //read all bytes
        await stream.ReadAsync(buffer);

        //create a video link from buffer so that video can be played
        var url = FFmpegFactory.CreateURLFromBuffer(buffer, file.Name, file.ContentType);

        return url;
    }
}

I've tried hosting it with IIS and I've tried dotnet publish -c Release and then adding it to a Nginx site. I test locally using IIS and with the web.config headers added (which I also did in on the Nginx site), as I thought it might have something to do with the headers, but it does not, obviously.

Any clue?

Been struggling to get this to work in my own local project, and I finally realized there is a demo of this project on netlify.
However the netlify instance of the project doesn't seem to be working either.

It seems either the File Write or File Read operation is broken.
In my own testing, I found that writing and a file and reading it always returns an array of null bytes (00 00 00 00...). I assume it's working to some extent, as the file size remains exactly correct, but the actual content of the file is useless.

Is this something wrong with ffmpeg.wasm? Or is this a FFmpegBlazor issue?