Microphone access for a deployed Gradio app on E2

Beginners
1

I need to create a demo to test an STT Agent. I created a simple Gradio app and deployed it on EC2 instance. However, when I launch it, my browsers(Safari and Chrome) report no microphone provided. Is it possible to deploy the app in a way that allows microphone access?

I’ve included a basic example of my Gradio app, which also doesn’t work.

import gradio as gr

audio = gr.Microphone(sources=["microphone"], type="filepath")
ui = gr.Interface(
    fn=lambda x: x,
    inputs=audio,
    outputs=audio,
    allow_flagging="never"
)

if __name__ == '__main__':
    ui.launch(server_name="0.0.0.0")

I tried to change port, but the results are the same. I also tried to use NGINX, but I couldn’t write a proper script.

2

This issue sounds tricky.

When I set “server.launch(share=True)”, I use this url (https://1a9b77cb89ac33f546.gradio.live), and it is ok.
However, when I set “server.launch(server_name=“0.0.0.0”)”, I use my own public url (for example, http://101.40.163.105:7860), it doesn’t prompt me for microphone access.

this is not a Gradio issue but it’s actually due to the fact that modern browsers block microphone access in http environments. We have an existing issue to provide clearer error messages when this happens: #2551

3

Yes, it works for STT, but if I decide to play audio, the app will crash. Are there any solutions?

4

There are a few ways to do it, but I’m kind of a fossil, so I’m not familiar with internet-related implementations…

5

How did you solve it in the end?
I am kind of having the same issue now

1 Like