densen2014 / ZXingBlazor

Using ZXing Scan barcode/QR code in blazor
Apache License 2.0
102 stars 41 forks source link

How to configurate Stream resolution? #10

Closed NW-90 closed 2 years ago

NW-90 commented 2 years ago

Such as stream width value, height value etc.

densen2014 commented 2 years ago

here is source code

<div class="modal alert-popup" tabindex="-1" style="display:block" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Edit form for the current item -->
            <div class="modal-body">

                <button class="btn btn-primary p-2 m-1 w-25" id="startButton">@ScanBtnTitle</button>
                <button class="btn btn-secondary p-2 m-1 w-25" id="resetButton">@ResetBtnTitle</button>
                <button type="button" class="btn btn-info p-2 m-1 w-25" id="closeButton">@CloseBtnTitle</button>

                <div id="sourceSelectPanel" style="display:none">
                    <label for="sourceSelect">@SelectDeviceBtnTitle:</label><span class="text-dark" id="result"></span>
                    <select id="sourceSelect" style="max-width:100%" class="form-control">
                    </select>
                </div>
                <div>
                    <video id="video" style="min-height:150px;max-height:60%; max-width: 100%;border: 1px solid gray"></video>
                </div>

            </div>
        </div>
    </div>
</div>

you can change it

<video id="video" style="min-height:150px;max-height:60%; max-width: 100%;border: 1px solid gray"></video>'  like

to

<video
                id="video"
                width="600"
                height="400"
                style={{ border: "1px solid gray" }}
              ></video>
densen2014 commented 2 years ago

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>

}
NW-90 commented 2 years ago

Thank you.