如何停止（相机）react-qr-reader

Question

我正在使用 react-qr-reader 组件为我的网站构建一个 qr 扫描仪模式。

模式按预期创建，我可以扫描不同的二维码，但在关闭离子模式后，扫描仪使用户相机保持活动状态，但停止检测二维码。

如何停用用户相机？

在我的研究中，我发现以下 question 已经问过。那里提出了我正在使用的关闭功能

ref.current.stopCamera()

在最后。我无法以某种方式定义 ref，因为 ref 不在 QrReader 组件的“IntrinsicAttributes & QrReaderProps”中。

那么，我如何引用反应组件，并且是添加的关闭功能

ref.current.stopCamera()

停用相机的正确方法？

谢谢你的帮助！

这是我的代码：

export const ScannerModal: React.FC<ScannerProps> = ({ triggerID, handleScannedNode }) => {
  const modal = useRef<HTMLIonModalElement>(null);
  const scannerConstraints: MediaTrackConstraints = {

  }

  function onDissMiss(event: CustomEvent<OverlayEventDetail>){
    console.log(event)
    close()
  }

  function handleScan(result: string){
    close()
    handleScannedNode(result)
  }

  async function close(){
    console.log("closing")
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: false,
      video: true,
  });
  stream.getTracks().forEach(function (track) {
      track.stop();
      track.enabled = false;
  });
  //ref.current.stopCamera()
  }

  return (
  <>
  <IonModal trigger={triggerID} onWillDismiss={onDissMiss} ref={modal}>
    <IonTitle>Scanne einen QR-Code</IonTitle>
    <IonPage>
    <QrReader constraints={scannerConstraints} ref={}
        onResult={(result, error) => {
          if (!!result) {
            handleScan(result?.getText());
          }

          if (!!error) {
            //console.info(error);
          }
        }}/>
    </IonPage>
  </IonModal>
  </>
  );
};

我尝试通过以下方式引用 QrReader 组件：

const reader = useRef(null);

<QrReader constraints={scannerConstraints} ref={reader}
        onResult={(result, error) => {
          if (!!result) {
            handleScan(result?.getText());
          }

          if (!!error) {
            //console.info(error);
          }
        }}/>

我收到的错误是：

Property 'ref' does not exist on type 'IntrinsicAttributes & QrReaderProps'.

Answer 1

访问 ref，您可以在组件中使用 useRef 挂钩

const reader = useRef(null);

<QrReader constraints={scannerConstraints} ref={reader}
        onResult={(result, error) => {
          if (!!result) {
            handleScan(result?.getText());
          }

          if (!!error) {
            //console.info(error);
          }
        }}/>

然后，当你想关闭模式时，你可以通过调用 ref 上的 stopCamera 方法来停止相机。

function close(){
  console.log("closing")
  reader.current.stopCamera();
}