你好,FFMPEG 可视化
你好,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="https://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 结构
最后
这个玩具很不错,既能我自己玩,也能给大家玩。
但是它还是有点简陋,下面会把它慢慢完善
下一个玩具呢?
暂时还不知道,确定好了,再说。
posted on 2021-04-29 13:15 TypeSharp 阅读(2058) 评论(6) 编辑 收藏 举报