[Xubuntu] Try using WebRTC on Electron applications
Tags: electron
Published: 2022-11-29 17:39:26

## 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](https://dev.to/masanori_msl/go-try-pionwebrtc-with-sse-582)

### Environments
* Xubuntu ver.22.04
* Node.js ver.18.12.1

#### package.json
```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](https://stackoverflow.com/questions/59346604/electron-forge-make-wont-build)
* [Quick Start - Electron](https://www.electronjs.org/docs/latest/tutorial/quick-start#package-and-distribute-your-application)
* [[TypeScript] Try Electron](https://dev.to/masanori_msl/typescript-try-electron-43a0)

### 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
```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](https://www.electronforge.io/config/makers/squirrel.windows)

## 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](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts)

### 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](https://www.electronjs.org/docs/latest/tutorial/security)