Plugin(s)

• 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