你好，FFMPEG 可視化
- 2021 年 4 月 29 日
- 筆記
- c#, ffmpeg, TidyScript, WebView2
你好，FFMPEG 可視化
給大家看看我現在的玩具：
它有哪些功能呢？如你所見，不止於此
1. 影片錄製
暫時只能錄製影片，音頻無法錄製
FFMPEG.exe 暫時只支援影片，音頻錄製需要下載額外的工具
2. 影片處理
支援簡單的分割，裁剪，以及壓縮
簡單實用
3. 影片轉Gif
支援高清模式，生成文件會更大
下載與使用
1. 安裝WebView2 RunTime
Webview2 – Microsoft Edge Developer
點擊 下載，然後安裝
2. 下載TidyView
這是WebView2的封裝
TidyView不提供任何功能，具體功能需要以App形式存在
3. 下載FFMPEG Visual
這是一個 TidyView 的App
上述是 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="//shareyun.lanzous.com/iyuEeok4p6j";
JS="main_download_ffmpeg.js";
}
2. 工作框架
從打包的角度，有兩個東西，一個是TidyView，另一個是TidyScript寫的腳本
往下面探一層，有四個東西：
- WebView2提供瀏覽器功能
- C#寫的dll提供本地化功能
- Html+JS提供頁面UI功能
- 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 結構
最後
這個玩具很不錯，既能我自己玩，也能給大家玩。
但是它還是有點簡陋，下面會把它慢慢完善
下一個玩具呢？
暫時還不知道，確定好了，再說。
