feat(barcode-scanning): mount camera to HTML tag OR set camera height/width

[mtpython]

Plugin(s)

• [X] Barcode Scanning
• [ ] Face Detection
• [ ] Translation

Current problem

Currently, the camera preview takes up the full background. It would be useful to either mount the camera preview into an HTLM tag with set dimensions, or set the width/height of the camera preview itself, allowing to frame it by overlaying UI over it.

Preferred solution

Two possible solutions:

1. Add selector for an HTML tag as a parent, to which the camera preview is mounted, e.g. by id:

export interface StartScanOptions {
    formats?: BarcodeFormat[];
    lensFacing?: LensFacing;
+   parentID?: string;
}

Which would mount to HTML tag with id provided in parentID (= camera-parent):

<div id="camera-parent" style="height: 400px" />

2. Add height / width (dimensions) property for the camera preview:

export interface StartScanOptions {
    formats?: BarcodeFormat[];
    lensFacing?: LensFacing;
+   dimensions?: Dimensions;
}

+ export interface Dimensions {
+    width?: string;
+    height?: string;
+ }

To allow making the preview smaller than full viewport width and height.

Alternative options

No response

Additional context

No response

[robingenz]

Thank you for your request!

It would be useful to either mount the camera preview into an HTLM tag

This is the ultimate goal. I have other priorities at the moment, but PRs are welcome.

or set the width/height of the camera preview itself, allowing to frame it by overlaying UI over it.

You can already put custom WebView UI over the camera view. So defining a certain width/height would only have performance advantages.

[C-AAEN]

@robingenz Hello. Is there an estimate on when this feature is implemented. I'm in search for a barcode scanner for Ionic Vue where it does not take up the entire screen. As mtpython says if it could be an HTML tag that is more controllable and I can have other tags visiable together with the camera open that would be superb

[robingenz]

Is there an estimate on when this feature is implemented?

No, there is no ETA.

and I can have other tags visiable together with the camera open that would be superb

You can already have other html elements visible when the camera is active. That's what we implemented in our official demo app. You just need to set the correct css rules.

[xulihang]

This camera plugin supports setting the width and height: https://github.com/xulihang/capacitor-plugin-camera . You can read barcodes by processing the base64 it outputs or using reflection to directly process the camera frame.