sps014 / ffmpegblazor Goto Github PK
View Code? Open in Web Editor NEWFFmpeg on Web Assembly
Home Page: https://ffmpegblazor.netlify.app/
License: MIT License
FFmpeg on Web Assembly
Home Page: https://ffmpegblazor.netlify.app/
License: MIT License
Can this support network streaming? like rtmp, rtsp
I am calling the FFMpegBlazor from within my application: I am at the url: myapp.com/video/asset/3016.
When the factor proceeds to load ffmpeg-core.js for example: this is the url that gets used:
https://localhost:44348/video/3016/_content/FFmpegBlazor/0.10.0/dist/ffmpeg-core.js resulting in a 404.
In the factory class it is using a relative path: //cdnURL ??= "https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg.min.js";
cdnURL = "./_content/FFmpegBlazor/0.10.0/ffmpeg.min.js";
await Runtime.InvokeVoidAsync("import", cdnURL);
await Runtime.InvokeVoidAsync("import", "./_content/FFmpegBlazor/blazorFfmpeg.js");
It should be using an absolute path: cdnURL = "/_content/FFmpegBlazor/0.10.0/ffmpeg.min.js";
the _content folder is at the root of the application and that is where the build places the needed js files.
Was getting errors when Ratio was null, had to wrap it in a try / catch.
blazor.webassembly.js:1 Uncaught (in promise) Error: System.Text.Json.JsonException: The JSON value could not be converted to System.Double. Path: $.ratio | LineNumber: 0 | BytePositionInLine: 13.
---> System.InvalidOperationException: Cannot get the value of a token type 'Null' as a number.
at System.Text.Json.ThrowHelper.ThrowInvalidOperationException_ExpectedNumber(JsonTokenType tokenType)
at System.Text.Json.Utf8JsonReader.TryGetDouble(Double& value)
at System.Text.Json.Utf8JsonReader.GetDouble()
at System.Text.Json.Serialization.Converters.DoubleConverter.Read(Utf8JsonReader& reader, Type typeToConvert, JsonSerializerOptions options)
at System.Text.Json.Serialization.Metadata.JsonPropertyInfo1[[System.Double, System.Private.CoreLib, Version=7.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].ReadJsonAndSetMember(Object obj, ReadStack& state, Utf8JsonReader& reader) at System.Text.Json.Serialization.Converters.ObjectDefaultConverter
1[[FFmpegBlazor.Progress, FFmpegBlazor, Version=1.0.0.7, Culture=neutral, PublicKeyToken=null]].OnTryRead(Utf8JsonReader& reader, Type typeToConvert, JsonSerializerOptions options, ReadStack& state, Progress& value)
at System.Text.Json.Serialization.JsonConverter1[[FFmpegBlazor.Progress, FFmpegBlazor, Version=1.0.0.7, Culture=neutral, PublicKeyToken=null]].TryRead(Utf8JsonReader& reader, Type typeToConvert, JsonSerializerOptions options, ReadStack& state, Progress& value) at System.Text.Json.Serialization.JsonConverter
1[[FFmpegBlazor.Progress, FFmpegBlazor, Version=1.0.0.7, Culture=neutral, PublicKeyToken=null]].ReadCore(Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)
--- End of inner exception stack trace ---
at System.Text.Json.ThrowHelper.ReThrowWithPath(ReadStack& state, Utf8JsonReader& reader, Exception ex)
at System.Text.Json.Serialization.JsonConverter1[[FFmpegBlazor.Progress, FFmpegBlazor, Version=1.0.0.7, Culture=neutral, PublicKeyToken=null]].ReadCore(Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state) at System.Text.Json.Serialization.JsonConverter
1[[FFmpegBlazor.Progress, FFmpegBlazor, Version=1.0.0.7, Culture=neutral, PublicKeyToken=null]].ReadCoreAsObject(Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)
at System.Text.Json.JsonSerializer.ReadCore[Object](Utf8JsonReader& reader, JsonTypeInfo jsonTypeInfo, ReadStack& state)
at System.Text.Json.JsonSerializer.Read[Object](Utf8JsonReader& reader, JsonTypeInfo jsonTypeInfo)
at System.Text.Json.JsonSerializer.Deserialize(Utf8JsonReader& reader, Type returnType, JsonSerializerOptions options)
at Microsoft.JSInterop.Infrastructure.DotNetDispatcher.ParseArguments(JSRuntime jsRuntime, String methodIdentifier, String arguments, Type[] parameterTypes)
at Microsoft.JSInterop.Infrastructure.DotNetDispatcher.InvokeSynchronously(JSRuntime jsRuntime, DotNetInvocationInfo& callInfo, IDotNetObjectReference objectReference, String argsJson)
at Microsoft.JSInterop.Infrastructure.DotNetDispatcher.BeginInvokeDotNet(JSRuntime jsRuntime, DotNetInvocationInfo invocationInfo, String argsJson)
at Object.endInvokeDotNetFromJS (
https://localhost:7279/_framework/blazor.webassembly.js:1:3549)
at Object.Xt [as endInvokeDotNetFromJS] (
https://localhost:7279/_framework/blazor.webassembly.js:1:63231)
at Object.Gt [as invokeJSFromDotNet] (
https://localhost:7279/_framework/blazor.webassembly.js:1:62728)
at Object.Ii (
https://localhost:7279/_framework/dotnet.7.0.16.x2z935gxnv.js:5:71974)
at _mono_wasm_invoke_js_blazor (
https://localhost:7279/_framework/dotnet.7.0.16.x2z935gxnv.js:14:103886)
at wasm://wasm/00993926:wasm-function[313]:0x1d6b8
at wasm://wasm/00993926:wasm-function[283]:0x1cae6
at wasm://wasm/00993926:wasm-function[221]:0xe1d6
at wasm://wasm/00993926:wasm-function[220]:0xd046
at wasm://wasm/00993926:wasm-function[8115]:0x1a237d
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?
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
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?
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?
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'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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.