嵌入开源 Flash 控件 Ruffle 桌面版与 Web 版的 2 种方法
qiyuwang 2024-10-12 22:33 17 浏览 0 评论
方法一、使用基于微软 WebView2 的 web.view 嵌入 JS 版 Ruffle
Ruffle 是一个开源免费的 Flash 播放器,网页版 ruffle.js 体积很小,打个包 1.7 MB,调用也非常简单。aardio 标准库中的 web.view ( WebView2 ) 可以完美支持 ruffle.js ,不过我们先要解决 2 个小问题:
1、ruffle.js 通过网址加载 Flash 动画不太正常会报错,但是直接内存加载动画数据没问题。
2、浏览器不能直接用代码访问本地文件。
我们先使用 external 接口导出 aardio 函数来解决上面的问题,使用 aardio 将远程或本地的 swf 文件先读入到内存,再转换为字节数组传给 ruffle.js 就可以了,关键代码如下:
import web.view;
var wb = web.view(winform);
wb.external = {
getSwf = function(){
//可返回包含 SWF 文件二进制数据的数组、SAFEARRAY,buffer
return com.SafeArrayV( inet.http.get("https://update.aardio.com/v10.files/demo/transparent.swf") );
//本地文件可以直接返回 buffer
return string.loadBuffer("\res\tet.swf");
};
}
给 ruffle.js 返回数组就行(buffer、数组、COM 数组都行), 要注意 string.load 加载文件返回的是字符串,string.loadBuffer() 返回的是字节数组。
网页里面用下面的 JavaScript 加载 Flash 动画:
const ruffle = window.RufflePlayer.newest();
const player = ruffle.createPlayer();
player.style.width = "100vw";
player.style.height = "100vh";
const container = document.getElementById("container");
container.appendChild(player);
player.load({data: await aardio.getSwf() });
在 JS 里用 aardio.getSwf() 调用 aardio 导出的 wb.external.getSwf() 函数,注意所有本地函数在 WebView2 里都是异步函数,所以用了 await 取返回值( 要在异步函数里才能使用 await )。
ruffle.js 最好是通过 HTTP 服务器加载,这在 aardio 中很容易解决,如果创建了 aardio 工程,只要简单地将所有网页以及 ruffle.js 添加到工程的资源目录内,然后用类似:
wb.go( wsock.tcp.simpleHttpServer.startUrl("/res/swf/index.html") )
打开网页就可以了,aardio 会自动使用 HTTP 协议内存加载这个资源目录下的所有文件(可以发布为独立 EXE 文件)。
写范例的时候为了方便大家复制就可以运行,没有创建工程文件,HTML代码与 aardio 代码混写在一起,所以我写了一个扩展库 web.ruffle 用于获取通过 HTTP 服务器访问 ruffle.js 的地址。
首先在 aardio 中导出 getRuffleScriptSrc 函数:
import web.ruffle;
import web.view;
var wb = web.view(winform);
wb.external = {
getSwf = function(){
return com.SafeArrayV( inet.http.get("https://update.aardio.com/v10.files/demo/transparent.swf") );
};
getRuffleScriptSrc = function(){
return web.ruffle.getUrl("/ruffle/ruffle.js");
};
}
然后在 HTML 代码中添加一个空的 script 元素:
<script id="ruffle"></script>
然后在 JavaScript 中调用 aardio 函数获取到 ruffle.js 的地址并加载该 JS:
var ruffleScript = document.getElementById("ruffle");
ruffleScript.src = await aardio.getRuffleScriptSrc();
完整范例源码请参考 「 aardio 范例 / Web 界面 / web.view / Flash 」
方法二、嵌入 Ruffle 桌面版:钩住外部进程窗口
aardio 扩展库 process.ruffle —— 可以让 Ruffle 桌面版的窗口嵌入我们的软件界面。这个库之前的实现是把 Ruffle 创建的桌面独立窗口加上 WS_CHILD 样式变为子窗口,再指定父窗口,调整大小后嵌入我们的界面。但是这种方式 —— 有时候会出现一些奇怪的问题( 例如 Flash 动画卡住,鼠标晃一下才会动 )。
在 aardio 里还有一个更好的选择:我们可以用 orphanWindow 功能将独立窗口伪装为子窗口,关键代码只有一句:
this._form.orphanWindow(,this.hwndFlash);
Ruffle 桌面版打开 Flash 会创建一个带标题栏,带边框的独立窗口,如果在打开 Flash 动画以后再去移除窗口边框 —— 那就会看到带边框的窗口在屏幕上一闪而过。下面我们就来解决这个问题。
首先我们用 process.apiHook 替代 process 创建 Ruffle 进程:
this.apiHook = process.apiHook(ruffleExePath,args,{
suspended = true;//启动后暂停
});
注意参数里指定了进程启动后暂停,下面安装好 API 钩子以后再恢复运行。
下面先安装钩子拦截创建窗口的 API 函数 CreateWindowExW ,以及设置窗口位置的函数 SetWindowPos 。关键代码如下:
//安装 HOOK
this.hookCreateWindowEx = this.apiHook.install("User32.dll"
,"CreateWindowExW","CreateWindowExHook.dll","_CreateWindowExHook@48");
this.hookSetWindowPos = this.apiHook.install("User32.dll"
,"SetWindowPos","CreateWindowExHook.dll","_hookSetWindowPos@28");
然后再获取外部进程的 hookSet 函数并转换为 aardio 函数调用:
var hookSet = this.process.remoteApi("void(addr pc,addr ps,addr hwndHost)"
,"CreateWindowExHook.dll","hookSet","cdecl");
hookSet(
this.hookCreateWindowEx.addrTrampoline,//这是原来的 CreateWindowEx 函数指针地址
this.hookSetWindowPos.addrTrampoline,//这是原来的 SetWindowPos 函数指针地址
this._form.hwnd
);
现在可以用下面的代码让进程继续运行了:
this.process.resume();
再加上下面的代码保证主进程退出时 ruffle.exe 也会自动退出:
this.process.assignToJobObject(..process.job.limitKill);
DLL 的源代码很少,在 process.ruffle 扩展库目录下可以找到。要注意 Ruffle 创建了多个窗口,设置参数要避免改动不可见的那个窗口。
测试一下:
调用范例:
import win.ui;
/*DSG{{*/
var winform = win.form(text="开源 Flash 控件 Ruffle";right=759;bottom=512)
winform.add(
static={cls="static";text="Static";left=3;top=1;right=758;bottom=443;db=1;dl=1;dr=1;dt=1;z=1}
)
/*}}*/
import process.ruffle;
var ruffle = process.ruffle(winform.static);
winform.show();
//自定义 Flash 参数
ruffle.flashVars = {k="v",k2=123};
//也可以打开本地文件
ruffle.go("https://ruffle.rs/demo/swfs/wasted_sky.swf");
win.loopMessage();
请注意 Ruffle 桌面版不支持 Win7。
相关推荐
- 基于Docker方式安装与部署Camunda流程引擎
-
1Camunda简介官网:https://docs.camunda.org/manual/7.19/installation/docker/Camunda是一个轻量级、开源且高度灵活的工作流和决策自...
- 宝塔Linux面板如何部署Java项目?(宝塔面板 linux)
-
通过宝塔面板部署Java还是很方便的,至少不需要自己输入tomcat之类的安装命令了。在部署java项目前,我还是先说下目前的系统环境,如果和我的系统环境不一样,导致部署不成功,那你可能需要去找其他资...
- 浪潮服务器如何用IPMI安装Linux系统
-
【注意事项】此处以浪潮服务器为例进行演示所需使用的软件:Chrome浏览器个人PC中需要预先安装java,推荐使用jdk-8u181-windows-x64.exe【操作步骤】1、在服务器的BIOS中...
- Centos7环境Hadoop3集群搭建(hadoop集群环境搭建实验报告)
-
由于项目需要存储历史业务数据,经过评估数据量会达到100亿以上,在原有mongodb集群和ES集群基础上,需要搭建Hbase集群进行调研,所以首先总结一下Hadoop集群的搭建过程。一、三个节点的集群...
- Hadoop高可用集群搭建及API调用(hadoop高可用原理)
-
NameNodeHA背景在Hadoop1中NameNode存在一个单点故障问题,如果NameNode所在的机器发生故障,整个集群就将不可用(Hadoop1中虽然有个SecorndaryNameNo...
- 使用Wordpress搭建一个属于自己的网站
-
现在开源的博客很多,但是考虑到wordpress对网站的seo做的很好,插件也多。并且全世界流量排名前1000万的网站有33.4%是用Wordpress搭建的!所以尝试用Wordpress搭建一个网站...
- Centos 安装 Jenkins(centos 安装ssh)
-
1、Java安装查看系统是否已安装Javayumlistinstalled|grepjava...
- Java教程:gitlab-使用入门(java中的git)
-
1导读本教程主要讲解了GitLab在项目的环境搭建和基本的使用,可以帮助大家在企业中能够自主搭建GitLab服务,并且可以GitLab中的组、权限、项目自主操作...
- Dockerfile部署Java项目(docker部署java应用)
-
1、概述本文主要会简单介绍什么是Docker,什么是Dockerfile,如何安装Docker,Dockerfile如何编写,如何通过Dockerfile安装jar包并外置yaml文件以及如何通过do...
- 如何在Eclipse中搭建Zabbix源码的调试和开发环境
-
Zabbix是一款非常优秀的企业级软件,被设计用于对数万台服务器、虚拟机和网络设备的数百万个监控项进行实时监控。Zabbix是开放源码和免费的,这就意味着当出现bug时,我们可以很方便地通过调试源码来...
- Java路径-02-Java环境配置(java环境搭建及配置教程)
-
1Window环境配置1.1下载...
- 35.Centos中安装python和web.py框架
-
文章目录前言1.Centos7python:2.Centos8python:3.进行下载web.py框架然后应用:4.安装好之后进行验证:5.总结:前言...
- 《我的世界》服务器搭建(我的世界服务器如何搭建)
-
1.CentOS7环境1.1更改YUM源#下载YUM源文件curl-o/etc/yum.repos.d/CentOS-Base.repohttps://mirrors.aliyun.com...
- CentOS 7 升级 GCC 版本(centos7.4升级7.5)
-
1.GCC工具介绍GCC编译器:...
- Linux安装Nginx详细教程(linux安装配置nginx)
-
环境准备1.因为Nginx依赖于gcc的编译环境,所以,需要安装编译环境来使Nginx能够编译起来。命令:yuminstallgcc-c++显示完毕,表示安装完成:2.Nginx的http模块需要...
你 发表评论:
欢迎- 一周热门
- 最近发表
-
- 基于Docker方式安装与部署Camunda流程引擎
- 宝塔Linux面板如何部署Java项目?(宝塔面板 linux)
- 浪潮服务器如何用IPMI安装Linux系统
- Centos7环境Hadoop3集群搭建(hadoop集群环境搭建实验报告)
- Hadoop高可用集群搭建及API调用(hadoop高可用原理)
- 使用Wordpress搭建一个属于自己的网站
- Centos 安装 Jenkins(centos 安装ssh)
- Java教程:gitlab-使用入门(java中的git)
- Dockerfile部署Java项目(docker部署java应用)
- 如何在Eclipse中搭建Zabbix源码的调试和开发环境
- 标签列表
-
- navicat无法连接mysql服务器 (65)
- 下横线怎么打 (71)
- flash插件怎么安装 (60)
- lol体验服怎么进 (66)
- ae插件怎么安装 (62)
- yum卸载 (75)
- .key文件 (63)
- cad一打开就致命错误是怎么回事 (61)
- rpm文件怎么安装 (66)
- linux取消挂载 (81)
- ie代理配置错误 (61)
- ajax error (67)
- centos7 重启网络 (67)
- centos6下载 (58)
- mysql 外网访问权限 (69)
- centos查看内核版本 (61)
- ps错误16 (66)
- nodejs读取json文件 (64)
- centos7 1810 (59)
- 加载com加载项时运行错误 (67)
- php打乱数组顺序 (68)
- cad安装失败怎么解决 (58)
- 因文件头错误而不能打开怎么解决 (68)
- js判断字符串为空 (62)
- centos查看端口 (64)