How to integrate Adobe Flash Plugin with Electron in your Quasar Framework project



  • How to integrate Adobe Flash Plugin with Electron in your Quasar Framework project

    General Instructions

    1. Under your src-electron folder, create a folder called ppapi-flash-plugin and separate subfolders for your supported platforms (linux, win32, darwin) and architectures (ia32, x64).

    2. Under each platform/architecture subfolder, put a copy of the plugin binary and manifest.json companion file. If needed, rename the binary files to pepflashplayer.dll (Windows), PepperFlashPlayer.plugin (macOS) or libpepflashplayer.so (Linux).

    3. Set your quasar.conf.js file as follows:

    const qTarget = ctx => ctx.targetName || process.platform
    
    const qArch = ctx => ctx.archName || process.arch
    
    const pluginDir = ctx =>
      `src-electron/ppapi-flash-plugin/${qTarget(ctx)}/${qArch(ctx)}`
    
    const pluginName = ctx =>
      qTarget(ctx) === 'win32'
        ? 'pepflashplayer.dll'
        : qTarget(ctx) === 'darwin'
          ? 'PepperFlashPlayer.plugin'
          : 'libpepflashplayer.so'
    
    module.exports = function (ctx) {
      return {
        // (...)
        build: {
          // (...)
          extendWebpack (cfg) {
            // (...)
            // Optional, only if you want to include local .swf files in your bundle.
            cfg.module.rules.push({
              test: /\.swf$/,
              loader: 'file-loader'
            })
          }
        },
        electron: {
          // (...)
          packager: {
            // (...)
            extraResource: [
              `${pluginDir(ctx)}/${pluginName(ctx)}`,
              `${pluginDir(ctx)}/manifest.json`
            ]
          }
        }
      }
    }
    
    1. Set your src-electron/main-process/electron-main.js file as follows:
    import { app, BrowserWindow } from 'electron'
    import path from 'path'
    import fs from 'fs'
    
    // (...)
    
    const pluginDir = process.env.PROD
      ? process.resourcesPath
      : path.resolve(__dirname, '..', 'ppapi-flash-plugin', process.platform, process.arch)
    
    const pluginName =
      process.platform === 'win32'
        ? 'pepflashplayer.dll'
        : process.platform === 'darwin'
          ? 'PepperFlashPlayer.plugin'
          : 'libpepflashplayer.so'
    
    app.commandLine.appendSwitch(
      'ppapi-flash-path',
      path.join(pluginDir, pluginName)
    )
    
    app.commandLine.appendSwitch(
      'ppapi-flash-version',
      JSON.parse(fs.readFileSync(path.join(pluginDir, 'manifest.json'))).version
    )
    
    // (...)
    
    function createWindow () {
      /**
       * Initial window options
       */
      mainWindow = new BrowserWindow({
        // (...)
        webPreferences: {
          plugins: true
        }
      })
    
      // (...)
    }
    
    // (...)
    

    Hints

    1. In your Vue component which will render the .swf media, use a <embed> tag for local files,
      or a <webview> tag for remote ones. In order to prevent cross-domain issues, avoid using <embed> for remote URLs. See this example:
    <template>
      <q-page class="row">
        <webview v-if="onlineOnly" class="col" plugins :src="url" />
        <embed v-else class="col" src="statics/file.swf" wmode="transparent" allowNetworking="internal" />
      </q-page>
    </template>
    
    <script>
    export default {
      name: 'PageSWFExample',
      props: {
        onlineOnly: Boolean,
        url: String
      }
    }
    </script>
    

Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.