mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-28 22:42:11 +01:00
Zxing ask for camera permission
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import { Component, ChangeDetectionStrategy, ViewChild, ElementRef, AfterViewInit, NgZone, Inject, OnDestroy, OnInit } from '@angular/core';
|
||||
import { UiModalRef, UiModalService } from '@ui/modal';
|
||||
import { UiMessageModalComponent, UiModalRef, UiModalService } from '@ui/modal';
|
||||
import { BarcodeFormat, DecodeHintType, BrowserMultiFormatReader } from '@zxing/library';
|
||||
import { BehaviorSubject, from, ReplaySubject, Subject } from 'rxjs';
|
||||
import { filter, takeUntil, tap } from 'rxjs/operators';
|
||||
@@ -27,45 +27,65 @@ export class ZxingModalComponent implements OnInit, OnDestroy {
|
||||
|
||||
constructor(private _modalRef: UiModalRef, private readonly _zone: NgZone, private readonly _modal: UiModalService) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
const hints = new Map<DecodeHintType, any>();
|
||||
async ngOnInit() {
|
||||
try {
|
||||
const mediaStream: MediaStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
|
||||
mediaStream.getVideoTracks().forEach((track) => track.stop());
|
||||
|
||||
const formats = [
|
||||
BarcodeFormat.EAN_8,
|
||||
BarcodeFormat.EAN_13,
|
||||
BarcodeFormat.UPC_A,
|
||||
BarcodeFormat.UPC_E,
|
||||
BarcodeFormat.CODE_128,
|
||||
BarcodeFormat.CODE_39,
|
||||
BarcodeFormat.CODE_93,
|
||||
BarcodeFormat.ITF,
|
||||
BarcodeFormat.QR_CODE,
|
||||
];
|
||||
const hints = new Map<DecodeHintType, any>();
|
||||
|
||||
hints.set(DecodeHintType.POSSIBLE_FORMATS, formats);
|
||||
const formats = [
|
||||
BarcodeFormat.EAN_8,
|
||||
BarcodeFormat.EAN_13,
|
||||
BarcodeFormat.UPC_A,
|
||||
BarcodeFormat.UPC_E,
|
||||
BarcodeFormat.CODE_128,
|
||||
BarcodeFormat.CODE_39,
|
||||
BarcodeFormat.CODE_93,
|
||||
BarcodeFormat.ITF,
|
||||
BarcodeFormat.QR_CODE,
|
||||
];
|
||||
|
||||
this._reader = new BrowserMultiFormatReader(hints, 1000);
|
||||
hints.set(DecodeHintType.POSSIBLE_FORMATS, formats);
|
||||
|
||||
from(this._reader.listVideoInputDevices()).subscribe((devices) => {
|
||||
this.devices$.next(devices);
|
||||
this.selectedDevice$.next(devices[0].deviceId);
|
||||
});
|
||||
this._reader = new BrowserMultiFormatReader(hints, 1000);
|
||||
|
||||
this.selectedDevice$
|
||||
.pipe(
|
||||
takeUntil(this._onDestroy$),
|
||||
filter((v) => !!v),
|
||||
tap(() => {
|
||||
this._reader?.reset();
|
||||
})
|
||||
)
|
||||
.subscribe((device) => {
|
||||
this._reader.decodeFromVideoDevice(device, this.scanContainer.nativeElement, (result) => {
|
||||
if (result) {
|
||||
this._modalRef.close(result.getText());
|
||||
}
|
||||
});
|
||||
from(this._reader.listVideoInputDevices()).subscribe((devices) => {
|
||||
this.devices$.next(devices);
|
||||
this.selectedDevice$.next(devices[0].deviceId);
|
||||
});
|
||||
|
||||
this.selectedDevice$
|
||||
.pipe(
|
||||
takeUntil(this._onDestroy$),
|
||||
filter((v) => !!v),
|
||||
tap(() => {
|
||||
this._reader?.reset();
|
||||
})
|
||||
)
|
||||
.subscribe((device) => {
|
||||
this._reader.decodeFromVideoDevice(device, this.scanContainer.nativeElement, (result) => {
|
||||
if (result) {
|
||||
this._modalRef.close(result.getText());
|
||||
}
|
||||
});
|
||||
});
|
||||
} catch (error) {
|
||||
this.cancel();
|
||||
this._modal
|
||||
.open({
|
||||
content: UiMessageModalComponent,
|
||||
data: {
|
||||
message: `
|
||||
Scanner kann nicht aktiviert werden.
|
||||
Bitte stellen Sie sicher, dass der zugriff auf die Kamera erlaubt ist.
|
||||
`,
|
||||
},
|
||||
})
|
||||
.afterClosed$.subscribe(() => {
|
||||
this.cancel();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
cancel() {
|
||||
|
||||
Reference in New Issue
Block a user