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

Question

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

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

我怎样才能停用用户的相机？

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

ref.current.stopCamera()

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

那么，如何引用react组件，是添加的close函数

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

对于找到这个线程的每个人来说，只想实现一个简单的反应 qr 扫描仪：

我使用这个 qr-scanner 项目找到了一个可行的解决方案.

我这样构建我的组件：

import { useRef, useState, useEffect } from 'react';   
import { IonModal, IonPage, IonTitle } from '@ionic/react';
import { OverlayEventDetail } from '@ionic/core'; 
import QrScanner from 'qr-scanner';

interface ScannerProps {
  triggerID: string;
}

const QrModal: React.FC<ScannerProps> = ({ triggerID }) => {
  const modal = useRef<HTMLIonModalElement>(null);
  const video = useRef<HTMLVideoElement>(null);
  const [qrScanner, setQrScanner] = useState<QrScanner>();

  function onDissMiss(_event: CustomEvent<OverlayEventDetail>) {
    close();
  }

  function handleScan(result: QrScanner.ScanResult) {
    //Logic with scanned qr code
  }

  async function close() {
    qrScanner?.stop();
    qrScanner?.destroy();
    setQrScanner(undefined);
  }

  useEffect(() => {
    if (video.current) {
      const qrScanner = new QrScanner(video.current, (result) => handleScan(result), {
        highlightScanRegion: true,
      });
      qrScanner.start();
      setQrScanner(qrScanner);
    }
    // Dependency array missing handleScan, since it should not set Scanner on handleScan change
    // eslint-disable-next-line
  }, [video.current]);

  return (
    <>
      <IonModal trigger={triggerID} onWillDismiss={onDissMiss} ref={modal}>
        <IonTitle>Scan your QR-Code</IonTitle>
        <IonPage>
          <video ref={video}></video>
        </IonPage>
      </IonModal>
    </>
  );
};

export default QrModal;