Capacitor: bug: "Could not start video source" when including camera in electron

[MrJean]

Bug Report

Capacitor Version

npx cap doctor output:

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 1.5.1

  @capacitor/core: 1.5.1

  @capacitor/android: 1.5.1

  @capacitor/ios: 1.5.1

Installed Dependencies:

  @capacitor/cli 1.5.1

  @capacitor/core 1.5.1

  @capacitor/ios 1.5.1

  @capacitor/android 1.5.1


[fatal] Platform electron is not valid.

Affected Platform(s)

• [ ] Android
• [ ] iOS
• [x] Electron
• [ ] Web

Current Behavior

After following the Ionic Angular tutorial to create the photogallery application, I wanted to add Electron to cover everything. But apparently the camera doesn't want to open within Electron.

Expected Behavior

The camera should open just like when serving the application in a regular web browser.

Sample Code or Sample Application Repo

https://ionicframework.com/docs/angular/your-first-app/
https://github.com/ionic-team/photo-gallery-capacitor-ng

Reproduction Steps

Follow the photogallery application tutorial on the Ionic website (Angular version) and add electron ionic cap add electron.

Other Technical Details

npm --version output: 6.14.2

node --version output: 13.6.0

Other Information

core.js:6014 ERROR Error: Uncaught (in promise): Could not start video source
    at resolvePromise (zone-evergreen.js:797)
    at zone-evergreen.js:707
    at rejected (tslib.es6.js:72)
    at ZoneDelegate.invoke (zone-evergreen.js:359)
    at Object.onInvoke (core.js:39699)
    at ZoneDelegate.invoke (zone-evergreen.js:358)
    at Zone.run (zone-evergreen.js:124)
    at zone-evergreen.js:855
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39680)
defaultErrorLogger @ core.js:6014
handleError @ core.js:6066
next @ core.js:40558
schedulerFn @ core.js:35336
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:35298
(anonymous) @ core.js:39738
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
runOutsideAngular @ core.js:39572
onHandleError @ core.js:39735
handleError @ zone-evergreen.js:363
runGuarded @ zone-evergreen.js:137
api.microtaskDrainDone @ zone-evergreen.js:663
drainMicroTaskQueue @ zone-evergreen.js:566
invokeTask @ zone-evergreen.js:469
invokeTask @ zone-evergreen.js:1603
globalZoneAwareCallback @ zone-evergreen.js:1629
emit @ core-8e8be6a7.js:1304
handlePhoto @ pwa-camera-modal-instance.entry.js:9
onPhoto @ pwa-camera-modal-instance.entry.js:25
initCamera @ pwa-camera.entry.js:217
async function (async)
initCamera @ pwa-camera.entry.js:213
componentDidLoad @ pwa-camera.entry.js:187
async function (async)
componentDidLoad @ pwa-camera.entry.js:185
safeCall @ core-8e8be6a7.js:904
postUpdateComponent @ core-8e8be6a7.js:848
postUpdate @ core-8e8be6a7.js:817
updateComponent @ core-8e8be6a7.js:819
update @ core-8e8be6a7.js:761
consumeTimeout @ core-8e8be6a7.js:103
flush @ core-8e8be6a7.js:126
invokeTask @ zone-evergreen.js:391
runTask @ zone-evergreen.js:168
invokeTask @ zone-evergreen.js:465
ZoneTask.invoke @ zone-evergreen.js:454
timer @ zone-evergreen.js:2650
requestAnimationFrame (async)
scheduleTask @ zone-evergreen.js:2671
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:211
scheduleMacroTask @ zone-evergreen.js:234
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1107
(anonymous) @ zone-evergreen.js:2686
proto.<computed> @ zone-evergreen.js:1428
raf @ core-8e8be6a7.js:15
(anonymous) @ core-8e8be6a7.js:83
(anonymous) @ core-8e8be6a7.js:777
then @ core-8e8be6a7.js:913
scheduleUpdate @ core-8e8be6a7.js:777
schedule @ core-8e8be6a7.js:1107
initializeComponent @ core-8e8be6a7.js:1118
async function (async)
initializeComponent @ core-8e8be6a7.js:1064
(anonymous) @ core-8e8be6a7.js:1167
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
(anonymous) @ zone-evergreen.js:855
invokeTask @ zone-evergreen.js:391
runTask @ zone-evergreen.js:168
drainMicroTaskQueue @ zone-evergreen.js:559
invokeTask @ zone-evergreen.js:469
ZoneTask.invoke @ zone-evergreen.js:454
timer @ zone-evergreen.js:2650
requestAnimationFrame (async)
scheduleTask @ zone-evergreen.js:2671
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:211
scheduleMacroTask @ zone-evergreen.js:234
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1107
(anonymous) @ zone-evergreen.js:2686
proto.<computed> @ zone-evergreen.js:1428
raf @ core-8e8be6a7.js:15
(anonymous) @ core-8e8be6a7.js:83
(anonymous) @ core-8e8be6a7.js:777
then @ core-8e8be6a7.js:913
scheduleUpdate @ core-8e8be6a7.js:777
schedule @ core-8e8be6a7.js:1107
initializeComponent @ core-8e8be6a7.js:1118
async function (async)
initializeComponent @ core-8e8be6a7.js:1064
(anonymous) @ core-8e8be6a7.js:1167
invoke @ zone-evergreen.js:359
onInvoke @ core.js:39699
invoke @ zone-evergreen.js:358
run @ zone-evergreen.js:124
(anonymous) @ zone-evergreen.js:855
invokeTask @ zone-evergreen.js:391
onInvokeTask @ core.js:39680
invokeTask @ zone-evergreen.js:390
runTask @ zone-evergreen.js:168
drainMicroTaskQueue @ zone-evergreen.js:559
invokeTask @ zone-evergreen.js:469
ZoneTask.invoke @ zone-evergreen.js:454
timer @ zone-evergreen.js:2650
requestAnimationFrame (async)
scheduleTask @ zone-evergreen.js:2671
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:211
scheduleMacroTask @ zone-evergreen.js:234
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1107
(anonymous) @ zone-evergreen.js:2686
proto.<computed> @ zone-evergreen.js:1428
raf @ core-8e8be6a7.js:15
(anonymous) @ core-8e8be6a7.js:83
(anonymous) @ core-8e8be6a7.js:777
then @ core-8e8be6a7.js:913
scheduleUpdate @ core-8e8be6a7.js:777
schedule @ core-8e8be6a7.js:1107
initializeComponent @ core-8e8be6a7.js:1118
async function (async)
initializeComponent @ core-8e8be6a7.js:1064
(anonymous) @ core-8e8be6a7.js:1167
invoke @ zone-evergreen.js:359
onInvoke @ core.js:39699
invoke @ zone-evergreen.js:358
run @ zone-evergreen.js:124
(anonymous) @ zone-evergreen.js:855
invokeTask @ zone-evergreen.js:391
onInvokeTask @ core.js:39680
invokeTask @ zone-evergreen.js:390
runTask @ zone-evergreen.js:168
drainMicroTaskQueue @ zone-evergreen.js:559
invokeTask @ zone-evergreen.js:469
invokeTask @ zone-evergreen.js:1603
globalZoneAwareCallback @ zone-evergreen.js:1629

