你好，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 结构

最后

这个玩具很不错，既能我自己玩，也能给大家玩。

但是它还是有点简陋，下面会把它慢慢完善

下一个玩具呢？

暂时还不知道，确定好了，再说。