如何在React App中使用React-qr-reader添加实时摄像头扫描？
如何在React App中使用React-qr-reader添加实时摄像头扫描？
提问于 2020-11-05 23:08:41
嗨，我正在试着用next js做一个网络二维码扫描仪。但我不懂如何拍摄直播视频来扫描二维码。
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;如何添加实时摄像头选项以从网络摄像头获取扫描。
回答 1
Stack Overflow用户
发布于 2021-02-19 23:41:17
这段代码对我来说很有效：
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;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64699939
复制相关文章
相似问题
腾讯云开发者
