DEV Community

Masui Masanori
Masui Masanori

Posted on

[Xubuntu] Try using WebRTC on Electron applications

#electron

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)