Scene description

Construct PC client, use electron- Vue scaffolding to build environment quickly. All function points are normal on the Web side, and problems occur when the code is transplanted to ELECTRON:

1. RTMP streaming media 2. Some components of the Ant-Design-Vue UI framework failCopy the code

🔥 player uses vue-video-player, and flash technology is required to play RTMP streams.

Electron references the flash plug-in packaging example

Problem solving

Briefly record key issues

Problem: Some components of PC client ant-design-vue do not work properly cause: Microelectronic-vue will treat it as the externals of webpack, where the Vue file contained in the UI component is not compiled by vue-loader normally, resulting in the function failure. Find the electron - vue/webpack. The renderer. Config. Js will ant - design - vue whiteListedModules added to white listCopy the code

🔥 Electron whitelist configuration

Error: After flash is imported into the PC client, RTMP streams cannot be played normally. Cause: Electron cannot read vue-video-Player. Separately install the VideoJs-Flash plug-in for project dependent NPM I Videojs-flash-sCopy the code
Vue -video- Player is about to be ready after compiling to PC client The security of flash loading in the Chromium environment is not allowed to be loaded in the "file://" protocol, and the packaged files are solved by default in the "file://" protocol: Create an Express service in the main thread and make the packaged page file run on the local HTTP port serviceCopy the code