Barcode/QRCode Reader and QRCode writer components.
This is a Blazor wrapper arround zxing-js library.
It supports variety of barcode and 2d code types. For more information: zxing-js supported types
NET 5.0 or newer
Install-Package BlazorZXingJs
or
dotnet add package BlazorZXingJs
This component requires the umd version of zxing-js library.
For blazor wasm, in wwwroot\index.html
...
<body>
...
<script src="_framework/blazor.webassembly.js"></script>
<!-- if you need to scan as soon as the app start, add this before _framework/blazor.webassembly.js -->
<script src="_content/BlazorZXingJs/zxingjs-0.18.2/umd/index.min.js"></script>
</body>For blazor server (, in Pages/_Host.cshtml
...
<body>
<!-- ServerPrerrendered mode is not supported, so change it to render-mode=Server-->
<component type="typeof(App)" render-mode="Server" />
...
<script src="_framework/blazor.server.js"></script>
<!-- if you need to scan as soon as the app start, add this before _framework/blazor.server.js -->
<script src="_content/BlazorZXingJs/zxingjs-0.18.2/umd/index.min.js"></script>
</body>@page "/"
@using BlazorZXingJs
<MultiFormatReader
VideoWidth="300"
VideoHeight="200"
OnBarcodeRead="BarcodeRead">
<VideoForbidden>
<h4>no permission for videodevice</h4>
</VideoForbidden>
<NoVideoDevices>
<h4>no devices available</h4>
</NoVideoDevices>
</MultiFormatReader>
<h4>@LocalBarcodeText</h4>
@code {
private string LocalBarcodeText;
private void BarcodeRead(string code)
{
LocalBarcodeText = code;
}
}@page "/"
@using BlazorZXingJs
<MultiFormatReader
Format="@_formatList"
VideoWidth="300"
VideoHeigth="200"
VideoProperties="@_videoProperties"
OnStartVideo="StartVideo"
OnBarcodeRead="BarcodeRead">
</MultiFormatReader>
<h4>@LocalBarcodeText</h4>
@code {
private string LocalBarcodeText;
private BarcodeFormat[] _formatList = new BarcodeFormat[] { BarcodeFormat.EAN_8, BarcodeFormat.EAN_13 };
private MediaTrackConstraints _videoProperties = new MediaTrackConstraints() { Torch = true} ;
private string _domException;
private List<MediaDeviceInfo> _devices;
private string _inputDevice;
private void StartVideo(MultiFormatReaderStartEventArgs args)
{
_domException = args.DOMExceptionName;
_devices = args.DeviceList;
if (args.DeviceId != null)
{
_inputDevice = args.DeviceId;
}
}
private void BarcodeRead(string code)
{
LocalBarcodeText = code;
}
}@page "/"
@using BlazorZXingJs
<QRCodeWriter Text="@LocalBarcodeText" Width="200" Heigth="200"></QRCodeWriter>
@code {
private string LocalBarcodeText = "this is a message";
}
### Credits
This project is based on the original work of [sabitertan](https://github.com/sabitertan/BlazorBarcodeScanner)