Enable hardware video decoding on Electron 12

I am working on an Electron app running on Ubuntu 20 with Intel J1900 CPU. The CPU isn’t that powerful to play video and hardware accelerated video decoding can obviously help to reduce CPU usage during video play.

Unfortunately enabling hardware acceleration on Linux is not by default and the way of enabling it also keep changing. I have been using the methods from this post and it just didn’t work until recently I saw this discussion and the release of Electron 12 built with Chromium 89.

Note: The following works in Electron 12 built with Chromium 89, and won’t work on Electron 11.

In summary, to enable hardware video decoding on Ubuntu 20, make sure the following are done:

1. Drivers are properly installed. There are a lot of posts giving guide on this already. To verify, use player like mpv and take note on the console output.
2. Run Electron 12 with video decoding features enable. See my example code below.
3. Check chrome://gpu page, check video decoding is hardware accelerated. Also check the bottom of the page which list out video acceleration information. If the section is empty, probably it is not working.
4. Play some videos in Electron and check hardware decoder is used by the media player. Checking can be done in DevTools, More tools menu, Media tab. Ensure the videos codec are supported by video acceleration.

// Example code to enable video decoding
// Install Electron 12 with `npm install --save-dev electron@12`

const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
  })
  win.loadFile('chrome://gpou')
}

if (process.platform === 'linux') {
  app.commandLine.appendSwitch('enable-features', 'VaapiVideoDecoder')
  // This switch is not really for video decoding I enabled for smoother UI
  app.commandLine.appendSwitch('enable-gpu-rasterization')

}

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

app.whenReady().then(createWindow)