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