CODEWITHSUNDEEP
angularhtmltypescriptasp.net-web-api
Akhil
Akhil

Reputation: 381

How to connect angular 4 web app to mobile camera?

Here am using angular 4 web API in visual studio 2015 (updated 3). Now i want to search an item using bar code in mobile devices. how to be done this process please note that am a beginner in angular so please help me for this solution i search so many site but i could not get or understand the idea. anyone please help me for finding the solution. (TS file and Html file)

Upvotes: 2

Views: 2951

Answers (2)

Akhil
Akhil

Reputation: 381

Enter the function in TS file

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

And index.html

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

Upvotes: 2

Wojciech X
Wojciech X

Reputation: 375

I am not sure would it work, but you can try @zxing:

Step 1 - Install npm packages:

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

Step 2 - Add to your app.module.ts:

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

Note: remember to add this library in 'import' section

Step 3 - Implement .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);
    }
}

Step 4 - Implement .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>

Result:

As a result, once you open this component on any device, the browser will ask you for access to your device camera. If you will grand it, you should be able to pick camera from dropdown and then, if you scan with it Qr code or bar code, you should see its outcome on the view.

Note: You have to allow camera to be used by applications in your System Settings. For Windows 10, you can do it in Camera privacy settings -> Allow apps to access your camera

Upvotes: 2

Related Questions