如何在next.js中实现二维码扫描(移动)

Question

我正在建立一个扫描二维码的网站。这在台式机上运行得很好，但在移动设备上就不行了。在Reactjs中，这与安全连接一起工作。但在Nextjs中，这不适用于安全连接。我在Nextjs中运行自定义服务器

https://dev.to/nakib/using-https-on-next-js-local-development-server-bcd

这是我的代码。

import React, { useState } from 'react';
import { QrReader } from 'react-qr-reader';
const Home = (props) => {
const [data, setData] = useState('No result');
return (
<>
<QrReader
onResult={(result, error) => {
if (!!result) {
setData(result?.text);
}
if (!!error) {
console.info(error);
}
}}
style={{ width: '100%' }}
/>
<p>{data}</p>
</>
);
};
export default Home;

这是来自移动chrome检查器的错误。错误控制台

Answer 1

好像你的浏览器不支持。

https://github.com/react-qr-reader/react-qr-reader浏览器支持

试试这个:

浏览器支持

浏览器层使用MediaDevices web API旧的浏览器不支持。

你可以使用外部填充，如WebRTC适配器来增加浏览器的兼容性。

另外，注意库正在使用TypedArray(Int32Array，Uint8ClampedArray等)，这些在旧的浏览器中不可用(例如Android 4默认浏览器)。

你可以使用core-js来添加对这些浏览器的支持

在最近添加的PDF 417解码器中，库现在使用新的BigInt类型，也不是所有浏览器都支持。没有办法对它进行polyfill，而ponyfill库是，而不是。，但即使PDF 417解码依赖于BigInt库的其余部分在不支持的浏览器中可以正常工作

没有BigInt的多边形在这里编码的方式。