
BarcodeReader
This component scans the bar code by calling the camera to obtain the bar code content bar code/QR code
Pay special attention to:
- The site wants to enable
https
, which is required by browser vendors - The site wants to enable
https
, which is required by browser vendors - The site wants to enable
https
, which is required by browser vendors - The bar code recognition rate is related to the pixel, bar code size and mobile phone execution efficiency
Basic usage
The code is identified by the camera
Demo
How to do this:
- Tap to start turning on the camera
- Scan the barcode
- Click the close button to turn off the camera
Basic usage
Scan code recognition with still pictures
Demo
How to do this:
- Click the code to pop up the selection file box
- Select a picture that contains barcodes
- Start recognizing barcodes
Start automatically
Turn on the camera automatically by setting the AutoStart
parameter settings
Demo
How to do this:
- Click the code to pop up the selection file box
- Select a picture that contains barcodes
- Start recognizing barcodes
Attributes
Loading...
@page "/barcodereaders"
@inject IStringLocalizer<BarcodeReaders> Localizer
<h3>BarcodeReader</h3>
<h4>This component scans the bar code by calling the camera to obtain the bar code content bar code/QR code</h4>
<p><b>Pay special attention to:</b></p>
<ul class="ul-demo">
<li>@((MarkupString)Localizer["Li1"].Value )</li>
<li>@((MarkupString)Localizer["Li1"].Value )</li>
<li>@((MarkupString)Localizer["Li1"].Value )</li>
<li>The bar code recognition rate is related to the pixel, bar code size and mobile phone execution efficiency</li>
</ul>
<DemoBlock Title="Basic usage" Introduction="The code is identified by the camera" Name="Normal">
<p>How to do this:</p>
<ul class="ul-demo mb-3">
<li>Tap to start turning on the camera</li>
<li>Scan the barcode</li>
<li>Click the close button to turn off the camera</li>
</ul>
<BarcodeReader OnInit="@OnInit" OnResult="@OnResult" OnStart="@OnStart" OnClose="@OnClose" OnError="@OnError" />
<BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>
<DemoBlock Title="Basic usage" Introduction="Scan code recognition with still pictures" Name="Image">
<p>How to do this:</p>
<ul class="ul-demo mb-3">
<li>Click the code to pop up the selection file box</li>
<li>Select a picture that contains barcodes</li>
<li>Start recognizing barcodes</li>
</ul>
<BarcodeReader ScanType="@ScanType.Image" OnResult="@OnImageResult" OnError="@OnImageError" />
<BlockLogger @ref="Trace2" class="mt-3" />
</DemoBlock>
<DemoBlock Title="Start automatically" Introduction="Turn on the camera automatically by setting the <code>AutoStart</code> parameter settings" Name="AutoStart">
<p>How to do this:</p>
<ul class="ul-demo mb-3">
<li>Click the code to pop up the selection file box</li>
<li>Select a picture that contains barcodes</li>
<li>Start recognizing barcodes</li>
</ul>
<BarcodeReader OnResult="@OnImageResult" OnError="@OnImageError" AutoStart="true" />
<BlockLogger @ref="Trace2" class="mt-3" />
</DemoBlock>
<AttributeTable Items="@GetAttributes()" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
using BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Components;
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
///
/// </summary>
public sealed partial class BarcodeReaders
{
private BlockLogger? Trace { get; set; }
private BlockLogger? Trace2 { get; set; }
private Task OnInit(IEnumerable<DeviceItem> devices)
{
var cams = string.Join("", devices.Select(i => i.Label));
Trace?.Log($"{Localizer["InitLog"]} {cams}");
return Task.CompletedTask;
}
private Task OnImageResult(string barcode)
{
Trace2?.Log($"{Localizer["ScanCodeLog"]} {barcode}");
return Task.CompletedTask;
}
private Task OnImageError(string err)
{
Trace2?.Log($"{Localizer["ErrorLog"]} {err}");
return Task.CompletedTask;
}
private Task OnResult(string barcode)
{
Trace?.Log($"{Localizer["ScanCodeLog"]} {barcode}");
return Task.CompletedTask;
}
private Task OnError(string error)
{
Trace?.Log($"{Localizer["ErrorLog"]} {error}");
return Task.CompletedTask;
}
private Task OnStart()
{
Trace?.Log(Localizer["OpenCameraLog"]);
return Task.CompletedTask;
}
private Task OnClose()
{
Trace?.Log(Localizer["CloseCameraLog"]);
return Task.CompletedTask;
}
/// <summary>
/// 获得属性
/// </summary>
/// <returns></returns>
private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
{
new AttributeItem()
{
Name = "ButtonScanText",
Description = Localizer["ButtonScanText"],
Type = "string",
ValueList = " — ",
DefaultValue = Localizer["ButtonScanTextDefaultValue"]
},
new AttributeItem()
{
Name = "ButtonStopText",
Description = Localizer["ButtonStopText"],
Type = "string",
ValueList = " — ",
DefaultValue = Localizer["ButtonStopTextDefaultValue"]
},
new AttributeItem()
{
Name = "AutoStopText",
Description = Localizer["AutoStopText"],
Type = "string",
ValueList = " — ",
DefaultValue = Localizer["AutoStopTextDefaultValue"]
},
new AttributeItem()
{
Name = "DeviceLabel",
Description = Localizer["DeviceLabel"],
Type = "string",
ValueList = " — ",
DefaultValue = Localizer["DeviceLabelDefaultValue"]
},
new AttributeItem()
{
Name = "InitDevicesString",
Description = Localizer["InitDevicesString"],
Type = "string",
ValueList = " — ",
DefaultValue = Localizer["InitDevicesStringDefaultValue"]
},
new AttributeItem()
{
Name = "NotFoundDevicesString",
Description = Localizer["NotFoundDevicesString"],
Type = "string",
ValueList = " — ",
DefaultValue = Localizer["NotFoundDevicesStringDefaultValue"]
},
new AttributeItem()
{
Name = "AutoStart",
Description = Localizer["AutoStart"],
Type = "boolean",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem()
{
Name = "AutoStop",
Description = Localizer["AutoStart"],
Type = "boolean",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem()
{
Name = "ScanType",
Description = "",
Type = "ScanType",
ValueList = "Camera|Image",
DefaultValue = "Camera"
},
new AttributeItem()
{
Name = "OnInit",
Description = Localizer["OnInit"],
Type = "Func<IEnumerable<Camera>, Task>",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem()
{
Name = "OnResult",
Description = Localizer["OnResult"],
Type = "Func<string, Task>",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem()
{
Name = "OnStart",
Description = Localizer["OnStart"],
Type = "Func<Task>",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem()
{
Name = "OnClose",
Description = Localizer["OnClose"],
Type = "Func<Task>",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem()
{
Name = "OnError",
Description = Localizer["OnError"],
Type = "Func<string, Task>",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem()
{
Name = "OnDeviceChanged",
Description = Localizer["OnDeviceChanged"],
Type = "Func<DeviceItem, Task>",
ValueList = " — ",
DefaultValue = " — "
}
};
}