No typescript support for focusMode in videoConstraints

[coooo77]

Describe the bug
Have problem with autofocus and found issues relative to.
But can not apply videoConstraints for focusMode

Expected behavior
Can use focusMode properties define in MediaTrackConstraints - Web APIs | MDN

Additional context
html5-qrcode version： "2.2.0"

[ROBERT-MCDOWELL]

this is a camera or OS limitation I think

[juanpablocerdarodriguez]

Same problem here, any progress @coooo77 ?

[coooo77]

Same problem here, any progress @coooo77 ?

no, you can use @ts-ignore or make a PR to fix it instead.

[mebjas]

I have observed similar issues. This is Microsoft’s limitation around typescript I believe.

Here’s how I had to hack it: https://github.com/mebjas/html5-qrcode/blob/master/src/html5-qrcode.ts#L1183

(Closing this as a stack overflow type of question - please ask on SO for quicker resolution and benefit of other readers)

[webia1]

you can extend them and use then the extended Type Defs:

interface AdvancedMediaTrackConstraintSet extends MediaTrackConstraintSet {
  zoom?: ConstrainDouble;
  focusMode?: ConstrainDOMString;
  focusDistance?: ConstrainDouble;
}

export interface ExtendedMediaTrackConstraintSet
  extends MediaTrackConstraintSet {
  zoom?: ConstrainDouble;
  advanced?: Array<AdvancedMediaTrackConstraintSet>;
}

use case (assumed you've already detected your video track)

const autoFocusConstraint: ExtendedMediaTrackConstraintSet = {
  advanced: [{ focusMode: 'auto' }],
};

await this.videoTrack.applyConstraints(autoFocusConstraint);

To detect the video track (Example within a method in Angular):

// replace the scanner with yours

const videoElement = this.scanner?.nativeElement?.querySelector('video');

if (!videoElement) {
  console.error('Video element not found');
  return;
}

const stream = videoElement.srcObject as MediaStream;
if (!stream) {
  console.error('No media stream found');
  return;
}

this.videoTrack = stream.getVideoTracks()[0];
if (!this.videoTrack) {
  console.error('No video track found');
  return;
}