Forem: GleamTech

How to generate video thumbnails in ASP.NET Core 8.0

GleamTech — Tue, 11 Feb 2025 22:11:15 +0000

I was looking to implement a function that retrieves a single frame from an input video, which can be used as a thumbnail. I wanted to display thumbnails for videos listed on my site, I wanted to fetch a frame from a video (from a particular time) and display it as thumbnail.

This was not an easy task as there is no API in .NET Framework related to this without being dependent on codecs. Luckily I stumpled upon .NET Video Thumbnailer library from GleamTech. VideoUltimate has VideoThumbnailer class that can quickly generate a meaningful thumbnail for a video. It’s very easy to use:

using (var videoThumbnailer = new VideoThumbnailer(@"C:\Video.mp4"))
{
    using (var thumbnail = videoThumbnailer.GenerateThumbnail(300))
        thumbnail.Save(@"C:\Thumbnail.jpg", ImageFormat.Jpg);
}

GenerateThumbnail method smartly generates a meaningful thumbnail for the video by seeking to a sensible time position and avoiding blank frames. Every call returns a new Bitmap instance which should be disposed by the caller. Once the smart time position is determined after the first call, the consecutive calls will be faster and can be used to retrieve Bitmap instances in different sizes. First parameter (300 pixels in above sample) is the maximum width or height of the thumbnail, aspect ratio is preserved:

It’s also possible to overlay the duration of the video on the bottom-right corner (similar to youtube) by passing true to the second parameter:

using (var videoThumbnailer = new VideoThumbnailer(@"C:\Video.mp4"))
{
    using (var thumbnail = videoThumbnailer.GenerateThumbnail(300, true))
        thumbnail.Save(@"C:\ThumbnailWithDuration.jpg", ImageFormat.Jpg);
}

Unlike other libraries, these classes can also read video files from streams, an Azure Blob container, an Amazon S3 bucket, i.e. when you don’t have the video file on disk, you can use the constructors with Stream or FileProvider parameter.

You can even get the thumbnail of a video file directly from a URL:

using (var videoThumbnailer = new VideoThumbnailer("http://vjs.zencdn.net/v/oceans.mp4"))
using (var thumbnail = videoThumbnailer.GenerateThumbnail(300, true))
    thumbnail.Save(@"C:\ThumbnailFromUrl.jpg", ImageFormat.Jpg);

VideoUltimate is really a nice time-saving library. It was able to read any video file format I threw at it. I also liked that it’s a managed DLL which works both on 32-bit and 64-bit machines.

Additional information

Online Documentation
Live Demo Examples

How to customize PDF.js

GleamTech — Sat, 19 Oct 2024 18:38:21 +0000

PDF.js is a great open-source project which is frequently updated and new features are being added to, however looks-wise it's ugly, or maybe let's say it looks outdated. How about getting the latest PDF features and fixes from PDF.js but having a slick look on the presentation side?

The pdf viewer from PdfJsKit is unobtrusive, it doesn't directly change code of PDF.js, it just includes PDF.js in an iframe and at runtime override HTML, JS and CSS to offer a slick modern look and better ui structure and usability and new features. This way we can always update PDF.js to the latest version easily and get all bug fixes and improvements.

Other pdf viewers based on PDF.js usually don't update the default look, and the ones that does usually miss functionality due to separating into components but partially implementing them or offer a bad/partial API.

Getting started

Install the package to your project:

npm install pdfjskit

When the package is installed (or version is updated), assets (css, images etc.) used by PdfJsKit will be copied automatically from node_modules\pdfjskit\dist\pdfjskit to public\pdfjskit. Your project's public subdirectory is a common place for web assets, but if your JS framework has a different directory structure, you can move assets to another place.

By default PdfJsKit loads assets from pdfjskit subdirectory relative to host page but you can change this path via passing custom libraryPath option to PdfViewer constructor.

Usage

import PdfViewer from "pdfjskit";

var pdfViewer = new PdfViewer({
  documentUrl: "pdfjskit/sample.pdf",
  width: "80%",
  height: 720,
  resizable: true,
  language: "en-US",
  theme: "slate, classic-dark"
});

pdfViewer.render(document.getElementById("container"));

Note that the NPM package contains a ES6 module pdfjskit.min.mjs, also a script version pdfjskit.min.js is provided in GitHub dist/pdfjskit directory and in developer package offered here.

Using PdfJsKit in plain JS projects with Vite

