你好，FFMPEG 可视化

给大家看看我现在的玩具：

它有哪些功能呢？如你所见，不止于此

1. 视频录制

2. 视频处理

3. 视频转Gif

下载与使用

1. 安装WebView2 RunTime

Webview2 - Microsoft Edge Developer

点击 下载，然后安装

2. 下载TidyView

👉百度网盘 TidyVew 密码：Tidy

3. 下载FFMPEG Visual

👉百度网盘 FFMPEG Visual 密码：Tidy

4. 打开FFMPEG Visual

5. 第一次使用

枯燥环节

1. 啥是main.edge?

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="用于视频操作的核心程序";
  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";
}

2. 工作框架

3. 工作流程

4. 交互方案

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;
};

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

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; }
        //下面这个方法提供运行JS脚本功能
        public Task<string> ExecuteScriptAsync(string script);
        public void GoBack();
        //.....
    }
}

FFMPEG Visual 结构

最后