Overview

jVideoUPloader is a portable script for ASP.NET Core applications that can be used to upload & conver videos in real time.

Pre-Requisites

The following pre-requisites before you intgrate jVideoUPloader in your application.

  • ASP.NET Core Runtime 2.2 or later
  • FFMPEG Binary

Installation

  • Download FFMPEG from
  • Unzip & paste ffmpeg binary in /wwwroot/encoder/ directory.
  • Go to /models/EncodingSettings.cs file and adjust ffmpeg path according to your directory properly.
  • Give write / execute permission to /wwwroot/encoder/ directory
  • Give write permission to /wwwroot/uploads/ directory where media files will be saved.
  • Go to /models/EncodingSettings.cs and under returnEncodingTemplates function adjust video publishing options. By default it support publishing each video to 360p, 480p & 720p format.

Integration

jVideoUPloader can be easily integrate in any existing application. Main component is located at /Views/Home/uploader/UploaderComponent.cshtml

Below cod for integrating it within your asp.net core application.

    // setup options 
    var uploadsettingsModelView = new Jugnoon.Entity.UploaderSettingsModelView()
    {
       maxFileSize = "10mb",
       extensions = "mp4,avi,wmv,flv,mpeg,mpg",
       handlerpath = "/api/uploader/upload",
       maxallowedfiles = 3
    };
    // return publishing template options 
    // please adjust the list with your requirements
    var encodingTemplates = Jugnoon.Entity.EncodingSettings.returnEncodingTemplates();
    <partial name="~/Views/Home/uploader/UploaderComponent.cshtml"

Note as jVideoUPloader is a jQuery plugin you have to add component javascript reference files on page script section as shown below.

@section Scripts {
    <script>
        var plupload_settings = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(uploadsettingsModelView));
        var templates = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(encodingTemplates));
    </script>
    <script src="~/js/plupload/js/plupload.full.min.js"></script>
    <script src="~/js/vuploader.js"></script>
}

Publishing Template

jVideoUPloader allow you to easily configure & extend publishing template. By default it support the following conversion templates

  • 360p
  • 480p
  • 720p
  • 1080p

You can access function returnEncodingTemplates function responsible for generating & sending publishing option to uploader.

return new List()
{
    new EncodingOptionModelView()
    {
        key = "360p",
        presetID = "1001",
        prefix = "-360p.mp4",
        applyMeta = true,
        generateThumbnails = false
    },
    new EncodingOptionModelView()
    {
        key = "480p",
        presetID = "1002",
        prefix = "-480p.mp4",
        applyMeta = true,
        generateThumbnails = false
    },
    new EncodingOptionModelView()
    {
        key = "720p",
        presetID = "1003",
        prefix = "-720p.mp4",
        applyMeta = true,
        generateThumbnails = true
    }/*,
    new EncodingOptionModelView()
    {
        key = "1080p",
        presetID = "1004",
        prefix = "-1080p.mp4",
        applyMeta = true,
        generateThumbnails = true
    }*/
};

You can add more options e.g adding HLS or MPEG-DASH support or add more custom options to meet the uploader with your requirements.

Encoding Presets

The following presets & encoding parameters used by jVideoUPloader. You can adjust it with your own requirements

public static string returnPreset(string presetID)
{
    var preset = "-s 640x380 -c:v libx264 -preset medium -crf 22 -b:v 500k -b:a 128k -profile:v baseline -level 3.1";
    switch (presetID)
    {
        case "1001":
            // 360p
            preset = "-s 640x380 -c:v libx264 -preset medium -crf 22 -b:v 500k -b:a 128k -profile:v baseline -level 3.1";
            break;
        case "1002":
            // 480p
            preset = "-s 854x480 -c:v libx264 -preset fast -crf 22 -b:v 1000k -b:a 128k -profile:v baseline -level 3.1";
            break;
        case "1003":
            // 720p
            preset = "-s 1280x720 -c:v libx264 -preset fast -crf 22 -b:v 5000k -b:a 128k -profile:v baseline -level 3.1";
            break;
        case "1004":
            // 1080p
            preset = "-s 1920x1080 -c:v libx264 -preset fast -crf 22 -b:v 8000k -b:a 128k -profile:v baseline -level 3.1";
            break;
    }
    return preset;
}