You can use sse any JS framework (React, Vue, Angular, Svelte, Blazor etc) with PdfJsKit, however for simplicity in this post, I will show usage for plain JS projects.

For plain JS projects, I recommend using Vite, this way you can import from module in HTML files easily:

Create a Vite project template:

npm create vite@latest

Choose the settings:

✔ Project name: … pdfjskit-vite-example
✔ Select a framework: › Vanilla
✔ Select a variant: › JavaScript

A subdirectory with your project name will be created, do the following:
```
cd pdfjskit-vite-example
npm install
npm install pdfjskit
```

Edit index.html and replace contents with:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>PdfJsKit Vite Example</title>
  </head>
  <body>

    <div id="container"></div>

    <script type="module">
      import PdfViewer from "pdfjskit";

      var pdfViewer = new PdfViewer({
        documentUrl: "pdfjskit/sample.pdf",
        width: "80%",
        height: 720,
        resizable: true,
        language: "en-US",
        theme: "slate, classic-dark"
      });

      pdfViewer.render(document.getElementById("container"));
    </script>

  </body>
</html>

Now you can run the dev web server:
```
npm run dev
```
which will show:
```
➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h + enter to show help    
```
Click the Local url with CTRL key to launch the browser.
You will see that PDF Viewer is rendered in the page.

Documentation

Live Demos

How to implement a file manager in ASP.NET Core 8.0

GleamTech — Sat, 10 Aug 2024 20:42:28 +0000

Ever needed to manage files, accepts uploads and offer downloads in your ASP.NET Core applications? You may need to display files to users but with different permissions. For example while one user is allowed to upload, the other user is allowed to download only. In modern browsers it's easier to handle uploads, compared to the past however you still can't upload huge files if you don't configure your server correctly and browsers still does not offer any UI for managing files. What if you could integrate a file manager which is customizable, has a modern slick look and can handle all this for you?

This post will focus on ASP.NET Core File Manager which is best on the market for this job, regarding performance and easy, straightforward API. It also supports ASP.NET Classic for legacy applications but in this post we will use the newest and best tech ASP.NET Core.

Step 1 - Create an ASP.NET Core project

Open Visual Studio 2022 and create a project by selecting ASP.NET Core Web App (MVC) template. Other ASP.NET Core templates can also be used but we will use this template for this example.
Give the project a name e.g. SampleFileManager.
Choose .NET 8.0 as framework. Older .NET versions are also supported but we will use current LTS version 8.0 for this example.

Step 2 - Add the necessary NuGet packages

Right-click on the project in Solution Explorer and select Manage NuGet Packages.
Search FileUltimate and install the found package.

Step 3 - Add the initialization code to ASP.NET Core pipeline

Open Program.cs of your project and copy only the marked lines to the same location:

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllersWithViews();

//----------------------
//Add GleamTech to the ASP.NET Core services container.
builder.Services.AddGleamTech();
//----------------------

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
  app.UseExceptionHandler("/Home/Error");
}

//----------------------
//Register GleamTech to the ASP.NET Core HTTP request pipeline.
app.UseGleamTech();
//----------------------

app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
  name: "default",
  pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

Program.cs of your project will look like this:

Step 4 - Create a view and controller which will host the file manager

Create MyFileManager.cshtml under Views\Home and replace the contents with the following:

@using GleamTech.AspNet.Core
@using GleamTech.FileUltimate.AspNet.UI

<!DOCTYPE html>
@{
    var fileManager = new FileManager
    {
        Width = 800,
        Height = 600,
        Resizable = true
    };

    var rootFolder = new FileManagerRootFolder
    {
        Name = "A Root Folder",
        Location = "~/MyRootFolder"
    };

    rootFolder.AccessControls.Add(new FileManagerAccessControl
    {
        Path = @"\",
        AllowedPermissions = FileManagerPermissions.Full
    });

    fileManager.RootFolders.Add(rootFolder);
}
<html>
    <head>
        <title>File Manager</title>
        @this.RenderHead(fileManager)
    </head>
    <body>
        @this.RenderBody(fileManager)
    </body>
</html>

Add a controller method with same name which loads our view:

public class HomeController : Controller
{
    public IActionResult MyFileManager()
    {
        return View();
    }
}

Step 5 - Run solution

Run solution which will also build the project.
When browser is launched, as we didn't add a link to our view in home page, directly type to add our controller url home/MyFileManager in the address bar (so it reads https://localhost:7034/home/MyFileManager).

The output

FileManager is now rendered in our host view and loaded the given root folder (which is empty for now). For uploading, you can drag and drop files and folders from your desktop directly to folders in FileManager. We can add many root folders to FileManager, each with different permissions.

