BarcodeScannerDialog usability

[kbachl]

Hi,

I did some usage trials with the BarcodeScannerDialog with a simple test and I'm somehow unsure how this could work in real world.
Now, code was quite easy:

import React, {useRef, useState} from "react";
import {BarcodeScannerDialogDomRef} from "@ui5/webcomponents-react/webComponents/BarcodeScannerDialog";
import {Ui5CustomEvent} from "@ui5/webcomponents-react/interfaces/Ui5CustomEvent";
import {BarcodeScannerDialog, Button} from "@ui5/webcomponents-react";

export default function Barcode() {

    const [scan, setScan] = useState<string>("")
    const barcodeRef = useRef<BarcodeScannerDialogDomRef>(null)
    const handleClick = (e: React.MouseEvent<HTMLInputElement>) => {
        console.log("clicked")
        barcodeRef.current!.show()
    }
    const handleScan = (e: Ui5CustomEvent<HTMLElement, { text: string; rawBytes: Record<string, unknown> }>) => {
        setScan(e.detail.text)
        barcodeRef.current!.close()
    }

    return (
        <React.Fragment>
            <BarcodeScannerDialog onScanSuccess={handleScan} onScanError={ e => { setScan(e.detail.message) }}  ref={barcodeRef} />
            <Button onClick={handleClick}>
                Scan
            </Button>
            <div> scanned: {scan} </div>
        </React.Fragment>
    )

}

and when I render it on an IPhone 13 under IOS 15 it works as long as its HTTPS (wish: write it into the documentation that it has to be HTTPS, else the browsers wont allow the getMedia thing to work! - and as long as no error handler is defined you wont know why it wont work!);

So when using it the camer pops up and then I hoped to get my barcode.... and then the usability nightmare begins:
-> where do you aim the camera at?
-> how often is the image refreshed?
-> how to pinpoint 1 barcode if there are multiple ones on the item? (common in logistics!)-

It was mentioned that you use the zxing-js/library but I dont see any way to customize its usage. Also I dont see any usable feedback during the stream what its actually doing. Did I understand it wrong?

[MarcusNotheis]

Hey @kbachl,
thanks for reaching out! As the BarCodeScanner component is developed in the UI5 Web Components repository, I'll transfer this discussion to the SAP/ui5-webcomponents repository :)

[ilhan007]

@dobrinyonkov maybe some of your team can follow-up here, the team would probably could give some guidance.