typescript - Hur kan jag stoppa kameran efter att ha fått resultat i react-qr-reader

Jag använder react-qr-reader för att skanna QR-kod, skanningen fungerar bra men jag kan inte stänga kameran som öppnades. Kamerans LED-indikator är fortfarande på.

Jag försökte också med getMedia-funktionerna men det skapar en ny instans så det fungerar inte.

Finns det ett annat sätt att stoppa kameran. state hjälper inte.

import { useState, useEffect, useRef } from "react";
import { QrReader } from "react-qr-reader";

const ScanQrPopUp = ({ handlePopUp, walletAddress }: ScanPopUpInterface) => {
  const [address, setAddress] = useState<string>("");
  const [isRecording, setIsRecording] = useState<boolean>(true);

  useEffect(() => {
      walletAddress(address);
      setIsRecording(false)
      closeCam();
  }, [address]);

  const closeCam = async () => {
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: false,
      video: true,
    });
    stream.getTracks().forEach(function (track) {
      track.stop();
      track.enabled = false;
    });
  };


  return (
      <div>
        <h1>
          Buy
        </h1>

        {isRecording && (
          <div>
            <QrReader
              onResult={(result, error) => {
                if (result) {
                  setAddress(result?.text);
                }
                if (!!error) {
                  console.log(error);
                }
              }}
              style={{ width: "100%" }}
            />
          </div>
        )}

        <p>{address}</p>
    </div>
  );
};

export default ScanQrPopUp;

Svar #1

Lägg helt enkelt till window.location.reload()

const closeCam = async () => {
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: false,
      video: true,
    });
    // the rest of the cleanup code
    window.location.reload()
};

Svar #2

Försök att stoppa kameran genom att använda ref

import { useState, useEffect, useRef } from "react";
import { QrReader } from "react-qr-reader";

const ScanQrPopUp = ({ handlePopUp, walletAddress }: ScanPopUpInterface) => {
    const [address, setAddress] = useState<string>("");
    const [isRecording, setIsRecording] = useState<boolean>(true);
    const  ref = useRef(null);

    useEffect(() => {
        walletAddress(address);
        setIsRecording(false)
        closeCam();
    }, [address]);

    const closeCam = async () => {
        const stream = await navigator.mediaDevices.getUserMedia({
            audio: false,
            video: true,
        });
        stream.getTracks().forEach(function (track) {
            track.stop();
            track.enabled = false;
        });
        ref.current.stopCamera()
    };


    return (
        <div>
            <h1>
                Buy
            </h1>

            {isRecording && (
                <div>
                    <QrReader
                        onResult={(result, error) => {
                            if (result) {
                            setAddress(result?.text);
                            }
                            if (!!error) {
                            console.log(error);
                            }
                        }}
                        style={{ width: "100%" }}
                        ref={ref}
                    />
                </div>
            )}

            <p>{address}</p>
        </div>
    );
};