Get "Component Error: Cannot read properties of null (reading 'getAudioTracks')" when run remotely

[sanzgiri]

My streamlit app using this component runs fine locally on my Mac but when I run the same app on an Ubuntu VM in the cloud (Azure), it does not work.

When I start the recording, I don't see the waveform, so no recording may be taking place. And when I click stop, I get this error: "Component Error: Cannot read properties of null (reading 'getAudioTracks')"

[sanzgiri]

I think the problem is giving access to the remote site to use the microphone via the browser's security settings. With Chrome or Edge, you can only do this if the remote site uses https. And streamlit runs over http by default and that is how it is running on my remote host. I have not seen a simple way to run streamlit over https.

[DharmarajaP]

I also getting the same error "Component Error: Cannot read properties of null (reading 'getAudioTracks')" when i run the app as web application using ngrok in windows. But it is working fine locally. Even i given access to microphone in my chrome browser. Is there any solution ?

[sanzgiri]

I was able to run streamlit over https, after obtaining certificates from Let's Encrypt using certbot and using the instructions here: https://docs.streamlit.io/library/advanced-features/https-support

[wuyu9603]

I was able to run streamlit over https, after obtaining certificates from Let's Encrypt using certbot and using the instructions here: https://docs.streamlit.io/library/advanced-features/https-support

Can you tell me the details of how to make it work? I also stucked by this remote macrophone problem. Thank you.

[JDanielWu]

I was able to run streamlit over https, after obtaining certificates from Let's Encrypt using certbot and using the instructions here: https://docs.streamlit.io/library/advanced-features/https-support

Can you tell me the details of how to make it work? I also stucked by this remote macrophone problem. Thank you.

Just solved this problem.
1.Generate temporary SSL authentication
openssl genrsa 2048 > host.key
chmod 400 host.key
openssl req -new -x509 -nodes -sha256 -days 365 -key host.key -out host.cert
2.streamlit run with https
streamlit run xx.py --server.sslCertFile host.cert --server.sslKeyFile=host.key

[jamiesun]

在使用 certbot 从 Let's Encrypt 获取证书并使用此处的说明后，我能够通过 https 运行 streamlit：https://docs.streamlit.io/library/advanced-features/https-support

你能告诉我如何让它工作的细节吗？我也被这个远程宏电话问题卡住了。谢谢。

刚刚解决了这个问题。 1.生成临时SSL身份验证 openssl genrsa 2048 > host.key chmod 400 host.key openssl req -new -x509 -nodes -sha256 -days 365 -key host.key -out host.cert 2.streamlit run with https streamlit run xx.py --server.sslCertFile host.cert --server.sslKeyFile=host.key

What's the difference between this and reverse proxy https, I use reverse proxy https and it works sometimes, but it's very unstable.