
BarcodeReader 条码扫描
本组件通过调用摄像头对条码进行扫描,获取到条码内容条码/QR码
特别注意:
- 站点要启用
https
,这是浏览器厂商要求的 - 移动端 iOS 系统必须使用
Safari
浏览器,切换前/后摄像头要点一下关闭功能按钮 - 安卓手机大概率需要原生系统浏览器,
Chrome
是必定可以的,某些浏览器可能不兼容摄像头 - 条码识别率与手机像素,条码大小,手机执行效率有关
基本用法
通过摄像头进行扫码识别
Demo
操作步骤:
- 点击开始打开摄像头
- 对准条码进行扫描
- 点击关闭按钮关闭摄像头
基本用法
通过静态图片进行扫码识别
Demo
操作步骤:
- 点击扫码弹出选择文件框
- 选取包含条码图片
- 开始识别条码
自动开始
通过设置 AutoStart
参数设置自动开启摄像头
Demo
操作步骤:
- 点击扫码弹出选择文件框
- 选取包含条码图片
- 开始识别条码
Attributes 属性
Loading...
@page "/barcodereaders"
<h3>BarcodeReader 条码扫描</h3>
<h4>本组件通过调用摄像头对条码进行扫描,获取到条码内容条码/QR码</h4>
<p><b>特别注意:</b></p>
<ul class="ul-demo">
<li>站点要启用 <code>https</code>,这是浏览器厂商要求的</li>
<li>移动端 iOS 系统必须使用 <code>Safari</code> 浏览器,切换前/后摄像头要点一下关闭功能按钮</li>
<li>安卓手机大概率需要原生系统浏览器,<code>Chrome</code> 是必定可以的,某些浏览器可能不兼容摄像头</li>
<li>条码识别率与手机像素,条码大小,手机执行效率有关</li>
</ul>
<Block Title="基本用法" Introduction="通过摄像头进行扫码识别" CodeFile="barcode.1.html">
<p>操作步骤:</p>
<ul class="ul-demo">
<li>点击开始打开摄像头</li>
<li>对准条码进行扫描</li>
<li>点击关闭按钮关闭摄像头</li>
</ul>
<BarcodeReader OnInit="@OnInit" OnResult="@OnResult" OnStart="@OnStart" OnClose="@OnClose" OnError="@OnError" />
<Logger @ref="Trace" class="mt-3" />
</Block>
<Block Title="基本用法" Introduction="通过静态图片进行扫码识别" CodeFile="barcode.2.html">
<p>操作步骤:</p>
<ul class="ul-demo">
<li>点击扫码弹出选择文件框</li>
<li>选取包含条码图片</li>
<li>开始识别条码</li>
</ul>
<BarcodeReader ScanType="@ScanType.Image" OnResult="@OnImageResult" OnError="@OnImageError" />
<Logger @ref="Trace2" class="mt-3" />
</Block>
<Block Title="自动开始" Introduction="通过设置 <code>AutoStart</code> 参数设置自动开启摄像头" CodeFile="barcode.3.html">
<p>操作步骤:</p>
<ul class="ul-demo">
<li>点击扫码弹出选择文件框</li>
<li>选取包含条码图片</li>
<li>开始识别条码</li>
</ul>
<BarcodeReader OnResult="@OnImageResult" OnError="@OnImageError" AutoStart="true" />
<Logger @ref="Trace2" class="mt-3" />
</Block>
<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.Pages.Components;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace BootstrapBlazor.Shared.Pages
{
/// <summary>
///
/// </summary>
public sealed partial class BarcodeReaders
{
private Logger? Trace { get; set; }
private Logger? Trace2 { get; set; }
private Task OnInit(IEnumerable<DeviceItem> devices)
{
var cams = string.Join("", devices.Select(i => i.Label));
Trace?.Log($"初始化摄像头完成 {cams}");
return Task.CompletedTask;
}
private Task OnImageResult(string barcode)
{
Trace2?.Log($"扫描到条码 {barcode}");
return Task.CompletedTask;
}
private Task OnImageError(string err)
{
Trace2?.Log($"发生错误 {err}");
return Task.CompletedTask;
}
private Task OnResult(string barcode)
{
Trace?.Log($"扫描到条码 {barcode}");
return Task.CompletedTask;
}
private Task OnError(string error)
{
Trace?.Log($"发生错误 {error}");
return Task.CompletedTask;
}
private Task OnStart()
{
Trace?.Log($"打开摄像头");
return Task.CompletedTask;
}
private Task OnClose()
{
Trace?.Log($"关闭摄像头");
return Task.CompletedTask;
}
/// <summary>
/// 获得属性
/// </summary>
/// <returns></returns>
private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
{
new AttributeItem()
{
Name = "ButtonScanText",
Description = "扫描按钮文字",
Type = "string",
ValueList = " - ",
DefaultValue = "扫描"
},
new AttributeItem()
{
Name = "ButtonStopText",
Description = "关闭按钮文字",
Type = "string",
ValueList = " - ",
DefaultValue = "关闭"
},
new AttributeItem()
{
Name = "AutoStopText",
Description = "自动关闭按钮文字",
Type = "string",
ValueList = " - ",
DefaultValue = "自动关闭"
},
new AttributeItem()
{
Name = "DeviceLabel",
Description = "设备列表前置标签文字",
Type = "string",
ValueList = " - ",
DefaultValue = "摄像头"
},
new AttributeItem()
{
Name = "InitDevicesString",
Description = "初始化设备列表文字",
Type = "string",
ValueList = " - ",
DefaultValue = "正在识别摄像头"
},
new AttributeItem()
{
Name = "NotFoundDevicesString",
Description = "未找到视频相关设备文字",
Type = "string",
ValueList = " - ",
DefaultValue = "未找到视频相关设备"
},
new AttributeItem()
{
Name = "AutoStart",
Description = "组件初始化时是否自动开启摄像头",
Type = "boolean",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem()
{
Name = "AutoStop",
Description = "扫描到条码后是否自动停止",
Type = "boolean",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem()
{
Name = "ScanType",
Description = "扫描方式摄像头或者图片",
Type = "ScanType",
ValueList = "Camera|Image",
DefaultValue = "Camera"
},
new AttributeItem()
{
Name = "OnInit",
Description = "初始化摄像头回调方法",
Type = "Func<IEnumerable<Camera>, Task>",
ValueList = " - ",
DefaultValue = " - "
},
new AttributeItem()
{
Name = "OnResult",
Description = "扫描到条码回调方法",
Type = "Func<string, Task>",
ValueList = " - ",
DefaultValue = " - "
},
new AttributeItem()
{
Name = "OnStart",
Description = "打开摄像头回调方法",
Type = "Func<Task>",
ValueList = " - ",
DefaultValue = " - "
},
new AttributeItem()
{
Name = "OnClose",
Description = "关闭摄像头回调方法",
Type = "Func<Task>",
ValueList = " - ",
DefaultValue = " - "
},
new AttributeItem()
{
Name = "OnError",
Description = "发生错误回调方法",
Type = "Func<string, Task>",
ValueList = " - ",
DefaultValue = " - "
}
};
}
}