在 react-qr-reader 中获得结果后如何停止相机答案

【问题标题】：How can I stop the camera after getting result in react-qr-reader在 react-qr-reader 中获得结果后如何停止相机
【发布时间】：2022-12-04 12:48:15
【问题描述】：

我正在使用 react-qr-reader 扫描二维码，扫描工作正常但我无法关闭打开的相机。摄像机的 LED 指示灯仍然亮着。

我也尝试使用 getMedia 函数，但它会创建新实例，所以我不起作用。

有没有另一种方法来停止相机。国家没有帮助。

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;

【问题讨论】：

setIsRecording(false) 这个有用吗？
没有相机仍然处于活动状态

标签： typescript next.js qr-code

【解决方案1】：

尝试通过 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>
    );
};

【讨论】：

然后它会产生这个错误：TypeError: Cannot read properties of undefined (reading 'stopCamera')
您是否将 ref 传递给 QrReader <QrReader ref={ref} />？ @MohanrajG
是的。我仍然没有工作，我认为应该将 react-qr-reader 降级到版本 2。希望它能工作

【解决方案2】：

只需添加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()
};

【讨论】：