Issue with ZXing QR Code Scanner Activating in Main Component Instead of Modal in Angular

[mikeljcp]

Description: I am encountering an issue with the ZXing QR code scanner component in Angular. When I implement the scanner in a modal, it activates the camera in the main component instead of the modal. This conflict occurs despite my attempts to deactivate the main component's scanner when the modal is opened.

Steps to Reproduce:

Implement ZXing QR code scanner in the main component.

Implement the same scanner in a modal that belongs to the main component.

Open the modal from the main component.

Observe that the camera activated is from the main component instead of the modal.

Expected Behavior: When the modal is opened, the camera in the main component should be deactivated, and only the modal's camera should be active.

Actual Behavior: Opening the modal causes the camera in the main component to activate, not the camera in the modal.

Environment:

Angular version: 13
ZXing library version: 3.5.0