Electron MacOS Ventura M1 mediaDevices.getUserMedia takes long time - electron

Problem:
I have an electron app that uses the camera.
The app already exists for a few years with no issues on this side but lately, I have had a new issue specific to Mac M1 running MacOS Ventura. It takes a long time for the camera to load (around 8-10 seconds) and sometimes it even fails to do so.
NotReadableError: Failed to allocate videosource
Stack:
Electron: 15.5.4
Electron builder: 23.1.0
MacOS: 12.6
Intel processor
My code:
In order to present the camera I'm using the following code:
const constraints = {
audio: true,
video: { width: 800, height: 600 }
};
navigator.mediaDevices.getUserMedia(constraints)
.then((mediaStream) => {
const video = document.querySelector('video');
video.srcObject = mediaStream;
video.onloadedmetadata = () => {
video.play();
};
})
.catch((err) => {
// always check for errors at the end.
console.error(`${err.name}: ${err.message}`);
});
And to create the browserWindow:
// Create the browser window.
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
},
});
// and load the index.html of the app.
mainWindow.loadURL(
url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true,
})
);
So far conclusions:
When I build my app on M1 it works flawlessly but I do want to keep building it on x86 machine and with x64 arch.
Building an arm64 arch on x86 machine doesn't solve this issue.
I made an app with camera only and it still happen.

Related

Disable touch cursor helper (waterdrop) for input elements in electron config

I've an unexpected cursor helper in my electron app for input fields which I can relate to chrome and I'm searching for a way to disable/hide this "waterdrop" in the electron configuration or so.
Is there any option because I actually cannot find anything related to this?
My electron config looks like below:
[....]
createWindow() {
this.mainWindow = new BrowserWindow({
width: this.windowSizes[0].width,
height: this.windowSizes[0].height,
backgroundColor: "#041525",
frame: false,
webPreferences: {
preload: path.join(__dirname, "preload.js"),
nodeIntegration: true,
nodeIntegrationInWorker: true,
defaultFontSize: this.fontSize,
},
});
[....]
and I start the electron app like this:
/path/to/electron --touch-events

Unable to remove menu in development for Electron

This is my createWindow function that I pass to app.on('ready')
function createWindow () {
const startUrl = process.env.ELECTRON_START_URL || url.format({
pathname: path.join(__dirname, '../index.html'),
protocol: 'file:',
slashes: true,
})
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
devTools: true,
preload: path.join(__dirname, 'preload.js')
},
})
mainWindow.loadURL(startUrl)
mainWindow.removeMenu() // <----------------- HERE!
mainWindow.on('closed', function () {
mainWindow = null
})
}
Pretty boiler plate the issue is that the mainWindow.removeMenu() does not work and it leaves it in places.
I've also tried setMenu(null) and the menu is still there.
Is the menu only removed in production, or am I doing something wrong?
Edit
I've also tried mainWindow.setMenuBarVisibility(false), and it does not work as well.
Chances are that you are still using an old version of Electron. There has been a bug preventing the removal of the menu bar for a long time. It has been fixed in Electron 7.1.5:
Release Notes for v7.1.5
Fixes
Fixed window menu unable to hide on startup. #21449
So, mainWindow.removeMenu() should work fine once you upgrade Electron to its latest version, or at least a version greater than or equal to 7.1.5.

Electron loadFile is not a function

I'm developing an app using Electron. Using win.loadFile('index.html') used to work, but from yesterday it throws an error saying: win.loadFile is not a function.
Could it be "Knex.js" which caused this error? Because I installed it recently and the problems began to appear after that. Also, I noticed that Electron icon changed from transparent to a light blue (green) circle.
In addition, Using loadURL works but it renders the html file incompletely.
This is my main.js (I removed knex.js code from main.js but didn't help):
const { app, BrowserWindow } = require('electron')
const url = require('url')
const path = require('path')
function createWindow () {
// Create the browser window.
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// and load the index.html of the app.
win.loadFile('index.html');
}
app.on('ready', createWindow)
Check your Electron version. The version of Electron you want to run, install it globally. Here's the issue on GitHub:
BrowserWindow .loadFile is not a function

electron pdf window doesnt work after build

I'm trying to open pdf in electron app with electron-pdf-window. Its working fine before build but when i build app as installer .exe file for windows and install exe file on windows 8.1 , its not showing pdf window, i am using it through renderer process on click of anchor. Any ideas?
here is my code
function pdfWindow() {
const { BrowserWindow } = require('electron').remote
const PDFWindow = require('electron-pdf-window')
const win = new BrowserWindow({ width: 800, height: 800 })
PDFWindow.addSupport(win)
win.loadURL('http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf')
}
and i am calling this function on click of anchor tag
If you're using the latest Electron 1.8 or newer, it has built in PDF support in BrowserWindow's and <webview> tags. You just have to ensure plugins are enabled:
BrowserWindow
const window = new BrowserWindow({
width: 1024,
height: 800,
webPreferences: {
plugins: true
}
});
window.loadURL('path/to/file.pdf');
<webview> Tag
<webview src="path/to/file.pdf" plugins></webview>

Electron Take Up 100% Of Screen (Not Full Screen)

I've got an electron app, below is the main.js file:
var app = require('electron').app;
var BrowserWindow = require('electron').BrowserWindow;
app.on('ready', function() {
mainWindow = new BrowserWindow({
height: 715,
width: 1200,
minWidth: 600,
minHeight: 200,
center: true
});
mainWindow.loadURL('file://' + __dirname + '/index.html');
});
As you can see, the width and height are specified. What I want is for the app to open, but take up all of the available screen (but NOT to be in full screen, such that the dock and tool bar of the OS are hidden).
In simple CSS this is done by using
width:100%;
height:100%;
I want to be able to reproduce this in my electron app, although cannot seem to find any details on how to do it
Note: fullscreen: true is not what I am looking for, as that makes the app open so that the dock and toolbar are hidden
Can anyone help?
use this!
win = new BrowserWindow({show: false});
win.maximize();
win.show();
Call mainWindow.maximize() to maximize the window after you create it.
Use this:
const electron = require('electron')
const { app, BrowserWindow } = electron
let win
app.on('ready', () => {
const {width, height} = electron.screen.getPrimaryDisplay().workAreaSize
win = new BrowserWindow({width, height})
win.loadURL('https://github.com')
})
try this code after your mainWindow declaration
mainWindow.once('ready-to-show', () => {
mainWindow.maximize()
})
It worked for me
The solution is simple, only add titleBarStyle: 'hidden' to declaration of your window.
const mainWindow = new BrowserWindow({
movable: false,
resizable: false,
maximizable: false,
minimizable: false,
titleBarStyle: 'hidden', // watch this line
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
DevTools: false,
}
});
note that I only have tested on Windows OS and it can be change in other OS like Mac.

Resources