gradio: Better error when mic/webcam are not accessible in HTTP environment

Describe the bug

Issue.

I deployed an example of microphone testing on my local machine. Knocking on http://127.0.0.1:7860/ (or http://localhost:7860/), everything works. Knocking on http://MY_IPV4:7860/, the stop recording button does not work. On a local machine, it doesn’t matter to me which URL to use. But if you deploy it on a server (for example, in a Docker container), and access the IP of the server, then this is critical. P.S., only the stop recording button does not work, the rest functions correctly.

Details.

When you click the Record from microphone button in the browser console the following: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘getUserMedia’) at le (Audio.svelte:103:51) at HTMLButtonElement.x (Audio.svelte:181:4) le @ Audio.svelte:103 x @ Audio.svelte:181

When you click the Stop recording button in the browser console, the following (this button does not work as intended): Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘stop’) at HTMLButtonElement.v (Audio.svelte:198:3) v @ Audio.svelte:198

Is there an existing issue for this?

I have searched the existing issues

Reproduction

You can reproduce the error by running main.py with the code below.

main.py

import gradio as gr


def test_micro(path2audio):
    return path2audio


if __name__ == '__main__':
    demo = gr.Interface(fn=test_micro,
                        inputs=gr.components.Audio(source="microphone", type="filepath", label="Speaker"),
                        outputs="text")
    demo.launch(server_port=7860, server_name="0.0.0.0", debug=True, share=False)

Screenshot

No response

Logs

The Python console has standard output, there are no errors.


Running on local URL:  http://0.0.0.0:7860

To create a public link, set `share=True` in `launch()`.

System Info

Python version: 3.9.10.
Gradio version: 3.7.
Browser: Mozilla FireFox (102.3.0esr, 64-bit); Google Chrome (version 106.0.5249.119, 64-bit).
OS: Linux; Windows (problem everywhere).

Severity

blocking all usage of gradio

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 17 (1 by maintainers)

Most upvoted comments

I found the solution Browsers may not accept microphone and camera input from http server anymore

One solution is to create ssl by yourself openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -sha256 -days 365 -nodes

and add the certfile at launch method, and block method demo.launch(server_name="0.0.0.0", ssl_certfile="/path/to/cert.pem", ssl_keyfile="/path/to/key.pem")

and lastly, I am not sure if this would pose a problem or not, but I have to pass this certfile to requests change line https://github.com/gradio-app/gradio/blob/fd317266665fee92b1346a468e14f30c6afcfcec/gradio/blocks.py#L1324 to requests.get(f"{self.local_url}startup-events", verify=ssl_certfile)

darwinharianto on Nov 10, 2022

I successfully resolved the issue related to accessing the microphone and webcam in an HTTP environment. When using Gradio on a local server, I encountered an HTTPS problem. Below is the solution I implemented:

Generating Certificates and Keys: To enable secure communication, I created SSL certificates and keys using the following OpenSSL command:
```
openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -sha256 -days 365 -nodes
```
Gradio Configuration for Access: I adjusted the Gradio settings to allow proper access. By launching the demo with the following parameters:
```
demo.launch(server_name="0.0.0.0", server_port=7861, ssl_certfile="/path/to/cert.pem", ssl_keyfile="/path/to/key.pem", ssl_verify=False)
```
I ensured successful access to the microphone and webcam without encountering HTTPS issues.

With the above steps in place, I was able to resolve the problem and achieve seamless access.

Please make sure to replace "/path/to/cert.pem" and "/path/to/key.pem" with the actual paths to your SSL certificate and key files respectively. Additionally, the ssl_verify=False parameter allows for skipping certificate verification, which should be used with caution in production environments.

Kedreamix on Jul 28, 2023

Same here. Stop Recording button works with public url and HF spaces, but not with the server ip + port. Any suggestions please @abidlabs ?

bofenghuang on Nov 4, 2022

there is a easy method to solve this problem. demo.launch(share=True),then use the public url ,then it works

couldn on Oct 27, 2023

simple solution

ask chrome browser to treat gradio url as secure as mentioned here

restart browser open url and mic permission

nellorebhanuteja on Aug 10, 2023

I tried the suggested method but I still face the same error as before.

ssl.SSLCertVerificationError: [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: self signed certificate (_ssl.c:1131)

During handling of the above exception, another exception occurred:

requests.exceptions.SSLError: HTTPSConnectionPool(host=‘localhost’, port=7000): Max retries exceeded with url: /startup-events (Caused by SSLError(SSLCertVerificationError(1, ‘[SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: self signed certificate (_ssl.c:1131)’)))

Can you please let me know if there is any version specific installation that I need to do for it to work. My gradio version ==3.39.0 python == 3.8.10

My gradio==3.35.2, you can also try using tools such as mkcert to generate security certificates.

Nancis1130 on Jul 31, 2023