Scan window built into a fixed DIV

[parente89]

is it possible to keep the window always active, inside a div, and not in the center of the screen above the whole application? as in the example ... I could not do it in any way

[densen2014]

you can hack this CSS

[densen2014]

ver 0.2.1 , you can customer your scan interface,check this demo page

https://github.com/densen2014/ZXingBlazor/blob/master/Demo.Server/Pages/IndexEN.razor

@if (ShowScanBarcodeCustom)
{
    <BarcodeReader ScanResult="((e) => { BarCodeCustom=e; ShowScanBarcodeCustom = !ShowScanBarcodeCustom; })"
                   Close="(()=>ShowScanBarcodeCustom=!ShowScanBarcodeCustom)"
                   OnError="OnError"
                   UseBuiltinDiv="false"
                   @ref="barcodeReaderCustom" />

    <div @ref="barcodeReaderCustom.barcodeScannerElement">
        <div style="width: 480px; max-width: 100%">
            <button class="btn btn-outline-success p-2 m-1 w-25" data-action="startButton">Scan</button>
            <button class="btn btn-outline-success p-2 m-1 w-25" data-action="resetButton">Reset</button>
            <button type="button" class="btn btn-outline-success p-2 m-1 w-25" data-action="closeButton">Close</button>

            <div data-action="sourceSelectPanel" style="display:none">
                <label for="sourceSelect">SelectDevice:</label><span class="text-dark" data-action="result"></span>
                <select data-action="sourceSelect" style="max-width:100%" class="form-control">
                </select>
            </div>
            <div>
                <video id="video" style="height:480px;width: 640px;border: 1px solid red"></video>
            </div>
        </div>
    </div>

}

[parente89]

thank you! i saw the demo, but it reports an error. You can check?

[parente89]

i noticed that error pops up when it detects multiple capture devices

[densen2014]

:-) fixed in ver 0.2.2

https://zxingblazor.app1.es/en

[densen2014]

1. zxing officials demo https://zxing-js.github.io/library/examples/barcode-camera/ works fine?
2. customer UI like https://github.com/densen2014/ZXingBlazor/blob/master/Demo.Server/Pages/IndexEN.razor

[parente89]

that's right Alex! 1) zxing officials demo (1) works perfectly. 2) The customUI does not work. But it doesn't even open on yours (if you have 2 cameras, for example your cellphone).

This problem arose after the update to 0.21, otherwise on 0.20 it was fine

[densen2014]

Confirmed it is a bug, fixed in 0.2.3

[densen2014]

https://user-images.githubusercontent.com/8428709/161045124-b79fc87a-bae0-42d4-8977-43e798acff10.MOV

[parente89]

Perfect! It works perfectly. Have you thought about implementing continuous acquisition as well? Without having to restart the camera acquisition module every time?

[parente89]

I updated the plugin but it doesn't work. Your published site still has the same problem.

If the camera is one there are no problems, if the devices become more than one, it does not work and the error returns: TypeError: Cannot set properties of null (setting 'text')

[image: image.png]

Il giorno mar 29 mar 2022 alle ore 22:39 Alex chow @.***> ha scritto:

:-) fixed in ver 0.2.2

— Reply to this email directly, view it on GitHub https://github.com/densen2014/ZXingBlazor/issues/11#issuecomment-1082352250, or unsubscribe https://github.com/notifications/unsubscribe-auth/ARNF3NCRCCL4WW5ZJB66WTLVCNTAXANCNFSM5RXLHOBA . You are receiving this because you authored the thread.Message ID: @.***>

[densen2014]

I updated the plugin but it doesn't work. Your published site still has the same problem. If the camera is one there are no problems, if the devices become more than one, it does not work and the error returns: TypeError: Cannot set properties of null (setting 'text') [image: image.png] Il giorno mar 29 mar 2022 alle ore 22:39 Alex chow @.> ha scritto: … :-) fixed in ver 0.2.2 — Reply to this email directly, view it on GitHub <#11 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ARNF3NCRCCL4WW5ZJB66WTLVCNTAXANCNFSM5RXLHOBA . You are receiving this because you authored the thread.Message ID: @.>

sent me a projet demo with zip here please