What is the reason why the google chromecast icon does not appear when running Electron?

I have developed an Angular website for myself. I am using the chromecast API in it and when I open the website on my PC in Chrome or on a raspberry pi4 in Chromium the google-cast-launcher icon appears and when clicking on it it opens the dialog to select the chromecast device. However when I run electron on the pi4 that icon simply does not appear. Anybody any idea why this is happening?

I have googled for a solution but am not able to come up with an answer. If I look at the console of electron or in devtools there are messages or errors regading this icon. Here is a screen shot how it should like like: google cast icon

this is what Electron gives me electron

code in Angular :

HTML

<div>
<google-cast-launcher style=" width: 40px; height:40px; display:block"></google-cast-launcher>
</div>


Component:

this.cast= this.window[this.castValue]
if (this.cast) {
console.log(this.cast)
this.initializeCastPlayer()
} else { console.log("no cast")}


initializeCastPlayer() {
this.options.receiverApplicationId= this.applicationId
this.options.autoJoinPolicy = chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED;
this.options.androidReceiverCompatible = true;
this.options.defaultActionPolicy= chrome.cast.DefaultActionPolicy.CREATE_SESSION

new cast.framework.CastContext.getInstance().setOptions(this.options);

this.remotePlayer = new cast.framework.RemotePlayer();
this.remotePlayerController = new cast.framework.RemotePlayerController(this.remotePlayer);

this.remotePlayerController.addEventListener(
cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED,

async (e:any) => {
console.log("Connection Changed", e)
this.isConnected(e)
}
);
}

ELECTRON:

const {app, BrowserWindow, Menu} = require('electron')
const url = require("url");
const path = require("path");

app.commandLine.appendSwitch('ignore-certificate-errors')

let electronOptionsDefaults = {
width: 800,
height: 600,
x: 0,
y: 0,
darkTheme: true,
fullscreen:true,
autoHideMenuBar:false,
webPreferences: {
contextIsolation: true,
nodeIntegration: false,
allowRunningInsecureContent:true,
experimentalFeatures:true
//zoomFactor: config.zoom
},
//backgroundColor: "#000000"
};
app.commandLine.appendSwitch('ignore-certificate-errors')

let mainWindow

function createWindow () {
mainWindow = new BrowserWindow(electronOptionsDefaults)



mainWindow.loadURL("https://192.168.200.210:4200");
mainWindow.on('closed', function () {
mainWindow = null
})
}
app.commandLine.appendSwitch('ignore-certificate-errors')
app.on('ready', createWindow)

app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
if (mainWindow === null) createWindow()
})

Continue reading...