你好，FFMPEG 可视化

你好，FFMPEG 可视化

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

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

1. 视频录制

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

2. 视频处理

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

3. 视频转Gif

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

下载与使用

1. 安装WebView2 RunTime

Webview2 - Microsoft Edge Developer

点击 下载，然后安装

2. 下载TidyView

这是WebView2的封装

👉百度网盘 TidyVew 密码：Tidy

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

3. 下载FFMPEG Visual

这是一个 TidyView 的App

👉百度网盘 FFMPEG Visual 密码：Tidy

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

4. 打开FFMPEG Visual

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

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

5. 第一次使用

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

枯燥环节

下面便是技术环节了

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作为基础件，忽略掉，就是下面这个结构。

3. 工作流程

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

最后

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