Hello, FFMPEG visualization

Let me show you my current toy:

What does it do? As you can see, there’s more to it than that

1. Video recording

Ffmpeg. exe only supports video for the time being. You need to download additional tools for audio recording

2. Video processing

Support simple segmentation, clipping, and compression simple and practical

3. Transfer the video to Gif

Support hd mode, the generated file will be larger

Download and Use

1. Install WebView2 RunTime

Webview2 – Microsoft Edge Developer



Click Download and install

2. Download TidyView

This is a wrapper around WebView2

👉Baidu net disk TidyVew password: Tidy

TidyView does not provide any functions, the specific functions need to exist in the form of App

Download FFMPEG Visual

This is a TidyView App

👉Baidu net disk FFMPEG Visual password: Tidy

This is the FFMPEG Visual directory structure where main.edge is the entry program

4. Open FFMPEG Visual

Right click main.edge 👉 open method 👉 select other application 👉 More application 👉 on this computer select other application 👉 find tidyView.exe open

Next time, check itAlways open the.edge file using this applicationCan be

5. First use

The first time you use it, the program automatically downloads ffmpeg.exe

When the download is complete, the main page will be displayed

Boring link

Now comes the technical part

1. What is the main. Edge?

TidyScript is actually a script file, TidyScript, 👉 the TidyScript team has C# syntax, but also some features of JavaScript is slow, but high flexibility

log.clear();

var Url;
var JS;

void download(string url)
{
  var path=Environment["ScriptDir"] +"\\ffmpeg.zip";
  var downitem={};
  downitem.url=url;
  downitem.path=path;
  downitem.file="FFMPEG.exe";
  downitem.dest="Core program for video manipulation.";
  var params= {};params.download=[];
  params.download.Add(downitem);
  Launch("Download/download.edge".params);
}

void OnLoad()
{
  EvalJS($"_tool_bar_ini({file.read(locate("plugins.json"))})");
}

void LoadPage(string Page)
{
  Launch("frame",Page);
}

if(file.exists(locate("ffmpeg.exe")))
{
  Url="main.html";
  JS="main.js";
}
else if(file.exists(locate("ffmpeg.zip")))
{
  Url="main.html";
  JS="main.js";
  zip.uncompress(locate("ffmpeg.zip"),Environment["ScriptDir"] as string);
  thread.sleep(1000);
  file.delete(locate("ffmpeg.zip"));
}
else
{
  Url="https://shareyun.lanzous.com/iyuEeok4p6j";
  JS="main_download_ffmpeg.js";
}
Copy the code

2. Work framework

From a packaging perspective, there are two things, one is a TidyView, the other is a script written by TidyScript and if you go down a layer, there are four things:

  1. WebView2 provides browser functionality
  2. DLLS written in C# provide localization capabilities
  3. Html+JS provides page UI functionality
  4. Scripts written by TidyScript provide business functions

If you take WebView2 as the base, and you ignore it, it’s this structure.

3. Workflow



4. Interactive scheme

Each page is injected with basic JS

var edge = window.chrome.webview.hostObjects.edge;
var _id = (id) = > { return document.getElementById(id); };
var _attr = (id, name) = > { return document.getElementById(id).getAttribute(name) };
var call = (name, ... args) = >{ edge.CallApp(app_frame_path, name, ... args) };var _frame = (frame_path) = >
{
    var paths = frame_path.split(".");
    var last = null;
    for (var i in paths) {
        if (last == null) {
            last = document.getElementById(paths[i]);
        }
        else{ last = last.contentDocument.getElementById(paths[i]); }}return last;
};
Copy the code

Suppose a TidyScript script looks like this

void Hello()
{
    EvalJS("console.log('hello world')");
}
void Hello(string Name)
{
    EvalJS($"console.log('hello world {Name}')");
}
Copy the code

It’s very easy to call a function in TidyScript in JS and just say call(“Hello”) in JS or call(“Hello”,”TidyScript”)

So how does TidyScript call JS? EvalJS(“console.log(‘ Hello world’)”) is an ExecuteScriptAsync(string Script) from WebView2.

namespace Microsoft.Web.WebView2.WinForms
{
    public class WebView2 : Control.ISupportInitialize
    {
        public WebView2();
        //....
        public Uri Source { get; set; }
        public CoreWebView2 CoreWebView2 { get; }
        public CoreWebView2CreationProperties CreationProperties { get; set; }
        protected override CreateParams CreateParams { get; }
        // The following method provides the ability to run JS scripts
        public Task<string> ExecuteScriptAsync(string script);
        public void GoBack();
        / /...}}Copy the code

FFMPEG Visual structure

The last

This toy is very good, can play with myself, also can play for everyone. But it’s still a little rough and ready, so what about the next toy? I don’t know yet. We’ll see when we’re sure.