Вопросы Теги

Как подключить угловое 4-приложение к мобильной камере?

let и const имеют две большие отличия от var:

  1. Они являются блочным областью .
  2. Доступ к var до его объявления имеет результат undefined; доступ к let или const, прежде чем он будет объявлен бросками ReferenceError: 

console.log(aVar); // undefined
console.log(aLet); // causes ReferenceError: aLet is not defined
var aVar = 1;
let aLet = 2;

примеры, что let объявления (и const, которые работают одинаково) могут не быть подняты , так как aLet не существует, пока ему не присвоено значение.

Это не так, однако let и const подняты (например, var, class и function), но есть период между вводом области и объявлением там, где они не могут быть доступны. Этот период является временной мертвой зоной (TDZ).

TDZ заканчивается, когда aLet объявлен объявлен , а не назначен : 

//console.log(aLet)  // would throw ReferenceError

let aLet;
console.log(aLet); // undefined
aLet = 10;
console.log(aLet); // 10

Этот пример показывает, что let поднят: 

let x = 'outer value';
(function() {
  // start TDZ for x
  console.log(x);
  let x = 'inner value'; // declaration ends TDZ for x
}());

Кредит: временная мертвая зона (TDZ) demystified

Доступ к x во внутренней области все еще вызывает ReferenceError. Если let не были подняты, он будет записывать outer value.

TDZ - это хорошо, потому что он помогает выделить ошибки - доступ к значению до того, как он был объявлен, редко преднамерен.

TDZ также применяется к аргументам функции по умолчанию. Аргументы оцениваются слева направо, и каждый аргумент находится в TDZ до тех пор, пока он не назначен: 

// b is in TDZ until its value is assigned
function testDefaults(a=b, b) { }
testDefaults(undefined, 1); // throws ReferenceError because the evaluation of a reads b before it has been evaluated.

TDZ не включен по умолчанию в трансляторе babel.js . Включите режим «высокого соответствия», чтобы использовать его в REPL . Поставьте флаг es6.spec.blockScoping, чтобы использовать его с CLI или в качестве библиотеки.

Рекомендуемое дополнительное чтение: TDZ demystified и ES6 Let, Const и «Temporal Dead» Зона "(TDZ) в глубину .

0
задан Sreekrishna 28 March 2019 в 04:13
поделиться

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>

Результат:

В результате, когда вы откроете этот компонент на любом устройстве, браузер запросит у вас доступ к камере вашего устройства. Если вы это сделаете, вы сможете выбрать камеру из выпадающего списка, а затем, если вы отсканируете ее с помощью Qr-кода или штрих-кода, вы увидите ее результат на виде.

Примечание: Вы должны разрешить использование камеры приложениями в системных настройках. Для Windows 10 вы можете сделать это в Настройки конфиденциальности камеры -> Разрешить приложениям доступ к вашей камере

0
ответ дан Wojciech X 28 March 2019 в 04:13
поделиться
Другие вопросы по тегам:

Похожие вопросы: