html - Hur ansluter man en Angular 4-webbapp till mobilkameran?

Här använder jag Angular 4 web API i Visual Studio 2015 (uppdaterad 3). Nu vill jag söka efter ett objekt med streckkod i mobila enheter. Hur gör man denna process, vänligen notera att jag är nybörjare i Angular så hjälp mig gärna med denna lösning. Jag har letat på många sajter men jag kunde inte hitta eller förstå idén. Någon vänligen hjälp mig att hitta lösningen. (TS-fil och HTML-fil)

Svar #1

Jag är inte säker på om det skulle fungera, men du kan prova @zxing:

Steg 1 - Installera npm-paket:

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

Steg 2 - Lägg till i din app.module.ts:

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

Obs: kom ihåg att lägga till detta bibliotek i 'import' sektionen

Steg 3 - Implementera .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);
    }
}

Steg 4 - Implementera .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: 
    <strong>{{ qrResultString }}</strong>
</section>

Resultat:

Som ett resultat, när du öppnar denna komponent på vilken enhet som helst, kommer webbläsaren att be dig om tillgång till din enhets kamera. Om du beviljar det, borde du kunna välja kamera från rullgardinsmenyn och sedan, om du skannar med den en QR-kod eller streckkod, borde du se dess resultat på vyn.

Obs: Du måste tillåta att kameran används av applikationer i dina systeminställningar. För Windows 10 kan du göra det i Kamerainställningar för sekretess -> Tillåt appar att använda din kamera

Svar #2

Skriv in funktionen i TS-filen

 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");
    }
}

Och index.html

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