Styjun

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)

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

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