barcode 相关问题

我想在 Angular 应用程序中实现 BarcodeDetector。我使用以下代码测试了 API： HTML： <p>我想在 Angular 应用程序中实现 <a href="https://web.dev/shape-detection/#barcodedetector" rel="nofollow noreferrer">BarcodeDetector</a>。我使用以下代码测试了 API：</p> <p>HTML：</p> <pre><code><!DOCTYPE html> <html lang="en"> <head> <script src="./script.js"></script> </head> <body> <button onclick="scan()">Click me</button> <img src="./barcode.gif"> <pre></pre> </body> </html> </code></pre> <p>JavaScript：</p> <pre><code>function scan() { const images = document.querySelectorAll('img'); const pres = document.querySelectorAll('pre'); try { pres[0].textContent += 'started\n'; let barcodeDetector = new BarcodeDetector(); pres[0].textContent += 'created and detecting\n'; barcodeDetector.detect(images[0]).then(detectedCodes => { for (const barcode of detectedCodes) { pres[0].textContent += barcode.rawValue + '\n'; }}).catch((e) => { pres[0].textContent += e + '\n'; }); } catch (e) { pres[0].textContent += e + '\n'; } } </code></pre> <p>而且效果很好。在 PC 上，当我在手机上打开页面时，出现 <pre><code>NotSupported</code></pre> 错误和解码的条形码。</p> <p>由于 TypeScript 是 JavaScript 的超集，我认为移植代码应该非常简单，但显然事实并非如此。 Angular 应用程序中的 HTML 几乎相同。组件代码如下： </p> <pre><code>var BarcodeDetector: any; @Component({ templateUrl: './index.component.html' }) export class IndexComponent { @ViewChild('imgRef') image: ElementRef; hasBarcodeDetector = ''; errors = ''; scanData = ''; constructor() { try { this.hasBarcodeDetector = 'BarcodeDetector' in window ? 'true' : 'false'; const barcodeDetector = new BarcodeDetector(); barcodeDetector.detect(this.image.nativeElement).then(detectedCodes => { for (const barcode of detectedCodes) { this.scanData += barcode.rawValue + '\n'; } }); } catch (e) { this.errors = e; } } } </code></pre> <p>检查探测器是否存在有效，因为我得到 <pre><code>true</code></pre>，但在 PC 和移动设备上我都收到以下错误：</p> <pre><code>TypeError: (void 0) is not a constructor </code></pre> <p>我猜这与解码器的声明有关，但我真的不知道该怎么做。</p> </question> <answer tick="false" vote="0"> <p>我认为你的变量不小心覆盖了<pre><code>window.BarcodeDetector</code></pre>。另请注意，您没有使用特征检测的结果。顺便说一句，特征检测现在应该以不同的方式进行，正如最近更新的<a href="https://web.dev/shape-detection/#featuredetection" rel="nofollow noreferrer">文章</a>中所述：</p> <pre><code>await BarcodeDetector.getSupportedFormats(); /* On a macOS computer logs [ "aztec", "code_128", "code_39", "code_93", "data_matrix", "ean_13", "ean_8", "itf", "pdf417", "qr_code", "upc_e" ] */ </code></pre> <p>这允许您检测您需要的特定功能，例如二维码扫描：</p> <pre><code>if (('BarcodeDetector' in window) && ((await BarcodeDetector.getSupportedFormats()).includes('qr_code'))) { console.log('QR code scanning is supported.'); } </code></pre> </answer> <answer tick="false" vote="0"> <p>我遇到了同样的问题，花了我一些时间。可能不是绝对完美，但以下内容对我有用。</p> <p>我希望在这两种情况下都支持扫描，因为这仅适用于 Mac、Android 和 Chrome 操作系统。</p> <p>希望有帮助！我很感激任何反馈。</p> <pre><code><div *ngIf="hasBarcodeDetectorApi" else useWindowsScanning> <video id="player" #player></video> <div>{{consoleMessage}}</div> </div> <ng-template #useWindowsScanning> <mso-camera-scan (scanEvent)="onScanNumber($event)" (cameraError)="onCameraError()"></mso-camera-scan> </ng-template> </code></pre> <p>我的完整组件，因为即使读取条形码也需要一点努力</p> <pre><code>import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'; import { BarcodeDetectorApi, BarcodeDetectorOptions } from './barcode.model'; import { SubSink } from 'subsink'; import { concatMap, from, timer } from 'rxjs'; // declare keyword tells browser it is defined elsewhere, which is how this works // I'd like to move to the barcode.model file, but compile issues that would take time to figure // eslint-disable-next-line @typescript-eslint/naming-convention, no-var export declare var BarcodeDetector: typeof BarcodeDetectorApi; @Component({ selector: 'mso-barcode-detector', templateUrl: './barcode-detector.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) export class BarcodeDetectorComponent implements OnInit, AfterViewInit, OnDestroy { @Output() scanEvent = new EventEmitter<string>(); @Output() cameraError = new EventEmitter<void>(); @ViewChild('player', { static: false }) player: ElementRef<HTMLVideoElement>; hasBarcodeDetectorApi = false; barcodeDetector: BarcodeDetectorApi; consoleMessage: string; private subsink = new SubSink(); private mediaStream: MediaStream = null; constructor() { if (!!window['BarcodeDetector']) { /* BarcodeDetector API only available on Mac, Android, and Chrome OS as of this note If you are on Windows then return and use a backup method of checking for barcodes */ this.hasBarcodeDetectorApi = true; } } ngOnInit(): void { if (!this.hasBarcodeDetectorApi) { return; } console.log('Using BarcodeDetector API'); const options = {} as BarcodeDetectorOptions; options.formats = ['code_128']; this.barcodeDetector = new BarcodeDetector(options); } ngAfterViewInit(): void { if (!this.hasBarcodeDetectorApi) { return; } const constraints = { video: { facingMode: 'environment', }, } as MediaStreamConstraints; navigator.mediaDevices.getUserMedia(constraints).then((stream) => { // Attach the video stream to the video element and autoplay. this.player.nativeElement.srcObject = stream; this.mediaStream = stream; this.player.nativeElement.play().then(() => { this.startListeningToBarcodes(); }); }); } ngOnDestroy(): void { if (this.mediaStream) { this.player.nativeElement.pause(); this.mediaStream.getTracks().forEach(x => x.stop()); } this.subsink.unsubscribe(); } onScanNumber(barcode: string): void { this.scanEvent.emit(barcode); } onCameraError(): void { this.cameraError.emit(); } private startListeningToBarcodes(): void { /* Now that we've started the video we need to check for a barcode in intervals as the detect function checks exactly once when you call it We want to continue to check until we find a valid barcode */ this.subsink.sink = timer(250, 500).pipe( concatMap(() => from(this.barcodeDetector .detect(this.player.nativeElement) .then((barcodes) => { if (barcodes.length === 0) { return; } console.log(`found ${barcodes.length} barcodes`); barcodes.forEach((barcode) => { console.log(barcode.rawValue); this.onScanNumber(barcode.rawValue); }); }) .catch((err) => { this.consoleMessage = err; console.log(err); this.onCameraError(); })))) .subscribe(); } } </code></pre> <p>最后，让它发挥作用的模型</p> <pre><code>// cheating by defining what it would look like, no implementation // interface doesn't like to define constructor or static very easily export class BarcodeDetectorApi { static getSupportedFormats(): Promise<BarcodeFormat[]> { throw new Error('not implemented'); } constructor(barcodeDetectorOptions?: BarcodeDetectorOptions) { } detect(image: ImageBitmapSource): Promise<DetectedBarcode[]> { throw new Error('not implemented'); } } export interface BarcodeDetectorOptions { formats?: Array<BarcodeFormat>; }; export interface Point2D { x: number; y: number; }; export interface DetectedBarcode { boundingBox: DOMRectReadOnly; rawValue: string; format: BarcodeFormat; cornerPoints: ReadonlyArray<Point2D>; }; export type BarcodeFormat = 'aztec' | 'code_128' | 'code_11' | 'code_39' | 'code_93' | 'codabar' | 'data_matrix' | 'ean_13' | 'ean_8' | 'itf' | 'pdf417' | 'qr_code' | 'micro_qr_code' | 'maxi_code' | 'upc_a' | 'upc_e' | 'gs1_composite' | 'gs1_databar' | 'gs1_databar_expanded' | 'gs1_databar_expanded_stacked' | 'gs1_databar_limited' | 'gs1_databar_omnidirectional' | 'gs1_databar_stacked' | 'gs1_databar_stacked_omnidirectional' | 'gs1_databar_truncated' | 'unknown'; </code></pre> </answer> </body></html>

javascript angular typescript barcode

回答 0 投票 0

加速easyocr

我开发了一个 Android 应用程序，在处理输入图像期间使用 chaquopy 运行 easyocr 和 pyzbar 模块。该应用程序的目标是能够提取文本并解码条形码...

python barcode zbar chaquopy easyocr

回答 1 投票 0

用于在 iOS 中扫描条形码（代码 39 格式）的免费 SDK

我想使用iphone/ipad的相机扫描Code 39格式的VIN条形码。我尝试了 zxing 和 zbar，但它们效果不佳。大多数时候他们无法识别条形码。任何人都可以...

ios barcode scanning

回答 1 投票 0

如何在 Swift 中从字符串生成条形码？

我是一名新的 iOS 开发人员。我想知道如何在 Swift 中生成条形码。我已经有了代码，有多种资源可以学习如何读取条形码，但我没有找到...