如何在 React 应用程序中添加带有"react-qr-reader"的实时相机扫描？

Question

嗨，我正试图用next js制作一个网络qr扫描仪。但我不知道如何拍摄实时视频来扫描二维码。

import React, { Component } from "react";
import dynamic from "next/dynamic";
const QrReader = dynamic(
() => import("react-qr-reader").then((mod) => mod.QrReader),
{ ssr: false }
);
class Index extends Component {
state = {
result: "No result",
};
handleScan = (data) => {
if (data) {
this.setState({
result: data,
});
}
};
handleError = (err) => {
console.error(err);
};
render() {
return (
<div>
<QrReader
delay={300}
onError={this.handleError}
onScan={this.handleScan}
style={{ width: "100%" }}
/>
<p>{this.state.result}</p>
</div>
);
}
}
export default Index;

如何添加实时摄像头选项以从网络摄像头进行扫描。

Answer 1

此代码适用于我：

import React, { Component } from 'react'
import dynamic from 'next/dynamic'
const QrReader = dynamic(() => import('react-qr-reader'), {
ssr: false
})
class Index extends Component {
state = {
result: "No result",
};

handleScan = (data) => {
if (data) {
this.setState({
result: data,
});
}
};
handleError = (err) => {
console.error(err);
};
render() {
return (
<div>
<QrReader
delay={300}
onError={this.handleError}
onScan={this.handleScan}
style={{ width: "100%" }}
/>
<p>{this.state.result}</p>
</div>
);
}
}
export default Index;

https://github.com/JodusNodus/react-qr-reader/issues/96