next.js中二维码扫描器（手机）的实现方法

Question

I am building a website with scanning qr code. This works fine on desktop but not working on mobile. In Reactjs, this works with secure connection. But in Nextjs, this does not work with secure connection. I run custom server in Nextjs.

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

This is my code.

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;

This is error from mobile chrome inspector. error console

Answer 1

It's like your browser is not supported.

https://github.com/react-qr-reader/react-qr-reader#browser-support

Try this:

Browser Support

The browser layer is using the MediaDevices web API which is not supported by older browsers.

You can use external polyfills like WebRTC adapter to increase browser compatibility.

Also, note that the library is using the TypedArray ( Int32Array , Uint8ClampedArray , etc.) which are not available in older browsers (eg Android 4 default browser).

You can use core-js to add support to these browsers.

In the PDF 417 decoder recent addition, the library now makes use of the new BigInt type, which is not supported by all browsers as well. There's no way to polyfill that and ponyfill libraries are way to big , but even if PDF 417 decoding relies on BigInt the rest of the library shall work ok in browsers that doesn't support it.

There's no polyfills for BigInt in the way it's coded in here.