[Resolved]

Had the same DOMException: setOptions failed on takePhoto() issue.

DOMException: setOptions failed on takePhoto() · Issue #15 · GoogleChromeLabs/imagecapture-polyfill

With work-around found from above discussion, using grabFrame() instead and converted bitmap to dataurl and then converted to blob again to get it working.

capture() {
const mediaStreamTrack = this.mediaStream.getVideoTracks()[0]
const imageCapture = new window.ImageCapture(mediaStreamTrack)
var vm = this
return imageCapture
.grabFrame()
.then(bitmap => {
console.log('bitmap :', bitmap)
let canvas = document.createElement('canvas')
let context = canvas.getContext('2d')
context.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height)
return canvas.toDataURL()
})
.then(bitmap => {
var blob = vm.dataURItoBlob(bitmap)
return blob
})
.then(blob => {
firebase.storage
.ref()
.child(`images/picture-${new Date().getTime()}`)
.put(blob)
.then(res => {
var path = res.metadata.fullPath
var storageRef = firebase.storage.ref()
var url = storageRef.child(path).getDownloadURL()
return url
})
.then(function(url) {
vm.postCat(url, 'Hello')
vm.$router.go(-1)
})
})
}

But has strange behavior that it takes 640x480 size only.

Will comeback if I find a solution for the shrieked photo.

Regards,