Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lostbeard/spawndev.blazorjs.ffmpegwasm
ffmpeg.wasm for Blazor WebAssembly
https://github.com/lostbeard/spawndev.blazorjs.ffmpegwasm
blazor blazor-webassembly csharp dotnet ffmpeg ffmpeg-wasm webassembly
Last synced: 2 months ago
JSON representation
ffmpeg.wasm for Blazor WebAssembly
- Host: GitHub
- URL: https://github.com/lostbeard/spawndev.blazorjs.ffmpegwasm
- Owner: LostBeard
- License: mit
- Created: 2023-08-31T19:51:09.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-17T13:53:49.000Z (7 months ago)
- Last Synced: 2024-10-28T17:33:40.178Z (3 months ago)
- Topics: blazor, blazor-webassembly, csharp, dotnet, ffmpeg, ffmpeg-wasm, webassembly
- Language: C#
- Homepage: https://lostbeard.github.io/SpawnDev.BlazorJS.FFmpegWasm/
- Size: 34.6 MB
- Stars: 12
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.txt
Awesome Lists containing this project
README
# SpawnDev.BlazorJS.FFmpegWasm
| Package | Description | Includes |
|---------|-------------|----------|
|**SpawnDev.BlazorJS.FFmpegWasm**
[](https://www.nuget.org/packages/SpawnDev.BlazorJS.FFmpegWasm)| ffmpeg.wasm for Blazor WASM | ffmpeg/*
ffmpeg.js
814.ffmpeg.js
|**SpawnDev.BlazorJS.FFmpegWasm.Core**
[](https://www.nuget.org/packages/SpawnDev.BlazorJS.FFmpegWasm.Core)| Includes SpawnDev.BlazorJS.FFmpegWasm and ffmpeg.wasm core resources | core/*
ffmpeg-core.js
ffmpeg-core.wasm
|**SpawnDev.BlazorJS.FFmpegWasm.CoreMT**
[](https://www.nuget.org/packages/SpawnDev.BlazorJS.FFmpegWasm.CoreMT)| Includes SpawnDev.BlazorJS.FFmpegWasm and ffmpeg.wasm core-mt resources | core-mt/*
ffmpeg-core.js
ffmpeg-core.wasm
ffmpeg-core.worker.js
[ffmpeg.wasm](https://github.com/ffmpegwasm/ffmpeg.wasm) is a pure WebAssembly / Javascript port of FFmpeg. It enables video & audio record, convert and stream right inside browsers.
SpawnDev.BlazorJS.FFmpegWasm uses [SpawnDev.BlazorJS](https://github.com/LostBeard/SpawnDev.BlazorJS) [JSObjects](https://github.com/LostBeard/SpawnDev.BlazorJS#jsobject-base-class) to bring [ffmpeg.wasm](https://github.com/ffmpegwasm/ffmpeg.wasm) into Blazor WASM apps. A slightly customized version of ffmpeg.wasm ([repo here](https://github.com/LostBeard/ffmpeg.wasm)) is used to add additional functionality to the base version.
[Live Demo](https://lostbeard.github.io/SpawnDev.BlazorJS.FFmpegWasm/)
- [Transcode](https://lostbeard.github.io/SpawnDev.BlazorJS.FFmpegWasm/)
- [Video to Gif](https://lostbeard.github.io/SpawnDev.BlazorJS.FFmpegWasm/VideoToGif)
- [Add subtitles](https://lostbeard.github.io/SpawnDev.BlazorJS.FFmpegWasm/AddSubtitles)
## FFmpegFactory
FFmpegFactory is an optional service that can handle importing FFmpegWasm and includes helper methods like ToBlobURL, FetchFile, CreateLoadCoreConfig, and CreateLoadCoreMTConfig.
#### With FFmpegFactory
Source [BasicFactoryExample.razor](https://github.com/LostBeard/SpawnDev.BlazorJS.FFmpegWasm/blob/main/SpawnDev.BlazorJS.FFmpegWasmDemo/Pages/BasicFactoryExample.razor)
Example code
Program.cs
```cs
// ...
// Add SpawnDev.BlazorJS.BlazorJSRuntime service
builder.Services.AddBlazorJSRuntime();
// Add FFmpegFactory service
builder.Services.AddSingleton();
// ...
```
BasicFactoryExample.razor
```cs
@page "/BasicFactoryExample"
@using System.Text
@using SpawnDev.BlazorJS
@using SpawnDev.BlazorJS.FFmpegWasm
Basic FFmpegFactory Example of ffmpeg.wasm in Blazor
A bare bones example of ffmpeg.wasm in Blazor using SpawnDev.BlazorJS and SpawnDev.BlazorJS.FFmpegWASM
Load ffmpeg-core (~31 MB)
Transcode webm to mp4
@logMessage
@progressMessage
Open Developer Tools (Ctrl+Shift+I) to View Logs
@code {
[Inject]
BlazorJSRuntime JS { get; set; }
[Inject]
FFmpegFactory FFmpegFactory { get; set; }
ElementReference videoResult;
HTMLVideoElement? videoEl;
bool loaded = false;
bool busy = false;
string logMessage = "";
string progressMessage = "";
FFmpeg? ffmpeg = null;
async Task Load()
{
busy = true;
StateHasChanged();
videoEl = new HTMLVideoElement(videoResult);
await FFmpegFactory.Init();
ffmpeg = new FFmpeg();
ffmpeg.OnLog += FFmpeg_OnLog;
ffmpeg.OnProgress += FFmpeg_OnProgress;
// Use FFmpegFactory extension methods supplied by the Nuget packages
// SpawnDev.BlazorJS.FFmpegWasm.Core
// SpawnDev.BlazorJS.FFmpegWasm.CoreMT
//
// Single thread and multi thread versions acn be used independently of each other to lower resource packaging.
//
// From SpawnDev.BlazorJS.FFmpegWasm.Core
// - Contains the ffmpeg.wasm core for single thread files
// - Adds CreateLoadCoreConfig to FFmpegFactory
// From SpawnDev.BlazorJS.FFmpegWasm.CoreMT
// - Contains the ffmpeg.wasm core for multi thread files
// - Adds CreateLoadCoreMTConfig to FFmpegFactory
var loadConfig = FFmpegFactory.MultiThreadSupported ? FFmpegFactory.CreateLoadCoreMTConfig() : FFmpegFactory.CreateLoadCoreConfig();
await ffmpeg.Load(loadConfig);
busy = false;
loaded = true;
StateHasChanged();
}
async Task Transcode()
{
busy = true;
StateHasChanged();
logMessage = "Downloading source video";
StateHasChanged();
await ffmpeg.WriteFile("input.webm", await FFmpegFactory.FetchFile("https://raw.githubusercontent.com/ffmpegwasm/testdata/master/Big_Buck_Bunny_180_10s.webm"));
logMessage = "Transcoding source video";
StateHasChanged();
var ret = await ffmpeg.Exec(new string[] { "-i", "input.webm", "output.mp4" });
logMessage = "Source video transcoded";
StateHasChanged();
using var data = await ffmpeg.ReadFileUint8Array("output.mp4");
using var blob = new Blob(new Uint8Array[] { data }, new BlobOptions { Type = "video/mp4" });
var objSrc = URL.CreateObjectURL(blob);
videoEl.Src = objSrc;
busy = false;
StateHasChanged();
}
void FFmpeg_OnLog(FFmpegLogEvent ev)
{
logMessage = ev.Message;
JS.Log("FFmpeg_OnLog", ev.Message);
StateHasChanged();
}
void FFmpeg_OnProgress(FFmpegProgressEvent ev)
{
var progress = ev.Progress;
var time = ev.Time;
progressMessage = $"{progress * 100} % (transcoded time: {time / 1000000} s)";
JS.Log("FFmpeg_OnProgress", ev.Time, ev.Progress);
StateHasChanged();
}
}
```
#### Without FFmpegFactory
Source [BasicExample.razor](https://github.com/LostBeard/SpawnDev.BlazorJS.FFmpegWasm/blob/main/SpawnDev.BlazorJS.FFmpegWasmDemo/Pages/BasicExample.razor)
Example code
Program.cs
```cs
// ...
// Add SpawnDev.BlazorJS.BlazorJSRuntime service
builder.Services.AddBlazorJSRuntime();
// ...
```
BasicExample.razor
```cs
@page "/"
@using System.Text
@using SpawnDev.BlazorJS
@using SpawnDev.BlazorJS.FFmpegWasm
Basic Example of ffmpeg.wasm in Blazor
A bare bones example of ffmpeg.wasm in Blazor using SpawnDev.BlazorJS and SpawnDev.BlazorJS.FFmpegWASM
Load ffmpeg-core (~31 MB)
Transcode webm to mp4
@logMessage
@progressMessage
Open Developer Tools (Ctrl+Shift+I) to View Logs
@code {
[Inject]
BlazorJSRuntime JS { get; set; }
ElementReference videoResult;
HTMLVideoElement? videoEl;
bool loaded = false;
bool busy = false;
string logMessage = "";
string progressMessage = "";
string baseURLFFmpeg = "https://unpkg.com/@ffmpeg/[email protected]/dist/umd";
string baseURLCore = "https://unpkg.com/@ffmpeg/[email protected]/dist/umd";
FFmpeg? ffmpeg = null;
async Task Load()
{
busy = true;
StateHasChanged();
videoEl = new HTMLVideoElement(videoResult);
if (JS.IsUndefined("FFmpegWASM"))
{
// a quick patch to allow us the ability to specify the full path to the primary ffmpeg worker (814.ffmpeg.js in umd version) via our FFMessageLoadConfig
// the ffmpeg.js script tries to build the path location itself (with the code being replaced) but will fail (in our scenario) so we patch it to allow us to specify the path
// essentially the same as Pull request #562 (https://github.com/ffmpegwasm/ffmpeg.wasm/pull/562) except this works on the minified UMD version
var FFmpegObjUrl = await ToBlobURL($"{baseURLFFmpeg}/ffmpeg.js", "application/javascript", (js) => js.Replace("new Worker(new URL(e.p+e.u(814),e.b),{type:void 0})", "new Worker(r.worker814URL,{type:void 0})"));
await JS.Import(FFmpegObjUrl);
URL.RevokeObjectURL(FFmpegObjUrl);
}
ffmpeg = new FFmpeg();
ffmpeg.OnLog += FFmpeg_OnLog;
ffmpeg.OnProgress += FFmpeg_OnProgress;
await ffmpeg.Load(new FFMessageLoadConfig
{
Worker814URL = await ToBlobURL($"{baseURLFFmpeg}/814.ffmpeg.js", "application/javascript"),
CoreURL = await ToBlobURL($"{baseURLCore}/ffmpeg-core.js", "application/javascript"),
WasmURL = await ToBlobURL($"{baseURLCore}/ffmpeg-core.wasm", "application/wasm"),
});
busy = false;
loaded = true;
StateHasChanged();
}
async Task Transcode()
{
busy = true;
StateHasChanged();
logMessage = "Downloading source video";
StateHasChanged();
await ffmpeg.WriteFile("input.webm", await FetchFile("https://raw.githubusercontent.com/ffmpegwasm/testdata/master/Big_Buck_Bunny_180_10s.webm"));
logMessage = "Transcoding source video";
StateHasChanged();
var ret = await ffmpeg.Exec(new string[] { "-i", "input.webm", "output.mp4" });
logMessage = "Source video transcoded";
StateHasChanged();
using var data = await ffmpeg.ReadFileUint8Array("output.mp4");
using var blob = new Blob(new Uint8Array[] { data }, new BlobOptions { Type = "video/mp4" });
var objSrc = URL.CreateObjectURL(blob);
videoEl.Src = objSrc;
busy = false;
StateHasChanged();
}
void FFmpeg_OnLog(FFmpegLogEvent ev)
{
logMessage = ev.Message;
JS.Log("FFmpeg_OnLog", ev.Message);
StateHasChanged();
}
void FFmpeg_OnProgress(FFmpegProgressEvent ev)
{
var progress = ev.Progress;
var time = ev.Time;
progressMessage = $"{progress * 100} % (transcoded time: {time / 1000000} s)";
JS.Log("FFmpeg_OnProgress", ev.Time, ev.Progress);
StateHasChanged();
}
async Task FetchFile(string resource)
{
using var resp = await JS.Fetch(resource);
using var body = await resp.ArrayBuffer();
return new Uint8Array(body);
}
async Task FetchText(string resource)
{
using var resp = await JS.Fetch(resource);
return await resp.Text();
}
async Task ToBlobURL(string src, string mimeType)
{
using var data = await FetchFile(src);
using var blob = new Blob(new Uint8Array[] { data }, new BlobOptions { Type = mimeType });
return URL.CreateObjectURL(blob);
}
async Task ToBlobURL(string src, string mimeType, Func patcher)
{
var text = await FetchText(src);
if (patcher != null) text = patcher(text);
using var blob = new Blob(new string[] { text }, new BlobOptions { Type = mimeType });
return URL.CreateObjectURL(blob);
}
}
```