imagecapture-polyfill: DOMException: setOptions failed on takePhoto()

Using your own Quick Start example in Chrome Version 64.0.3282.186 (Official Build) (64-bit), the error DOMException: setOptions failed is thrown when takePhoto() is called:

function gotMedia(mediaStream) {
  // Extract video track.
  videoDevice = mediaStream.getVideoTracks()[0];
  // Check if this device supports a picture mode...
  let captureDevice = new ImageCapture(videoDevice);
  if (captureDevice) {
    captureDevice.takePhoto().then(processPhoto).catch(stopCamera);
    captureDevice.grabFrame().then(processFrame).catch(stopCamera);
  }
}

About this issue

Original URL
State: open
Created 6 years ago
Reactions: 17
Comments: 28 (1 by maintainers)

Links to this issue

DOMException: setOptions failed on takePhoto()

Most upvoted comments

Hi everyone. While I’m the original creator of this library, I haven’t been with Google for 3 years.

Could anyone from @GoogleChromeLabs take a look? @PaulKinlan / @paulirish ?

dandv on Feb 20, 2022

Any update on the issue? Please don’t abandon us.

justb on Nov 22, 2021

Not a fix for takePhoto or a reason why this happens but for those who only need to get an Image while this is not fixed or explained: I used grabFrame, since this error does not occur when calling this method and then reversed the polyfill video to canvas to image process a bit by drawing the resulting bitmap on a canvas and getting the Image as DataURL. If someone has a better way to convert the ImageBitmap to an Image, I would appreciate it very much. Samplecode:

navigator.mediaDevices.getUserMedia({audio: false, video: true}).then((stream) => {
   let track = stream.getVideoTracks()[0];
   console.log(track)
   let capture = new ImageCapture(track);
   console.log(capture)	
   return capture.grabFrame();
}).then((bitmap) => {
   let canvas = document.createElement('canvas');
   let context = canvas.getContext('2d');
   context.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height)
   return canvas.toDataURL();
}).then((src) => {
   // do something with the source
   console.log(src)
}).catch(console.error)

Does not solve that takePhoto always throws an error, but may be useful in a few situations

NasskalteJuni on Mar 16, 2018

Any updates on this?

In the current Version of Chrome, it seems to work again. Version: Version 80.0.3987.149 (Official Build) (64-Bit)

working code:

(async () =>{
  const stream = await navigator.mediaDevices.getUserMedia({video:true, audio:false});
  if(!stream.getVideoTracks().length) throw new Error('no webcam');
  const capture = new ImageCapture(stream.getVideoTracks()[0]);
  const photoBlob = await capture.takePhoto();
  console.log(photoBlob)
})()

If problems still exist, they might be bound to a specific browser version. Close issue?

NasskalteJuni on Mar 21, 2020

Does anybody know how to overcome this issue in Chrome 68? I’m getting the exact same error. Using the GrabFrame option isn’t really an option for me, because taking full-resolution images is a requirement for my project.

I already tried this approach from the video.js library, which doesn’t solve the problem and has been removed from their code in favor of the GrabFrame method as a workaround.

Does anybody know, which parameters are required in order to prevent the method from crashing?

@thijstriemstra Maybe you?

AnReZa on Aug 23, 2018

hi. i’m jan. same issue on my end. best regards

BioKalandra on Oct 14, 2020

Looks like nobody is working on this issue.

AnReZa on Aug 26, 2019

looks like they will remove the method ImageCapture.setOptions in Chrome 66 (https://developers.google.com/web/updates/2018/03/chrome-66-deprecations):

Current thinking on setting device options is to use the constrainable pattern . Consequently this property was removed from the ImageCapture specification . Since this method appears to have little to no use on production websites, it is being removed. A replacement method is not available at this time.

And adjusted the method signature (takePhoto now requires an options object) and released that change in Chrome 65: https://github.com/w3c/mediacapture-image/pull/150/files#diff-ec9cfa5f3f35ec1f84feb2e59686c34dL54

thijstriemstra on Apr 4, 2018