Back Camera undefined
iparrabb opened this issue · 15 comments
Hi,
Thanks for this awesome plugin :)
Front Camera works fine, but I'm having an issue when select the back camera from a device with the example code. Returns undefined most of the time, although it sometimes shows the correct camera, any idea?
I'm testing with Android 6 and 8.1 and Chrome 69.0.3497.100 with the latest version of plugin ^1.3.0
PD: On Android 6 facing back camera never works, only return undefined...
Thanks!
@VinceG I'm using Quasar Framework, this is my code:
<template>
<div>
<q-select
inverted
color="indigo"
v-model="selected_device"
float-label="Select a camera"
:options="devices"
@input="_device => { onCameraChange(_device) }"
/>
<web-cam
ref="webcam"
width="100%"
height="100%"
:deviceId="deviceId"
@started="onStarted"
@stopped="onStopped"
@error="onError"
@cameras="onCameras"
@camera-change="onCameraChange"
/>
</div>
</template>
<script>
import {find, head} from 'lodash';
import {WebCam} from 'vue-web-cam'
export default {
name: 'camera',
components: {
WebCam
},
data() {
return {
camera: null,
deviceId: null,
devices: [],
selected_device: null,
};
},
computed: {
device: function() {
return find(this.devices, n => n.deviceId === this.deviceId);
}
},
watch: {
selected_device: function(id) {
this.deviceId = id;
},
devices: function() {
// Once we have a list select the first one
let first = head(this.devices);
if(first) {
this.camera = first.deviceId;
this.deviceId = first.deviceId;
}
}
},
methods: {
onCapture() {
let image = this.$refs.webcam.capture();
this.$emit('imageCaptured', image)
},
onStarted(stream) {
console.log('On Started Event', stream);
setTimeout(() => {
this.$emit('cameraStart')
}, 2000)
},
onStopped(stream) {
console.log('On Stopped Event', stream);
},
onStop() {
this.$refs.webcam.stop();
},
onStart() {
this.$refs.webcam.start();
},
onError(error, stream) {
this.$q.notify({
message: error,
type: 'negative'
});
},
onCameras(cameras) {
cameras.forEach(camera => {
this.devices.push({
value: camera.deviceId,
deviceId: camera.deviceId,
label: camera.label,
})
})
},
onCameraChange(deviceId) {
this.deviceId = deviceId;
this.camera = deviceId
}
}
}
</script>You can see in my first message, camera is undefined...
@VinceG, I attached a full example above with the code that I'm using, this error happens on Android 6 and Android 8 sometimes when the back camera is selected, is not enough?
onError(error, stream) {
console.log(error) //undefined
},@iparrabb Sorry, i can't run the example. I don't use Quasar and i don't have an android device or emulator to test this on.
If the demo works for you (as it does for me) there isn't much i can do to try and troubleshoot this with you since i don't have anything to test this on. Also the error you mentioned that appears is ambiguous, undefined can mean a lot of things, what exactly is undefined, is it the error variable passed in, the camera instance? you still haven't provided the entire stack trace or the exact error message, therefore there isn't much i can do, Sorry.
Hi @VinceG, the demo doesn't works on Android, it only works sometimes, the code that I am using is the demo code, you can see my example, only changes the dropdown, the rest is all the same.
Webcam fires the error event and this event fires the onError method on my component, and it receives two arguments, error and stream, error is undefined sometimes.
<web-cam
ref="webcam"
width="100%"
height="100%"
:deviceId="deviceId"
@started="onStarted"
@stopped="onStopped"
@error="onError" <!-- onError -->
@cameras="onCameras"
@camera-change="onCameraChange"
/>onError(error, stream) {
console.log(error) // undefined sometimes on Android
},Thanks.
@iparrabb onError will get one argument which is the error, it does not get the stream.
What version of this plugin are you using?
The onError is being emitted when getUserMedia is called in the catch block.
https://github.com/VinceG/vue-web-cam/blob/master/src/webcam.vue#L169
https://github.com/VinceG/vue-web-cam/blob/master/src/webcam.vue#L180
Your best bet is to try and console log in the source of the plugin to see what exactly happens, i'd add some console log in the above lines when the error is emitted and see if the error is undefined there too.
@VinceG, thanks for your help.
You can see the demo example:
onError(error, stream) {
console.log('On Error Event', error, stream);
},I'm using the last version:
"vue-web-cam": "^1.3.0",Is very hard catch this error because only happens when runs on Android device. Tomorrow I will try to debug more about this.
@iparrabb Sorry about that, the demo is wrong then, there is no stream argument. I'll fix that.