diff --git a/src/pages/detect.vue b/src/pages/detect.vue index f9bdb37..5bce9ad 100644 --- a/src/pages/detect.vue +++ b/src/pages/detect.vue @@ -51,7 +51,7 @@ - + @@ -326,6 +326,7 @@ uploadDirty: false, modelLocation: '', modelLoading: false, + videoDeviceAvailable: false, videoAvailable: false, cameraStream: null } @@ -486,18 +487,36 @@ this.detectorLabels.forEach( s => s.detect = false ) } }, - selectImage (mode) { + async selectImage (mode) { this.imageLoadMode = mode - if (mode == "camera") { - this.$refs.image_chooser.setAttribute("capture","environment") - } else { - this.$refs.image_chooser.removeAttribute("capture") - } if (this.isCordova && mode == "camera") { navigator.camera.getPicture(this.getImage, this.onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL, correctOrientation: true }); - } else { - var loadResult = this.$refs.image_chooser.click() + return } + if (mode == "camera") { + const devicesList = await navigator.mediaDevices.enumerateDevices() + this.videoDeviceAvailable = devicesList.some( d => d.kind == "videoinput") + if (this.videoDeviceAvailable) { + navigator.mediaDevices.getUserMedia({video: true}) + var vidConstraint = { + video: { + width: { + ideal: 1920 + }, + height: { + ideal: 1080 + }, + facingMode: 'environment' + }, + audio: false + } + const stream = await navigator.mediaDevices.getUserMedia(vidConstraint); + this.videoAvailable = true + this.cameraStream = stream + return + } + } + var loadResult = this.$refs.image_chooser.click() }, onFail (message) { alert(`Camera fail: ${message}`) @@ -585,23 +604,6 @@ }, async videoStream() { //TODO - navigator.mediaDevices.getUserMedia({video: true}) - var vidConstraint = { - video: { - width: { - ideal: 1920 - }, - height: { - ideal: 1080 - }, - facingMode: 'environment' - }, - audio: false - } - const stream = await navigator.mediaDevices.getUserMedia(vidConstraint); - this.videoAvailable = true - this.cameraStream = stream - return null }, captureVidFrame() { const vidViewer = this.$refs.vid_viewer