[Xubuntu] Try using WebRTC on Electron applications

Intro

I will try using WebRTC on an Electron application in this time.

I will use the previously created WebRTC application.

• [Go] Try Pion/WebRTC with SSE

Environments

• Xubuntu ver.22.04
• Node.js ver.18.12.1

package.json

{
  "name": "webrtc-electron-sample",
  "version": "1.0.0",
  "description": "WebRTC sample",
  "main": "js/main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  "author": "Masui Masanori",
  "license": "MIT",
  "dependencies": {
    "electron-squirrel-startup": "^1.0.0",
    "npm": "^9.1.2"
  },
  "devDependencies": {
    "@electron-forge/cli": "^6.0.3",
    "@electron-forge/maker-deb": "^6.0.3",
    "@electron-forge/maker-rpm": "^6.0.3",
    "@electron-forge/maker-squirrel": "^6.0.3",
    "@electron-forge/maker-zip": "^6.0.3",
    "electron": "^21.3.0",
    "ts-loader": "^9.4.1",
    "typescript": "^4.9.3",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.0"
  }
}

Errors

rpm

As before, I tried to create an executable using Electron Forge and got the error below.

> webrtc-electron-sample@1.0.0 make
> electron-forge make

✔ Checking your system
✔ Loading configuration
✖ Resolving make targets
  › Cannot make for rpm, the following external binaries need to be installed…
◼ Running package command
◼ Running preMake hook
◼ Making distributables
◼ Running postMake hook

An unhandled rejection has occurred inside Forge:
Error: Cannot make for rpm, the following external binaries need to be installed: rpmbuild

Electron Forge was terminated. Location:
at MakerRpm.ensureExternalBinariesExist (/home/masanori/Documents/workspace/webrtc-electron-sample/node_modules/@electron-forge/maker-base/dist/Maker.js:100:19)
    at Task.task (/home/masanori/Documents/workspace/webrtc-electron-sample/node_modules/@electron-forge/core/dist/api/make.js:126:27)
    at Task.run (/home/masanori/Documents/workspace/webrtc-electron-sample/node_modules/listr2/dist/index.cjs:978:35)

This was because the "rpm" wasn't installed.
To avoid this error, I should install "rpm" by "sudo apt install rpm".

• electron-forge make won't build - StackOverflow
• Quick Start - Electron
• [TypeScript] Try Electron

An unhandled rejection has occurred inside Forge:[object Object]

After installing rpm, I got another error when I ran "npm run make".

...
✔ Loading configuration
✔ Resolving make targets
  › Making for the following targets: deb, rpm
✔ Running package command
  ✔ Preparing to package application
  ✔ Running packaging hooks
    ✔ Running generateAssets hook
    ✔ Running prePackage hook
  ✔ Packaging application
    ✔ Packaging for x64 on linux [6s]
  ✔ Running postPackage hook
✔ Running preMake hook
❯ Making distributables
  ✖ Making a deb distributable for linux/x64
    › An error occured while making for target: deb
  ◼ Making a rpm distributable for linux/x64
◼ Running postMake hook

An unhandled rejection has occurred inside Forge:
[object Object]

Electron Forge was terminated. Location:

Despite the error, the executable is still generated and can be run.
And this also reproduced in Windows environments.

To resolve this, I should add "authors" and "description" into "@electron-forge/maker-squirrel" of forge.config.js.

forge.config.js

module.exports = {
  packagerConfig: {},
  rebuildConfig: {},
  makers: [
    {
      name: '@electron-forge/maker-squirrel',
      config: {
        authors: 'Masui Masanori',
        description: 'WebRTC sample'
      },
    },
    {
      name: '@electron-forge/maker-zip',
      platforms: ['darwin'],
    },
    {
      name: '@electron-forge/maker-deb',
      config: {},
    },
    {
      name: '@electron-forge/maker-rpm',
      config: {},
    },
  ],
};

Result

...
✔ Running preMake hook
✔ Making distributables
  ✔ Making a deb distributable for linux/x64 [2m1s]
  ✔ Making a rpm distributable for linux/x64 [1m6s]
✔ Running postMake hook
  › Artifacts available at: /home/example/Documents/workspace/webrtc-electro…

• Squirrel.Windows - Electron Forge

Using WebRTC

Electron applications serve resource files such as HTML, JavaScript, etc. via file protocols.

I used to think that MediaStream and WebRTC required the resource files to be served over HTTPS or localhost.

So I thought MediaStream and WebRTC wouldn't work on Electron applications.
But both of them actually work fine.

MediaStream

Because the file protocol "file://" is considered as secure context, so I can use the MediaStream.
This behavior is the same not only on Electron but also on other web browsers such as FireFox.

• Secure contexts - MDN

WebRTC(Web access)

If I use other web browsers, I will get errors because of CORS.
But Electron doesn't block by default.

So I can use MediaStream and WebRTC.

But I should limit the accessable URL for security.

• Security - Electron