題記

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() {
    //...
}

ppapi-flash-path 設定的時候 千萬不要 加 file://
使用 <webview> 標籤啟用外掛 並在 <webview> 標籤裡新增 plugins 屬性

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

Flash與JS通訊

困難

通過前面的步驟，可以將swf檔案插入到Electron中使用。
JS與Flash通訊已經是老生常談了，AS端使用ExternalInterface就能輕鬆實現。
但是 在Electron中似乎並不那麼容易實現，問題的關鍵點在於

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

上面的程式碼在Electron 中執行後變成了

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

swf是以本地的方式載入執行。

AS 中只要使用了 ExternalInterface 執行時就會報 #2060 錯誤
本人相當不善AS，只瞭解個大概。
查閱了網上全部解決方案，因不是針對Electron，沒有一個能實現的。

突破

百般嘗試後找到了一個辦法

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

搭建一個簡單的http服務 讓flash的執行環境變為 remote 雖然麻煩至少實現了。
看到了由 flash 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>

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>   

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>

尾記

打完收工，感覺好累。除了更深入的瞭解了一些東西，意義實在不大。
不管如何，功能可以實現了。