当前位置 博文首页 > TidyScript:你好,FFMPEG 可视化

    TidyScript:你好,FFMPEG 可视化

    作者:TidyScript 时间:2021-04-29 18:16

    FFMPEG可以干很多事,但是都是命令行。 我就想着把命令行用UI来展示。 UI很多方案,我想试试WebView2。

    你好,FFMPEG 可视化

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

    image

    它有哪些功能呢?如你所见,不止于此

    1. 视频录制

    image

    暂时只能录制视频,音频无法录制
    FFMPEG.exe 暂时只支持视频,音频录制需要下载额外的工具

    2. 视频处理

    image

    支持简单的分割,裁剪,以及压缩
    简单实用

    3. 视频转Gif

    image

    支持高清模式,生成文件会更大

    下载与使用

    1. 安装WebView2 RunTime

    Webview2 - Microsoft Edge Developer
    image
    点击 下载,然后安装

    2. 下载TidyView

    这是WebView2的封装

    ??百度网盘 TidyVew 密码:Tidy
    image

    TidyView不提供任何功能,具体功能需要以App形式存在

    3. 下载FFMPEG Visual

    这是一个 TidyView 的App

    ??百度网盘 FFMPEG Visual 密码:Tidy
    image

    上述是 FFMPEG Visual 的目录结构
    其中 main.edge 便是入口程序

    4. 打开FFMPEG Visual

    右键 main.edge ?? 打开方式 ?? 选择其他应用
    ?? 更多应用 ?? 在这台电脑上选择其他应用 ?? 找到TidyView.exe ?? 打开

    下次打开,勾选 始终使用此应用打开.edge文件即可
    image

    5. 第一次使用

    第一次使用时,程序会自动下载ffmpeg.exe
    下载完成后,会进入主页面
    image

    枯燥环节

    下面便是技术环节了

    1. 啥是main.edge?

    其实就是一个脚本文件,TidyScript,??TidyScript小组
    有C#的语法,也有JavaScript的一些特征
    运行速度慢,但是灵活性高

    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. 工作框架

    从打包的角度,有两个东西,一个是TidyView,另一个是TidyScript写的脚本
    往下面探一层,有四个东西:

    1. WebView2提供浏览器功能
    2. C#写的dll提供本地化功能
    3. Html+JS提供页面UI功能
    4. TidyScript写的脚本提供业务功能

    如果把WebView2作为基础件,忽略掉,就是下面这个结构。

    image

    3. 工作流程

    image
    image

    4. 交互方案

    每个页面都会注入基本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;
    };
    

    假设一个TidyScript脚本如下

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

    JS中调用TidyScript中的函数就很简单
    直接在JS中这样写:call("Hello")
    或者这样写:call("Hello","TidyScript")

    那么TidyScript如何调用JS呢?
    其实上面的代码已经告诉我们答案:EvalJS("console.log('hello world')")
    其核心功能是WebView2提供的
    ExecuteScriptAsync(string Script)

    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 结构

    image

    最后

    这个玩具很不错,既能我自己玩,也能给大家玩。
    但是它还是有点简陋,下面会把它慢慢完善
    下一个玩具呢?
    暂时还不知道,确定好了,再说。

    bk