DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Masui Masanori
Masui Masanori

Posted on

[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.

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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

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:
Enter fullscreen mode Exit fullscreen mode

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: {},
    },
  ],
};
Enter fullscreen mode Exit fullscreen mode

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…
Enter fullscreen mode Exit fullscreen mode

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.

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.

Top comments (0)

16 Libraries You Should Know as a React Developer

>> Check out this classic DEV post <<