[Feature Request] Add zoom slider if supported by the device in Html5QrcodeScanner

[mebjas]

For Html5QrcodeScanner - add zoom slider if capability is supported.

• [x] Add zoom slider under a configuration.
• [ ] Add pinch to zoom
• [x] Expose video constraints API
• [ ] Document

For Html5Qrcode

• [ ] Add support for Zoom APIs
• [ ] Document
• [ ] Write article describing how to zoom with Html5Qrcode

[mebjas]

UX Help wanted

[mebjas]

A better fix for this would be:

If zoom is supported

• A ML model that detects different kind of supported codes in the image (detects not decode).
• The same ML model either returns landmarks or another model helps with landmarking
• Multiple solutions from here
  • (Assuming center zoom) If it's zoomable the camera is zoomed to the landmarks
  • If it's not in center regions --> Guide user to move the camera or object
  • Internally zoom in to the canvas and decode and show result

But this would need longer term effort!

[ROBERT-MCDOWELL]

@mebjas I found a nice project that control tilt, zoom, pan etc... https://web.dev/camera-pan-tilt-zoom/

[mebjas]

https://github.com/mebjas/html5-qrcode/pull/331 will help expose the following two capabilities to Html5QrcodeScanner

/**
 * Returns the capabilities of the running video track.
 * 
 * Note: Should only be called if {@code Html5QrcodeScanner#getState()}
 *   returns {@code Html5QrcodeScannerState#SCANNING} or 
 *   {@code Html5QrcodeScannerState#PAUSED}.
 *
 * @beta This is an experimental API
 * @returns the capabilities of a running video track.
 * @throws error if the scanning is not in running state.
 */
public getRunningTrackCapabilities(): MediaTrackCapabilities;

/**
 * Apply a video constraints on running video track from camera.
 *
 * Note: Should only be called if {@code Html5QrcodeScanner#getState()}
 *   returns {@code Html5QrcodeScannerState#SCANNING} or 
 *   {@code Html5QrcodeScannerState#PAUSED}.
 *
 * @beta This is an experimental API
 * @param {MediaTrackConstraints} specifies a variety of video or camera
 *  controls as defined in
 *  https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints
 * @returns a Promise which succeeds if the passed constraints are applied,
 *  fails otherwise.
 * @throws error if the scanning is not in running state.
 */
public applyVideoConstraints(videoConstaints: MediaTrackConstraints)   

Which shall enable the users to build zoom features with a zoom slider UI. It would take me some time to identify a good UI to crunch in zoom slider within current UI. It will probably need some UI rewamp as well.

[mebjas]

@ROBERT-MCDOWELL

I found a nice project that control tilt, zoom, pan etc... https://web.dev/camera-pan-tilt-zoom/

I saw this before, bunch of it is useful but not very well supported across browsers. Particularly pan and tilt is for camera hardware that support pan and tilt like ones used in video conferencing.

[ROBERT-MCDOWELL]

@mebjas maybe the zoom part code can inspire us?

[nikowuesti]

If you plan to integrate the pan/zoom functionality, these would be best controlled with finger gestures drag/pinch-zoom on a phone or click-drag/mouswheel-zoom on desktop without the need of an UI. If the developer really wants it, a slider could be exposed, but I think it should be hidden by default. No need to litter the UI :)

[fxcosta]

about zoom control, i tested this and works perfectly: https://github.com/mebjas/html5-qrcode/issues/308#issuecomment-1121195534

[mebjas]

Feature support coming for Html5QrcodeScanner in version 2.3.2.

Slider implemented, looking into pinch to zoom next.

[mebjas]

Zoom feature published:

• Github release: https://github.com/mebjas/html5-qrcode/releases/tag/v2.3.2
• NPM: v2.3.2