android/chrome: Could not start video source, NotReadableError

[ralyodio]

I get the following error when trying to getCameras() on chrome/android

I'm using a localhost without https.

Uncaught (in promise) {name: "NotReadableError", message: "Could not start video source", constraint: undefined, toString: ƒ}constraint: undefinedmessage: "Could not start video source"name: "NotReadableError"toString: ƒ ()__proto__: constructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()
step @ instascan.js:44
(anonymous) @ instascan.js:54
Promise.then (async)
step @ instascan.js:51
(anonymous) @ instascan.js:59
F @ instascan.js:416
(anonymous) @ instascan.js:38
start @ instascan.js:23709
getCameras @ QRScan.vue?54e3:51
Promise.then (async)
mounted @ QRScan.vue?54e3:68
callHook @ vue.esm.js?65d7:2921
insert @ vue.esm.js?65d7:4158
invokeInsertHook @ vue.esm.js?65d7:5960
patch @ vue.esm.js?65d7:6179
Vue._update @ vue.esm.js?65d7:2670
updateComponent @ vue.esm.js?65d7:2788
get @ vue.esm.js?65d7:3142
run @ vue.esm.js?65d7:3219
flushSchedulerQueue @ vue.esm.js?65d7:2981
(anonymous) @ vue.esm.js?65d7:1837
flushCallbacks @ vue.esm.js?65d7:1758

[ralyodio]

I added a self-signed certificate so it is using https://localhost:8443 but that didn't fix the problem.

[ralyodio]

This only is a problem on android 7.

[samvandamme]

I'm having the same issue on Android version 4.1.2. Front cam is no problem, back cam gives me the same error.

[derekjohnson]

I'm getting the same issue on all browsers I have tested.

[DespertaWeb]

Did you find any solution guys?

[Kukunin]

I had a similar error in my project (not related to instascan) in Chrome Android. The error happened when I tried to switch cameras. The solution for me was to stop all tracks in an active stream before acquiring a new one

if(this.lastStream) {
  this.lastStream.getTracks().forEach(track => track.stop()) 
}

after that the error has gone

[lcssanches]

I had a similar error in my project (not related to instascan) in Chrome Android. The error happened when I tried to switch cameras. The solution for me was to stop all tracks in an active stream before acquiring a new one

if(this.lastStream) {
  this.lastStream.getTracks().forEach(track => track.stop()) 
}

after that the error has gone

For those wondering where stop tracks, it's right before navigator.mediaDevices.getUserMedia.

Thanks @Kukunin.