CameraScanner 组件 — sgcHTML | eSeGeCe

CameraScanner

TsgcHTMLComponent_CameraScanner — 一个实时摄像头面板,使用浏览器自身的原生解码器扫描条形码和二维码,无需第三方库,并始终提供拍照和手动输入作为后备方案,适用于 Delphi、C++ Builder 和 .NET。

TsgcHTMLComponent_CameraScanner

设置 ModeFormats,然后读取 HTML 属性;面板会打开摄像头,使用浏览器的 BarcodeDetector 进行解码,并将结果提交到 FieldName 下。

组件类

TsgcHTMLComponent_CameraScanner

渲染为

摄像头取景面板 + 隐藏字段 + 内联脚本

语言

Delphi, C++ Builder, .NET

让它使用浏览器自带的扫描器

无需捆绑解码器,也不从 CDN 拉取任何内容:当 BarcodeDetector 不可用时,面板会给出提示,并继续通过手动输入和拍照方式正常工作。

uses
  sgcHTML_Component_CameraScanner;

var
  oScanner: TsgcHTMLComponent_CameraScanner;
begin
  oScanner := TsgcHTMLComponent_CameraScanner.Create(nil);
  try
    oScanner.ScannerID := 'receiving_scan';
    oScanner.Mode := smBoth;               // scan barcodes AND capture a photo
    oScanner.Formats := 'qr_code,ean_13,code_128';
    oScanner.FieldName := 'sku';
    oScanner.ContinuousScan := True;
    oScanner.BeepOnScan := True;

    WebModule.Response := oScanner.HTML;   // camera panel + hidden fields + inline script
  finally
    oScanner.Free;
  end;
end;
// includes: sgcHTML_Component_CameraScanner.hpp

TsgcHTMLComponent_CameraScanner *oScanner = new TsgcHTMLComponent_CameraScanner(NULL);
try
{
  oScanner->ScannerID = "receiving_scan";
  oScanner->Mode = smBoth;
  oScanner->Formats = "qr_code,ean_13,code_128";
  oScanner->FieldName = "sku";
  oScanner->ContinuousScan = true;
  oScanner->BeepOnScan = true;

  String html = oScanner->HTML;   // camera panel + hidden fields + inline script
}
__finally
{
  delete oScanner;
}
using esegece.sgcWebSockets;

var scanner = new TsgcHTMLComponent_CameraScanner();
scanner.ScannerID = "receiving_scan";
scanner.Mode = smBoth;
scanner.Formats = "qr_code,ean_13,code_128";
scanner.FieldName = "sku";
scanner.ContinuousScan = true;
scanner.BeepOnScan = true;

string html = scanner.HTML;   // camera panel + hidden fields + inline script

关键属性与方法

您最常使用的成员。

Mode

smBarcodesmPhotosmBoth(默认)。smBarcode 从不渲染拍照按钮;smPhoto 则完全跳过扫描循环。

Formats

以逗号分隔的 BarcodeDetector 格式字符串列表,默认值为 qr_code,ean_13,code_128,会被转义后放入传给浏览器解码器的 JS 数组中。

FacingMode

sfEnvironment(默认,后置摄像头)或 sfUser(前置摄像头)。

ContinuousScan

True(默认)在命中后继续解码;False 则在首次成功扫描后自动停止摄像头。

FieldName

扫描值提交所用的隐藏字段名;拍摄的照片会以 JPEG data URL 的形式提交到 FieldName_photo 下。

WSSend / Action

通过 sgcHTMX WebSocket 桥推送每一次扫描,或将其 POST 到 Action;无论哪种方式,都会始终触发一个 sgcCameraScanner:scan DOM 事件。

继续探索

在线帮助此组件的完整 API 参考和使用指南。
所有 sgcHTML 组件浏览 80 多个组件的完整功能矩阵。
下载免费试用版30 天试用版附带 60.HTML 演示项目。
价格Single、Team 和 Site 授权,均含完整源代码。
超值之选:All-AccesseSeGeCe 全部产品,含高级支持,每年 €1,059 起。
查看 All-Access 价格

准备好开始了吗?

下载免费试用版,开始在 Delphi、C++ Builder 和 .NET 中构建 Web 界面。