Closed NW-90 closed 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>
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>
}
Thank you.
Such as stream width value, height value etc.