search

B4PT0R / streamlit-mic-recorder

Streamlit component allowing to record audio from the user's microphone and/or perform speech to text easily
MIT License
142 stars 25 forks source link

Unable to record from microphone when using a remote server. #16

Open coreyryanhanson opened 2 months ago

coreyryanhanson commented 2 months ago

I think this issue is related to: https://github.com/B4PT0R/streamlit-mic-recorder/issues/4

Because I get the same behavior and error. I decided to open as a new issue, because I have additional debugging information that comes from my browser when I try to inspect the button (on a hosted instance).

TypeError: Cannot read properties of undefined (reading 'getUserMedia')
    at e.startRecording (MicRecorder.tsx:95:32)
    at e.onClick (MicRecorder.tsx:54:18)
    at Object.u (react-dom.production.min.js:14:84)
    at h (react-dom.production.min.js:14:238)
    at react-dom.production.min.js:14:292
    at b (react-dom.production.min.js:15:72)
    at ut (react-dom.production.min.js:52:170)
    at ot (react-dom.production.min.js:51:255)
    at st (react-dom.production.min.js:52:334)
    at pt (react-dom.production.min.js:56:10)

Anyway, I want to preface this by saying that this plugin works great if I run an instance locally on my own laptop (and host it to other devices which in turn ask for their own microphones) But, if I try to run this plugin remotely within a clean venv on a server like runpod, the button does not do anything or even prompt users to access their hardware only revealing these errors when inspecting elements. I have a feeling that there is some dependency missing that is taken for granted on most installs. I just haven't been able to figure out what it is.

carlos-osorio-alcalde commented 2 months ago

Same error here. I think it is related to this: https://stackoverflow.com/questions/67663961/cannot-read-property-getusermedia-of-undefined-over-https

I enabled "Insecure origins treated as secure" in Chrome and it worked.