Post Build this functionality not working

[persistentWeb]

audio-react-recorder is working well on localhost. but when I built the project and hosted it to server (non-secure url). mic is neither accessible. when saw the site permissions, it shows microphone blocked and I am not able to enable it.

Please help.

[ghost]

If you are currently working with the latest react then you'll be able to request permissions from the client using React.useEffect() :

// ask permissions to access the microphone first before proceeding further
    const [isBlocked, setIsBlocked] = React.useState(false);

    React.useEffect(() => {
        navigator.getUserMedia(
            {audio: true},
            () => {
                console.log('Access granted.');
                setIsBlocked(false);
            },
            () => {
                console.log('Access denied.');
                setIsBlocked(true);
            });
    }, [isBlocked]);

Hope it helps.

you'll be able to change permission to the mic if you click an icon next to the addressbar. Once it's done, browser will ask you to reload the page.

[ghost]

Code above works on Microsoft Edge (Chromium based), however on Firefox it produces errors such as "unknown .getUserMedia". There are some rumors about firefox releasing "Permissions API" which by now is marked as experimental feature and still not available to the public yet.