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

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

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

相关推荐

Linux :远程访问的 16 个最佳工具(一)

通过远程桌面协议(RDP)可以访问远程Linux桌面计算机,这是Microsoft开发的专有协议。它为用户提供了一个图形界面,可以通过网络连接连接到另一台/远程计算机。FreeRDP是...

Guacamole安装部署_guacamole简单搭建

Guacamole安装部署Guacamole简介Guacamole是提供连接远程桌面的解决方案的开源项目(也可以说是一个远程桌面网关),通过浏览器就能远程操作服务器,适用于Chrome、Firefox...

1-FreeRTOS入门指南_freertos+lwip

本专栏是根据官方提供的文档进行FreeRTOS的各个功能函数的说明,以及函数的使用本专栏不涉及动手操作,只是对原理进行说明,FreeRTOS基础知识篇更新完成会对如何在开发板上进行上手实战操作。这里不...

Windows暂停远程桌面,这些工具可替代

Windows暂停远程桌面,这些工具可替代近日,Windows官方宣布将于2025年5月27日起,在Windows10和Windows11应用商店中下架“Microsoft远程桌面”应用。这一消...

现在做 Web 全景合适吗?_前端全景

作者:前端藏经阁转发链接:https://www.yuque.com/xwifrr/uxqg5v/cgclx0前言Web全景在以前带宽有限的条件下常常用来作为街景和360°全景图片可查看。它可以...

网页直连,MSTSC远程控制Windows新姿势!

不用安装软件,打开浏览器就能远程办公?今天要聊的是一种颠覆传统的远程控制玩法,直接用网页连接Windows电脑,无需下载客户端,手机、平板、Mac甚至Linux都能轻松操作。这可不是吹牛,结合MSTS...

QQ出现大面积盗号,原因已查明,请抓紧改密码

你没有看错,QQ又上了微博热搜,这次比较严重了,QQ出现大面积盗号,多个QQ群出现yellow信息,其次导致多位成员被踢出,并且还被封号处理,到底怎么回事?请继续往下看。在6月26日晚上10点左...

我在淘宝花10块钱,买到了能玩“宝可梦”的Q群机器人

十一月雨|文我是个没事喜欢逛淘宝的人,虽然是个不怎么好的习惯,但总是能够发现一些奇奇怪怪的东西,这次我发现的是一种Q群机器人。Q群机器人,大多是基于腾讯SmartQQ协议实现的一种能自动回复、自定...

Metasploit最实用的攻击模块&quot;Meterpreter&quot;

Meterpreter命令详解Meterpreter是Metasploit渗透测试平台框架中功能最强大的攻击载荷模块,在最新的Metasploitv4.5.0版本中,攻击载荷模块已经达到了25...

手机QQ再更新,上线了一个想让人“无法回避”的新功能

近日,手机QQ更新了V8.2.6.700版本,苹果iOS版和安卓版手机QQ上线了一个新功能:可以实时显示对方的手机电量以及充电状态。开通电量显示也很简单,长按主页左上方的头像,在在线状态中选择我的电量...

「网络安全」常见攻击篇(20)——点击劫持

什么是点击劫持?点击劫持(Clickjacking)技术又称为界面伪装攻击(UIredressattack),是一种视觉上的欺骗手段。通常有两种方式:攻击者使用一个透明的iframe,覆盖...

曾利用驱动人生升级通道传播的木马下载器攻击方法再次升级

一、概述御见威胁情报中心1月25日再次监测到曾利用驱动人生升级通道传播的木马下载器攻击方法再升级。本次升级主要变化在于攻击模块,木马在之前的版本上,新增计划任务“DnsScan”,在其中将永恒之蓝攻击...

QQ飞车手游:点券首个功能性宠物上架,实战稳定触发还不快入手?

随着版本的逐渐更新,点券宠物在道具模式发挥逐渐越来越小,曾经探讨点券宠物在道具是不是真的没有用?直到出现了波斯猫改变了,我对点券宠物在道具模式的看法,如今又一个强势点券宠物来袭,而且特性触发简单,还是...

工单系统设计实战(上):核心配置与效能提升

流程的标准化并非终点,而是研发效能持续革命的基石。当工单系统真正成为研发团队的“神经中枢”,每一次需求的精准流转、每一行代码的受控提交、每一次版本的可靠发布,都将汇聚成驱动产品持续进化的强大动力...

6个编辑PDF文档内容的工具(软件+网站)

在日常办公、学习和生活中,PDF文件因其格式稳定、跨平台兼容性强等特点,被广泛应用。但有时我们拿到PDF文件后,却发现需要修改其中的内容,总感觉有点难搞。其实PDF文档编辑修改也很简单,这里分享6个软...

取消回复欢迎 发表评论: