Camera showing black/white screen when multiple tabs are open

[imtiaz993]

When using the BrowserMultiFormatReader from @zxing/browser in a React/Next.js application with multiple browser tabs open, the camera stream fails to initialize correctly in tabs. Specifically:

The camera remains locked to the first tab that accesses it.
Inactive tabs display a white screen instead of the camera feed.
The camera does not release properly when switching tabs, preventing other tabs from accessing it until the page is manually interacted with (e.g., clicking a button) or refreshed, and even then, it often requires closing the original tab.
This issue persists despite attempts to stop and restart the camera stream using reset() and managing tab visibility with visibilitychange events.

Expected behavior
When switching between tabs, the camera should be released from the inactive tab and made available to the active tab.
The

`import { useEffect, useRef, useState } from "react";
import { BrowserMultiFormatReader } from "@zxing/browser";

const ZXingScanner = ({ onScan, openCart }: any) => {
const videoRef = useRef(null);
const beepSound = new Audio("/beep.mp3");
const [cameraAccessError, setCameraAccessError] = useState(false);

useEffect(() => {
const codeReader = new BrowserMultiFormatReader();

codeReader
  .decodeFromVideoDevice("", videoRef.current, (result) => {
    if (result && !openCart) {
      onScan(result.getText(), beepSound);
    }
  })
  .catch((error) => {
    setCameraAccessError(true);
  });

}, [onScan]);

const handleReload = () => {
window.location.reload();
};

return (

{cameraAccessError && (

Camera access denied.{" "}

Reload page{" "}

or{" "}

check permissions.

)}
<video
ref={videoRef}
style={{ width: "100%", height: "100%", objectFit: "cover" }}
/>
<div
style={{
position: "absolute",
top: "50%",
left: "10px",
width: "calc(100% - 20px)",
height: "2px",
backgroundColor: "red",
}}
>

);
};

export default ZXingScanner;
`

[imtiaz993]

@werthdavid

[werthdavid]

Sorry, I don't have experience with React. I can imagine that the stop and start on the next tab is "too quick" to release the camera before it is accessed again. Can you try waiting some time after closing the camera before accessing again?