FileManagerRootFolder.Location property can be set to a web app relative path (this example), a path on disk or network, an Azure Blob container , an Amazon S3 bucket. This is possible by location providers feature. Please refer to docs for more info and sample code on this.

Additional information

How to implement a document viewer in ASP.NET Core 8.0

GleamTech — Sat, 10 Aug 2024 19:24:10 +0000

In your ASP.NET Core applications, you may need to display documents to users. Most browsers nowadays have a built-in PDF viewer however, they look generic, are not customizable, open in new browser tab and break the flow of your application. Most importantly they can only display PDF files and not other document formats. What if you could integrate a document viewer which is customizable, has a modern slick look and can display PDF, Word, Excel, PowerPoint, Outlook, AutoCAD and many more (70+ formats)?

This post will focus on ASP.NET Core Document Viewer which is best on the market for this job, regarding performance and easy, straightforward API. It also supports ASP.NET Classic for legacy applications but in this post we will use the newest and best tech ASP.NET Core.

Step 1 - Create an ASP.NET Core project

Open Visual Studio 2022 and create a project by selecting ASP.NET Core Web App (MVC) template. Other ASP.NET Core templates can also be used but we will use this template for this example.
Give the project a name e.g. SampleDocumentViewer.
Choose .NET 8.0 as framework. Older .NET versions are also supported but we will use current LTS version 8.0 for this example.

Step 2 - Add the necessary NuGet packages

Right-click on the project in Solution Explorer and select Manage NuGet Packages.
Search DocumentUltimate and install the found package.

Step 3 - Add the initialization code to ASP.NET Core pipeline

Open Program.cs of your project and copy only the marked lines to the same location:

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllersWithViews();

//----------------------
//Add GleamTech to the ASP.NET Core services container.
builder.Services.AddGleamTech();
//----------------------

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
  app.UseExceptionHandler("/Home/Error");
}

//----------------------
//Register GleamTech to the ASP.NET Core HTTP request pipeline.
app.UseGleamTech();
//----------------------

app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
  name: "default",
  pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

Program.cs of your project will look like this:

Step 4 - Create a view and controller which will host the document viewer

Create MyDocumentViewer.cshtml under Views\Home and replace the contents with the following:

@using GleamTech.AspNet.Core
@using GleamTech.DocumentUltimate
@using GleamTech.DocumentUltimate.AspNet
@using GleamTech.DocumentUltimate.AspNet.UI

<!DOCTYPE html>
@{
    var documentViewer = new DocumentViewer
    {
        Width = 800,
        Height = 600,
        Document = "~/Documents/Document.docx"
    };
}
<html>
    <head>
        <title>Document Viewer</title>
        @this.RenderHead(documentViewer)
    </head>
    <body>
        @this.RenderBody(documentViewer)
    </body>
</html>

Add a controller method with same name which loads our view:

public class HomeController : Controller
{
    public IActionResult MyDocumentViewer()
    {
        return View();
    }
}

Step 5 - Run solution

Run solution which will also build the project.
When browser is launched, as we didn't add a link to our view in home page, directly type to add our controller url home/MyDocumentViewer in the address bar (so it reads https://localhost:7034/home/MyDocumentViewer).

The output

DocumentViewer is now rendered in our host view and loaded the given DOCX document ~/Documents/Document.docx. DocumentViewer.Document property can be set to a web app relative path (this example), a path on disk, an Azure Blob file, an Amazon S3 file, a byte array or a stream. This is possible by file providers feature. Please refer to docs for more info and sample code on this.

Forem: GleamTech

How to generate video thumbnails in ASP.NET Core 8.0

Additional information

How to customize PDF.js

Getting started

Usage

Using PdfJsKit in plain JS projects with Vite

Documentation

Live Demos

Links:

How to implement a file manager in ASP.NET Core 8.0

Step 1 - Create an ASP.NET Core project

Step 2 - Add the necessary NuGet packages

Step 3 - Add the initialization code to ASP.NET Core pipeline

Step 4 - Create a view and controller which will host the file manager

Step 5 - Run solution

The output

Additional information

How to implement a document viewer in ASP.NET Core 8.0

Step 1 - Create an ASP.NET Core project

Step 2 - Add the necessary NuGet packages

Step 3 - Add the initialization code to ASP.NET Core pipeline

Step 4 - Create a view and controller which will host the document viewer

Step 5 - Run solution

The output

Additional information