how correct stop video in react hook

Hello, I have in react component, when is render I want run scanner, if not stop scanning barcode.

import React, {useRef, useEffect} from 'react';
import {BrowserMultiFormatReader, BarcodeFormat} from '@zxing/browser';
import DecodeHintType from "@zxing/library/cjs/core/DecodeHintType";
import {makeStyles} from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
    video: {
        width: '100%',
        height: '100%',
        maxHeight: '50vh',
        objectFit: 'cover',
    },
}));

export default function ScannerZxing({callback}) {
    const classes = useStyles();
    const video = useRef();
    useEffect(() => {
            const hints = new Map();
            const formats = [BarcodeFormat.QR_CODE, BarcodeFormat.CODE_128, BarcodeFormat.ITF];
            hints.set(DecodeHintType.POSSIBLE_FORMATS, formats);
            const codeReader = new BrowserMultiFormatReader(hints, {
                delayBetweenScanSuccess: 2000,
                delayBetweenScanAttempts: 600,
            });
            var controls = null;
            controls = codeReader
                .decodeFromVideoDevice(undefined, video.current, function (result, error) {
                    if (typeof result !== "undefined") {
                        callback(result); // redirect on different page and not render this
                    }
                })
            console.log(controls);

            return function cleanup() {
                console.log('clean');
                //controls.stop();
            };
    });

    return (
        <video
            className={classes.video}
            ref={video}
        ></video>
    );
}

but it now works correctly and after scan and render different page scanner still work, could you please write example in react?

[odahcam]

Yeah, will write in a few days. Please ping me here if it takes too long.

[tuul-wq]

@mmalomo I had a similar issue only in Safari. Using qrScanner.current.stop() disabled scanning process but didn’t affect camera’s light on my laptop. Fortunately I spotted a difference in streams ids that I got from navigator.mediaDevices.getUserMedia({ video: true }) and videoRef.current.srcObject. Thus I decided to save stream from getUserMedia and use it to stop all the video tracks.

<script type="text/javascript">
    window.addEventListener('load', async () => {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true });

      const codeReader = new ZXingBrowser.BrowserQRCodeReader();
      const previewElem = document.querySelector('#video');

      // undefined - takes 1st available camera
      try {
        const controls = await codeReader.decodeFromVideoDevice(undefined, previewElem, (result) => {
          console.log('scan ...');
        });

        // stop after 1.5 sec
        setTimeout(() => {
          stream.getVideoTracks().forEach(track => track.stop());
          controls.stop();
        }, 1500);
      } catch (error) {
        console.warn(error);
      }
    });
  </script>

In React I do this to stop scanning + camera’s light.

  streamRef.current.getVideoTracks().forEach((track) => track.stop());
  qrScannerControls.current.stop();