如何将 Angular 4 Web 应用程序连接到手机摄像头？答案

【问题标题】：How to connect angular 4 web app to mobile camera?如何将 Angular 4 Web 应用程序连接到手机摄像头？
【发布时间】：2019-08-18 18:26:31
【问题描述】：

我在 Visual Studio 2015 中使用 Angular 4 Web API（更新 3）。现在我想在移动设备中使用条形码搜索项目。如何完成这个过程请注意，我是 Angular 的初学者，所以请帮我解决这个问题，我搜索了很多网站，但我无法理解或理解这个想法。任何人请帮助我找到解决方案。（TS文件和Html文件）

【问题讨论】：

标签： angular html typescript asp.net-web-api

【解决方案1】：

我不确定它是否有效，但你可以试试@zxing：

第 1 步 - 安装 npm 包：

npm install --save @zxing/library @zxing/ngx-scanner

第 2 步 - 添加到您的 app.module.ts：

import { ZXingScannerModule } from '@angular/forms';

注意：记得在'import'部分添加这个库

第 3 步 - 实施 .component.ts：

import { Component, OnInit, ViewChild } from '@angular/core';
import { ZXingScannerComponent } from '@zxing/ngx-scanner';
import { Result } from '@zxing/library';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

    @ViewChild('scanner')
    scanner: ZXingScannerComponent;
    hasDevices: boolean;
    hasPermission: boolean;
    qrResultString: string;
    qrResult: Result;
    availableDevices: MediaDeviceInfo[];
    currentDevice: MediaDeviceInfo;

    ngOnInit(): void {
        this.scanner.camerasFound.subscribe((devices: MediaDeviceInfo[]) => {
        this.hasDevices = true;
        this.availableDevices = devices;
    });
    this.scanner.camerasNotFound.subscribe(() => this.hasDevices = false);
    this.scanner.scanComplete.subscribe((result: Result) => this.qrResult = result);
    this.scanner.permissionResponse.subscribe((perm: boolean) => this.hasPermission = perm);
    }

    displayCameras(cameras: MediaDeviceInfo[]) {
        this.availableDevices = cameras;
    }

    handleQrCodeResult(resultString: string) {
        this.qrResultString = resultString;
    }

    onDeviceSelectChange(selectedValue: string) {
        this.currentDevice = this.scanner.getDeviceById(selectedValue);
    }
}

第 4 步 - 实施 .component.html

<div style="width: 50%" class="scanner-shell" [hidden]="!hasDevices">
<header>
    <select (change)="onDeviceSelectChange($event.target.value)">
        <option value="" [selected]="!currentDevice">No Device Selected</option>
        <option *ngFor="let device of availableDevices" [value]="device.deviceId"
        [selected]="currentDevice && device.deviceId === currentDevice.deviceId">
            {{ device.label }}
        </option>
    </select>
</header>
<zxing-scanner #scanner start="true" [device]="currentDevice"
(scanSuccess)="handleQrCodeResult($event)" 
[formats]="['QR_CODE', 'EAN_13','CODE_128', 'DATA_MATRIX']"></zxing-scanner>
    <section class="results" *ngIf="qrResultString">
    <small>Result: </small>
    <strong>{{ qrResultString }}</strong>
</section>

结果：

因此，一旦您在任何设备上打开此组件，浏览器都会要求您访问设备摄像头。如果您愿意，您应该能够从下拉列表中选择相机，然后，如果您使用它扫描二维码或条形码，您应该会在视图中看到它的结果。

注意：您必须在系统设置中允许应用程序使用相机。对于 Windows 10，您可以在相机隐私设置 -> 允许应用访问您的相机

中进行操作

【讨论】：

我有另一种方法。

【解决方案2】：

在TS文件中输入函数

 constructor(private zone: NgZone){
  window.angularComponentReference = {
             zone: this.zone,
            componentFn: (searchcontent: any) => this.scannerOutput(searchcontent),       
            component: this,
        };



//  And write the function

    barcode() {
    if (typeof Android !== "undefined" && Android !== null) {
        Android.openScanner();
    }
    else {
        alert("sorry no item");
    }
}

还有 index.html

        function scannerOutput(searchcontent) {
        window.angularComponentReference.zone.run(() =>
        { window.angularComponentReference.componentFn(searchcontent); });
    }

【讨论】：