Error with the video (NotReadableError: Could not start video source)

[loic-parent]

Hello,

I encounter an issue with this package.

This error message appears only on some devices (not all):
image

(I am using Ionic with Angular and the package @zxing/ngx-scanner with the latest version).

The permission is ok, I tried the method restart and tryHarder and I also tried to get and set the devices but, unfortunately, without any success.

Is there a way to fix it?

Thanks for your help,
Loïc

[loic-parent]

This is very similar to this report of 2019.

[loic-parent]

Hello, Nobody can help me with this issue?

[pm-ihes]

I have exactly the same issue, but just on some devices? Did anybody find out something?

[loicparent]

Hello @pm-ihes,

I finally changed a few things to make it work properly on build (www) version.
So, at the init of the component, I check and set the camera/device with a specific delay.
You can find the parameter "device" and the event "cameraFound" related to the function "initCamera".

Maybe try using this approach 🙂

HTML:

<zxing-scanner
  *ngIf="showScanner"
  [device]="selectedDevice"
  [formats]="[11]"
  (camerasFound)="initCamera($event)"
  (scanComplete)="onScan($event)">
</zxing-scanner>

Typescript:

selectedDevice:any;
initCamera(devices:any) {
  if( this.selectedDevice ) { return; }

  const backCamera = devices.filter((device:any) => /back|rear|environment|arrière|achter|hinten/i.test(device.label) && !/telephoto|wide|ultra|avant|front|grand|large|longue/i.test(device.label) );

  setTimeout(() => {
    this.selectedDevice = backCamera[0] || devices[0];
  }, 1000);  // Should be based on accurate event but not available 🙃
}

Hope this will help you,
Loïc

[pm-ihes]

Hey @loicparen,

thanks for your response. I also played a bit around with the timeout and it works for me either.

[lovalova1991]

Hello everybody,

in 2025 i still have the problem.
Angular 19, ngx-scanner 19.0.0, Android 14 and Chrome 135.0.7049.100

Tried playing with timeouts but no luck at all. I still get

Error in scanner: NotReadableError: Could not start video source

Any clue?

Thanks

[pm-ihes]

Hi @lovalova1991,
could you provide any additional information (e.g. a small snippet of your code). Some devices are really slow with getting the MediaStream. I resolved this by using a timeout with several attempts, so I check every 300ms if the MediaStream is available. This worked for me.

[vsarangan]

Hi @pm-ihes , we tried your suggestion but it is not working, stram is locked or not available

We are facing the same issue in both WebView and mobile browsers Angular 19 + Android 11, 12, 13.

Our Use Case / Observation

The scanner works fine the first time we open it — the camera starts, permissions are granted, and everything functions as expected.

However, if the user closes the browser tab or the mobile app without scanning anything, and then navigates back to the screen that initializes the scanner, we consistently hit the following error:

NotReadableError: Could not start video source

What We Found

In the positive flow, ngOnDestroy properly resets the scanner and releases all video streams when leaving the component.

But in this particular use case (closing the app or browser abruptly), the stream is not killed/cleaned up properly, so when the component is reloaded the next time, the scanner tries to reinitialize against a "stale" or locked stream, which results in the error.

After this issue if we navigate to other route , route got failed due to try and catch not available in the ngOnDestroy

Additional Notes

If we directly initialize the scanner in the AppComponent (root level), we do not face this issue at all.

The error only appears when using the scanner inside a different routed screen, which suggests the cleanup/teardown logic is not always being called or executed when navigation happens outside the normal Angular lifecycle.