[jcesarmobile]

I can't reproduce, it's working fine on my computer.
The plugin just uses getUserMedia under the hood, and for some reason it failed to start the video on your computer.

[MrJean]

Sorry to hear I'm getting the "Works on my computer treatment". Expected more from a team like Ionic.

[jcesarmobile]

Sorry to not being up to your expectations, but we are not wizards, as I said, the plugin just uses getUserMedia, and if getUserMedia fails, we can just report the error back.

[MrJean]

I'm back.

I cloned the demo repo: https://github.com/ionic-team/photo-gallery-capacitor-ng .
And ran the following commands:

npm install
ionic cap add electron
ionic cap open electron

Electron starts, with the app, but it doesn't work because the base path in electron/src/index.html is / and needs to be ./.

After changing the base path the app starts just fine. But! Again I get the error Could not start video source, when trying to access the camera (my original bug report).

So, if you can't reproduce, I'm wondering where the difference is. Since I just cloned and ran basic commands that are supposed to work according to the docs.

[MrJean]

OK! One step ahead! It seems that the zsh within VSCode doesn't have access to the camera. Where through Terminal, it does have access. When checking the Privacy in System Preferences you can see that.

I've found out about this here: https://github.com/electron/electron/issues/14801#issuecomment-478343983

So I can continue now. Glad I sorted this one out.