Uncaught (in promise) DOMException: setOptions failed
See original GitHub issueDescribe the bug After enbling than disabling the torch this error shows up in the console, and qr reading doesn’t work anymore.
To Reproduce Steps to reproduce the behavior: HTML:
<div class="qr-scan-area" [class.hidden]="!qrEnabled">
<div class="controls">
<ng-container *ngIf="torchCompatible">
<span class="material-icons" (click)="torchEnabled = true" *ngIf="!torchEnabled">flash_off</span>
<span class="material-icons" (click)="torchEnabled = false" *ngIf="torchEnabled">flash_on</span>
</ng-container>
<span class="material-icons" (click)="qrEnabled = false">close</span>
</div>
<zxing-scanner [autostart]="false" [enable]="qrEnabled" (permissionResponse)="onHasPermission($event)"
(torchCompatible)="onTorchCompatible($event)" [autofocusEnabled]="true"
(hasDevices)="onHasDevices($event)" (scanSuccess)="onCodeResult($event)"
[torch]="torchEnabled"
></zxing-scanner>
</div>
onHasPermission(resp) {
console.log('hasPermission: ' + resp);
this.hasPermission = resp;
}
onHasDevices(resp) {
console.log('hasDevices: ' + resp);
this.hasDevices = resp;
}
onTorchCompatible(resp) {
console.log('torchCompatible: ' + resp);
this.torchCompatible = resp;
}
onCodeResult(resultString: string): void {
console.log(resultString);
this.url = resultString;
this.qrEnabled = false;
}
startReading() {
if (!this.hasDevices) {
return;
}
if (this.hasPermission) {
this.selectDevice();
} else {
this.scanner.askForPermission().then((response) => {
console.log('response: ' + response);
if (response) {
this.selectDevice();
}
})
}
}
selectDevice() {
this.qrEnabled = true;
this.scanner.updateVideoInputDevices().then(devices => {
let device = devices.find(device => {
if (device.label.includes('back')) {
return device;
}
})
device = device ? device : devices[devices.length - 1];
this.scanner.device = device;
});
}
Expected behavior QR reading works after enabling or disabling torch
Smartphone (please complete the following information):
- Device: OnePlus5
- OS: Android 10
- Browser Chrome
- Version Chrome (81.0.4044.117)
Issue Analytics
- State:
- Created 3 years ago
- Reactions:1
- Comments:6 (1 by maintainers)
Top Results From Across the Web
DOMException: setOptions failed on takePhoto() #15 - GitHub
I get this error: Uncaught (in promise) DOMException: The associated Track is in an invalid state.
Read more >Had the same DOMException: setOptions failed on takePhoto ...
With work-around found from above discussion, using grabFrame() instead and converted bitmap to dataurl and then converted to blob again to ...
Read more >DOMException: setOptions failed on takePhoto() : r/ionic - Reddit
Hi guys, I am struggling with the issue in the Title, using Ionic 5, Angular 8, Capacitor 2.0 and testing in Chrome Version...
Read more >Javascript DOMException: The associated Track is in an ...
In chromium sources I have found this method. I've overcame error using code like this: const promise = getPrevImagePromise(); if (!promise && ...
Read more >MediaStream Image Capture - W3C
When the setOptions() method of an ImageCapture object is invoked, then a valid PhotoSettings object MUST be passed in the method to the ......
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
The issue is reproducible on https://zxing-js.github.io/ngx-scanner/. It seems that the device is being unselected after disabling torch, so this is my workaround:
However the error is still in the console.
As - except the error / message - there’s no other side effect i’m aware of, I hacked it this way: