Electron flash插件

た入场券 2022-04-13 07:53 339阅读 0赞

Electron 支持 Pepper Flash 插件。要在 Electron 里面使用 Pepper Flash 插件，我们 要手动设置 Pepper Flash 的路径并且应用里启用 Pepper Flash。

我们可以在chrome浏览器中输入：chrome://version/来获取浏览器的信息  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70]  
其中flash信息就是我们想要的。  
当然了，大家也可 以去flash官网下载安装flash，安装后的目录在：C:\\Windows\\SysWOW64\\Macromed\\Flash下面。

接下来我们就开始看看怎么在electron项目中使用。这是我将pepflashplayer.dll拷贝到我工程后的目录结构（Pepper Flash 插件的操作系统必须和 Electron 的操作系统匹配。在 Windows 中， 一个常见的错误是对64位版本的 Electron 使用 32bit 版本的 Flash 插件）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 1]

在electron的官方文档中我们可以找到设置插件的方式：

const { app, BrowserWindow } = require('electron')
    const path = require('path')
    
    // 指定 flash 路径，假定它与 main.js 放在同一目录中。
    let pluginName
    switch (process.platform) {
      case 'win32':
        pluginName = 'pepflashplayer.dll'
        break
      case 'darwin':
        pluginName = 'PepperFlashPlayer.plugin'
        break
      case 'linux':
        pluginName = 'libpepflashplayer.so'
        break
    }
    app.commandLine.appendSwitch('ppapi-flash-path', path.join(__dirname, pluginName))
    
    // 可选：指定 flash 的版本，例如 v17.0.0.169
    app.commandLine.appendSwitch('ppapi-flash-version', '17.0.0.169')
    
    app.on('ready', () => {
      let win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
          plugins: true
        }
      })
      win.loadURL(`file://${__dirname}/index.html`)
    
    })
    您也可以尝试加载系统安装的 Pepper Flash 插件，而不是装运 插件，其路径可以通过调用 app.getPath('pepperFlashSystemPlugin') 获取。

这是我项目的配置：

const {resolve} = require('path');
    
    let plugins = resolve(__dirname, '../../lib/pepflashplayer64.dll')
    if (__dirname.includes(".asar")) {
        plugins = require('path').join(process.resourcesPath + '/lib/pepflashplayer64.dll')
    }
    app.commandLine.appendSwitch('ppapi-flash-path', plugins)

之所以有\_\_dirname.includes(".asar")这个判断，是因为开发环境和打包后的目录结构是不一样的。这一点大家可以在找一下打包相关的资料就知道了。

到了这里我们运行程序会发现，当我们播放一个视频的时候，仍然无法播放。此时：  
如果使用的是webview：  
在 标签里添加 plugins 属性。

如果使用的是BrowserWindow：

let win = new BrowserWindow({
            width: 800,
            height: 600,
            frame: true,
            autoHideMenuBar: true,
            maximizable: true,
            minimizable: true,
            transparent: true,
            'webPreferences': { // 注意一定要 添加这个 不然flash插件不会生效
                plugins: true,
                webSecurity: false
            }
        })

plugins: true 这个配置项是必须的。这个选项会告诉electron我们要使用插件，给个方便。。

到了这里我们在本地运行项目就不会有问题了，接下来我们就要配置一下打包的相关参数了。

在pakage.json中，我们build的配置下面内容：

"build": {
        "productName": "产品名称",
        "appId": "产品id",
        "directories": {
        //输出目录
          "output": "build" 
        },
        "files": [
          "dist/electron/**/*"
        ],
        "asar": true,
        "artifactName": "${productName}-${version}.${ext}",
        "compression": "maximum",
        "nsis": {
          "allowToChangeInstallationDirectory": true,
          "oneClick": false,
          "menuCategory": true,
          "allowElevation": false
        },
        "electronDownload": {
          "mirror": "http://npm.taobao.org/mirrors/electron/"
        },
        "dmg": {
          "contents": [
            {
              "x": 410,
              "y": 150,
              "type": "link",
              "path": "/Applications"
            },
            {
              "x": 130,
              "y": 150,
              "type": "file"
            }
          ]
        },
        "mac": {
          "icon": "build/icons/icon.icns"
        },
        "win": {
          "icon": "build/icons/icon.ico",
          "target": "nsis",
          //将特定的文件排除，不打包在asar包内
          "extraResources": "./lib/*.dll"
        },
        "linux": {
          "icon": "build/icons"
        }

其中最重要的配置就是 `"extraResources": "./lib/*.dll"` 这样的话我们的所有配置就算完成了，然后运行build，

yarn run build

打包完成后的目录如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 2]

其中exe就是我们的安装程序了。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 3]

我们的插件就在打包完成后的这个目录下，如果你运行安装程序，安装完成后的目录结构和win-unpacked目录结构是一致的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70]: /images/20220413/9264dddcc7d74fbab759cc9d825fabf2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 1]: /images/20220413/fc7164c3f8ce44cc9d1800b1cb32b22e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 2]: /images/20220413/ebb160bb24ef4e088876f10cc77d31ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 3]: /images/20220413/f29cea0aaed246379a4a25340e6f339e.png