search

stefanrmmr / streamlit-audio-recorder

Record Audio from the User's Microphone in Apps that are Deployed to the Web. (via Browser Media-API, REACT-based, Streamlit Custom Component)
MIT License
415 stars 75 forks source link

Recording permission error when running remotely. #14

Closed avidale closed 10 months ago

avidale commented 1 year ago

I have an error when running streamlit-audio-recorder remotely (on an AWS server), however, when I run it locally, the error does not reproduce.

When I am loading the page, I can see the following warning in the browser's developer console:

DevTools failed to load source map: Could not load content for https://my_url/component/st_audiorec.st_audiorec/bootstrap.min.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

When I am pressing the "Start recording" button, nothing happens on the web page, but I am seeing two errors in the developer console:

Error: Issue getting mic DOMException: Permission denied

and

index.js:125 Uncaught (in promise) TypeError: Failed to execute 'createMediaStreamSource' on 'AudioContext': parameter 1 is not of type 'MediaStream'.
    at n.setUpRecording (index.js:125:36)
    at e (index.js:272:10)

Here index.js is apparently the file with AudioReactRecorder source code.

The browser page is allowed to use the microphone, so this "Permission denied" error looks really mysterious. I am using Google Chrome on Mac.

Can anyone please suggest how can I fix this error? It may be related to #9, but the error messages are different, so I am not sure.

VaysseRobin commented 1 year ago

Not sure if it's related but I also had the error index.js:125 Uncaught (in promise) TypeError: Failed to execute 'createMediaStreamSource' on 'AudioContext': parameter 1 is not of type 'MediaStream'. with the "Start Recording" button doing nothing. I solved that by simply turning off my add blocker.

I'm hosting my server with docker on an Ubuntu computer so it could not be the same problem but I guess it can be helpful for some people.

stefanrmmr commented 10 months ago

Hi @avidale, to ensure that 'createMediaStreamSource' can be connected successfully, I can advise you to look into these solution approaches - these may mitigate the issue at hand. Also, big thanks to @VaysseRobin for your support. 🤙🏻

1) Make sure that your deployment is configured in a way that the component targets the user's microphone (browser media-stream API) and not the microphone of the deployment server's (Azure, AWS, etc.) audio channels.

2) Ensure that your streamlit app deployment is https-enabled. Look into obtaining certificates from Let's Encrypt using certbot, follow the steps as instructed here: https://docs.streamlit.io/library/advanced-features/https-support

3) On the user's end, ensure that the web app is granted access to the user's microphone (via browser pop-up). If the pop-up doesn't appear, ensure to disable add-blockers and access the app via https.