百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

嵌入开源 Flash 控件 Ruffle 桌面版与 Web 版的 2 种方法

cac55 2024-10-27 08:25 55 浏览 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。

相关推荐

毕亚兹CAT6六类千兆网线,快的不止一点点

相信大家在使用过程中都有这样的感触,使用笔记本连接WiFI虽然没有线的束缚,移动更方便,但在信号的稳定性上却相当打折扣。特别一些百兆路由器,WiFi信号在穿墙之后就衰减的特别厉害。为了让日常使用更为省...

千兆网有必要用超六类网线吗(千兆网有必要用超六类网线吗?)

在千兆网络中是否需要使用超六类网线(Cat6a),需结合具体需求和场景综合判断:一、超六类网线的优势更高的性能传输频率达500MHz,支持10Gbps速率(远超千兆需求),未来升级万兆无需换线。...

网线1-8芯都通,线序也正常!测线器显示一千兆

这是什么操作?疑似不会打水晶头?当客户说要我把这根线换了的时候,小脑都干萎缩了。大家好,我是沈阳穿线大神。客户说家里网速从装修后就没达标过,一度怀疑是网线不太好。当上门打开多媒体箱一看,线路确实不太好...

千兆网线VS百兆网线:性能对比与选择指南

千兆网线vs百兆网线:性能对比与选择指南在现代网络中,千兆以太网和百兆以太网是两种常见的有线局域网(LAN)标准。接下来将对千兆网线和百兆网线进行性能对比,并提供一个选择指南,帮助大家更好地理解它们的...

入户弱电箱到电视柜只有一根网线?单线复用跑不满千兆?

今天根据预约前往徐汇区某客户家上门升级网线。上门前已与客户沟通得知已有两波人马上门无法解决问题。到现场勘察网络结构。客户家入户办理的是电信的千兆宽带。弱电箱到电视柜只有一根网线,所以客户找朋友帮他...

网线选择指南:千兆网不是开玩笑,升级你的网线吧!

想给家里拉网线,却被网线种类搞晕了?不用担心,小编来帮你梳理一下!,你是否曾经为家里的网线选择而犯愁?不用担心,这篇文章将为你梳理一下各类网线的区别,让你轻松选出最适合你的网线。五类线传输速率仅为百兆...

科普 | 网线数据传输最远距离(网线传输距离最远多长信号稳定)

了解过网线的用户都知道,双绞线有一个“无法逾越”的“100米”传输距离,无论是哪一类的网线,即便是百兆网线、千兆网线、万兆网线,最远的传输距离都是一样的100米,而且在综合布线规范中,也明确要求水平布...

网线做1236有效距离能传输多远?(网线1236接法有顺序吗)

我们用的网线标准接法是T568B的线序来接入水晶头,按照标准接法,我们按顺序接入网线的8根线芯。网线使用1236编号的芯线传输数据,也就是1.2用于发送,3.6用于接收(来自线缆博士),另外四根线45...

3招辨别百兆网线和千兆网线?(如何区别百兆和千兆网线)

网线是连接局域网必不可少的,但是现在人们对网速的要求越来越高,网线也有了不同的分类,常见的有五类线、超五类线、六类线、七类线等,但我们不懂行的人可能就只知道百兆网线与千兆网线,那么这两种网线有什么不同...

网线8芯线各自作用是什么?几种常用的网线定义行业标准

许多朋友都遇到过网线装宽带时选择网线类型的问题,以及家里装修时需要铺设网线如何选择的问题等。那么网线到底是选择8芯的还是4芯的呢?8芯网线的每个芯都用到了吗?每芯的作用又是什么呢?接下来在这里分享8芯...

网线水晶头还有大小之分?超六类网线能插超五类的水晶头吗?

不知道大家有没有做过这种蠢事呢?前不久绿豆就有朋友干过让人啼笑皆非的事情。他为了把家里闲置网线利用起来,连接笔记本使用。结果从网上买了水晶头后怎么插都插不进去,后来才知道原来是买错了。网线是超六类线,...

超五类网线能支持千兆网络吗?(超五类网线能支持千兆网络吗怎么设置)

超五类非屏蔽网线是在对现有的五类屏蔽双绞线的部分性能加以改善后出现的电缆,不少性能参数,比如近端串扰、衰减串扰比,回波损耗等有所提高。但目前来说,超五类网线的传输带宽仍然为100MHz。虽然超五类非屏...

4种方法快速鉴别百兆/千兆/万兆网线

在购买网线时,我们经常会遇到百兆/千兆/万兆的疑惑,想买的网线到底是属于哪一种?本文将围绕4种鉴别方式,更快让用户能够分清楚这三种常规区别。一、看网线护套上的英文标识这是最简单也是最快速的判别方式,下...

我们做事要想快速成功,首先就得看教程,才会事半功倍

我们做事要想快速成功,首先就得看教程,才会事半功倍要想快速解决问题,还是要先看教程,学习别人成功的路子,往往就会事半功倍,容易成功,千万不要自己钻研。比如,有人自己修网络,弄了一天,也没修好。会修网的...

百兆网线和千兆网线有什么区别(百兆网线和千兆网线速度有多大区别)

百兆和千兆主要指的是我们在使用的网络中的传输速度。百兆和千兆的区别指的就是他们的带宽问题,也就是能允许多大的数据量通过。百兆网线和千兆网线指的是可以满足百兆网络和千兆网络的传输速度的线缆。一般来说,百...

取消回复欢迎 发表评论: