Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

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="通过摄像头进行扫码识别">
    <p>操作步骤:</p>
    <ul class="ul-demo">
        <li>点击开始打开摄像头</li>
        <li>对准条码进行扫描</li>
        <li>点击关闭按钮关闭摄像头</li>
    </ul>
    <BarcodeReader OnInit="@OnInit" OnResult="@OnResult" OnStart="@OnStart" OnClose="@OnClose" OnError="@OnError" />
    <BlockLogger @ref="Trace" class="mt-3" />
</Block>

<Block Title="基本用法" Introduction="通过静态图片进行扫码识别">
    <p>操作步骤:</p>
    <ul class="ul-demo">
        <li>点击扫码弹出选择文件框</li>
        <li>选取包含条码图片</li>
        <li>开始识别条码</li>
    </ul>
    <BarcodeReader ScanType="@ScanType.Image" OnResult="@OnImageResult" OnError="@OnImageError" />
    <BlockLogger @ref="Trace2" class="mt-3" />
</Block>

<Block Title="自动开始" Introduction="通过设置 <code>AutoStart</code> 参数设置自动开启摄像头">
    <p>操作步骤:</p>
    <ul class="ul-demo">
        <li>点击扫码弹出选择文件框</li>
        <li>选取包含条码图片</li>
        <li>开始识别条码</li>
    </ul>
    <BarcodeReader OnResult="@OnImageResult" OnError="@OnImageError" AutoStart="true" />
    <BlockLogger @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 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($"初始化摄像头完成 {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 = " - "
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915( Full) 675147445 Welcome to join the group discussion
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
Motronic (已集成)
An error has occurred. This application may no longer respond until reloaded. Reload