DOMException: Could not start video source with zxing and bootstrap 4 modal

Question

I'm using @zxing/ngx-scanner, Angular 7 and ngx-bootstrap modal.

In my application, I put ngx-scanner into a modal, when user click on a specific button, browser will ask for user camera access permission and display the modal dialog which contains zxing/ngx-scanner.

I access my web application using Android XPERIA XA1 and Chrome 70.0.3538.80.

With front camera, it is always fine. But when I change to rear camera, an error is thrown back to me: DOMException: Could not start video source.

It is very frustrating, I have been searching for this issue hours and hours but found nothing.

Here is my reproduce on stackbliz.

I already checked the camera access permission conflict between apps and browsers, but nothing occupies the camera access.

Can anyone help me please ?

Thank you.

Answer 1

Typically that error happens when you do not close the front camera using stream.getTracks().forEach(track => track.stop() before calling getUserMedia again to acquire the rear camera. Android devices are typically limited to one open camera at a time.