如何停止(相机)反应qr阅读器

Question

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

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

如何停用用户的摄像头?

在我的研究中，我发现以下问题已经被问到。这里我使用的close函数是用

提议的

ref.current.stopCamera()

在末尾。不知何故，我不能定义ref因为ref不在"IntrinsicAttributes &QrReaderProps"QrReader组件

那么，我如何引用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

对于每个想要实现一个简单的react qr扫描仪的人来说:

我找到了一个有效的解决方案，使用这个qr扫描仪项目。

我这样构建我的组件:

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;