Electron中使用flash

最新推荐文章于 2024-08-29 14:00:47 发布

zgangjin

最新推荐文章于 2024-08-29 14:00:47 发布

阅读量3.7k

点赞数

转自：http://blog.csdn.net/sapperlab/article/details/53577046

题记

Electron可以轻松的使用 HTML5 / CSS3 / ES6 / Node.js 等等时兴技术开发。近期用Electron做一个需要通过手写实现毛笔签名，手头有一个AS3的版本。网上提供的JS算法基本都只能圆珠笔的线条效果，无法实现类似毛笔的笔锋效果。
研究预期：swf文件实现签名功能，完成后交给JS处理。

Electron 中使用flash插件

ppapi-flash插件

PPAPI是Google开发的浏览器插件接口，以沙箱模式运行插件。

在 Electron 中可以使用ppapi-flash插件加载swf程序

获取ppapi-flash插件

flash 插件安装好后，Windows系统可以在以下路径找到相应的dll文件。
C:\Windows\System32\Macromed\Flash\pepflashplayer64_23_0_0_207.dl
C:\Windows\SysWOW64\Macromed\Flash\pepflashplayer32_23_0_0_207.dll
上面依次对应 64位及 32位的插件，必须与Electron 的对应
其他系统可以通过chrome打开 chrome://plugins/ 查看插件位置
建议将插件复制到项目的目录或子目录下

使用ppapi-flash插件

在 index.js 入口文件中引入插件

//index.js 入口文件
const electron = require('electron');
const {app,BrowserWindow} = electron;
//此处仅兼容了Windows 的 32位 与 64位
const pepflashplayer = (process.arch == 'x64')? `${__dirname}/flash/pepflashplayer64_23_0_0_207.dll`:`${__dirname}/flash/pepflashplayer32_23_0_0_207.dll`;
//设定插件
app.commandLine.appendSwitch('ppapi-flash-path', pepflashplayer);
//设定插件版本（不知道是否真有用，不匹配貌似也能运行）
app.commandLine.appendSwitch('ppapi-flash-version', '23.0.0.207');
let win;
function createWindow() {
    //...
}
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
 
 1
2
3
4
5
6
7
8
9
10
11
12
13

ppapi-flash-path 设定的时候千万不要加 file://
使用 <webview> 标签启用插件并在 <webview> 标签里添加 plugins 属性

<webview id="webview" src="jsCall.swf" plugins></webview>
 
 1
 
 1

Flash与JS通信

困难

通过前面的步骤，可以将swf文件插入到Electron中使用。
JS与Flash通信已经是老生常谈了，AS端使用ExternalInterface就能轻松实现。
但是在Electron中似乎并不那么容易实现，问题的关键点在于

<webview id="webview" src="jsCall.swf" plugins></webview>
 
 1
 
 1

上面的代码在Electron 中执行后变成了

<webview id="webview" src="file:///D:/Electron/swf/jsCall.swf" plugins="" tabindex="-1"></webview>
 
 1
 
 1

swf是以本地的方式加载运行。

AS 中只要使用了 ExternalInterface 运行时就会报 #2060 错误
本人相当不善AS，只了解个大概。
查阅了网上全部解决方案，因不是针对Electron，没有一个能实现的。

突破

百般尝试后找到了一个办法

<webview id="webview" src="http://localhost/jsCall.swf" plugins></webview>
 
 1
 
 1

搭建一个简单的http服务让flash的运行环境变为 remote 虽然麻烦至少实现了。
看到了由 flash alert 出来的 123

alert 123

踩坑

实际使用时发现，按照前面分析的全部信息。发现完全无法实现想要的功能。
JS直接通过 webview 调用flash的函数会报错。

<webview id="webview" src="http://localhost/jsCall.swf" plugins></webview>
<h4 id="h4"></h4>
<script>
    var webview = document.getElementById("webview");
    var h4 = document.getElementById("h4");
    var i = 1;
    //设定一个计数器 
    setInterval(()=>{h4.innerHTML = ++i},1000);
    //页面加载完后通过 console 执行 webview.callFlash(123);
</script>
 
 1
2
3
4
5
6
7
8
9
10
 
 1
2
3
4
5
6
7
8
9
10

flash直接 ExternalInterface.call("alert",123); 弹窗时上面的计数不会停止。
webview.callFlash(123); 报错 is not a function 。
而且 webview 中也找不到子元素。

可能是 webview 机制问题，查阅了一下官方文档。

Unlike an iframe, the webview runs in a separate process than your app. It doesn’t have the same permissions as your web page and all interactions between your app and embedded content will be asynchronous. This keeps your app safe from the embedded content.

上面的内容大意是 <webview> 标签有一个独立的进程，只是被嵌入到了当前页面中。

峰回路转

仔细翻阅了 <webview> 篇的完整文档，终于找到了解决方案 —— 文档还是比网上的复制粘贴更有用。

写有 <webview> 的页面称为 host ； <webview> 加载的页面称为 guest

多添加了一个 guest 页面 jsCall.html 用来嵌套 jsCall.swf

<!--jsCall.html-->
<embed width="100%" height="100%" name="plugin" id="plugin" src="jsCall.swf" type="application/x-shockwave-flash">  
<script>
var {ipcRenderer} = require('electron');
var plugin = document.getElementById("plugin");
//接收来自 host 页面ipc 发送过来的 sendToWebView  事件
//index.html 的 webview 必须有 nodeintegration 属性
ipcRenderer.on('sendToWebView', function(event, arg) {
    //将接收来的值直接传给flash
    plugin.callFlash(arg);
});
//让flash调用的JS函数
function flashCall(string){
console.log(string)
}
function toIndex(args){
    //sendToHost 可以将消息送给 host 页面
    ipcRenderer.sendToHost("toIndex",args)
}
</script>   
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

host 页面 index.html

<!--index.html-->
<!--nodeintegration 属性表示加载的页面可以使用electron的资源-->
<webview id="webview" src="http://localhost/jsCall.html" plugins nodeintegration></webview>  
<script>
var webview = document.getElementById("webview");
//下面的代码 可以监听来自guest 页面的ipc 消息
webview.addEventListener('ipc-message', (event) =>{
  console.log(event);
});
//下面是第一种方法 通过 ipcRenderer 
webview.send('sendToWebView', 123);
//第二种方法 webview.executeJavaScript(code, userGesture, callback)
webview.executeJavaScript('window["plugin"].callFlash(123)', (event)=>{
    console.log(event);
})
</script>