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

[JinRSA]

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

[bofenghuang]

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

[darwinharianto]

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

gradio/gradio/blocks.py

Line 1324 in fd31726

requests.get(f"{self.local_url}startup-events")

to
requests.get(f"{self.local_url}startup-events", verify=ssl_certfile)

[abidlabs]

@darwinharianto is correct. You need to be either running with HTTPS or localhost (browsers make exceptions for localhost) in order to use mic/camera. We'll add a better error to clarify this

[janmaltel]

@darwinharianto's solution works fine for me, thanks! :)
Is there any reason why this change:

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

gradio/gradio/blocks.py

Line 1324 in fd31726
requests.get(f"{self.local_url}startup-events")

should not be merged into mainline?

[Nancis1130]

我找到了解决方案 浏览器可能不再接受来自http服务器的麦克风和摄像头输入

一种解决方案是自己创建ssl openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -sha256 -days 365 -nodes

并在启动方法和阻止方法中添加 certfile demo.launch(server_name="0.0.0.0", ssl_certfile="/path/to/cert.pem", ssl_keyfile="/path/to/key.pem")

最后，我不确定这是否会造成问题，但我必须将此证书文件传递给请求 更改行

gradio/gradio/blocks.py

Line 1324 in fd31726

requests.get(f"{self.local_url}startup-events")

到
requests.get(f"{self.local_url}startup-events", verify=ssl_certfile)

Using this method, an error was reported as certificate verify failed: self signed certificate (_ssl. c: 1131). Do you have any clue? Thank you

[shanky100]

I also get the same issue when I pass the cert and pem file created in demo .launch

certificate verify failed: self signed certificate (_ssl.c:1131)')))

[shanky100]

demo.launch(share=False, server_name="0.0.0.0",server_port=7000,ssl_verify=False, ssl_certfile="cert.pem", ssl_keyfile="key.pem")

I am using this command, and my version are
gradio 3.39.0
gradio_client 0.3.0

I have used openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -sha256 -days 365 -nodes
to generate the files.

But I get this error again and again
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)')))

Any help or solutions would be helpful.

[Kedreamix]

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:

1. 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
   

2. 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.

[Nancis1130]

demo.launch(share=False, server_name="0.0.0.0",server_port=7000,ssl_verify=False, ssl_certfile="cert.pem", ssl_keyfile="key.pem")

I am using this command, and my version are gradio 3.39.0 gradio_client 0.3.0

I have used openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -sha256 -days 365 -nodes to generate the files.

But I get this error again and again 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)')))

Any help or solutions would be helpful.

Try the method from @Kedreamix . I also solved the problem using this method last week, although it has security issues.
The ssl_verify=False parameter is the key to working.

[shanky100]

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:

1. 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
   

2. 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.

Can you please tell the python and gradio version that you used for your case. It would be helpful.

[shanky100]

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:

1. 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
   

2. 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.

HI @Kedreamix can you please let me know the gradio version and python version for this one.

[shanky100]

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

[Nancis1130]

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.

[nellorebhanuteja]

simple solution

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

restart browser
open url and mic permission

[Undefinedefity]

@nellorebhanuteja

simple solution

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

restart browser open url and mic permission

This doesn't work for my chrome (both windows11 and andorid) and edge browser, my brosower still says "Your connection to this site is not secure" for my http://IPV4:port

gradio=3.41.2
python=3.8.17
chrome=114.0.5735.110

[Undefinedefity]

@Kedreamix Thank you for your suggestion but it does not work with no reason

I created cert.pem and key.pem and set ssl_verify=False as your guide, but I cannot access to my http://IPV4:port, chrome reports HTTP ERROR 502.

Also the urllib3 reports below warning though it is just warning and won't have any influence for my connection

....../python3.8/site-packages/urllib3/connectionpool.py:1095: InsecureRequestWarning: Unverified HTTPS request is being made to host 'localhost'. Adding certificate verification is strongly advised. See: https://urllib3.readthedocs.io/en/latest/advanced-usage.html#tls-warnings
  warnings.warn(

environment:

• gradio=3.41.2
• python=3.8.17
• chrome=114.0.5735.110

[couldn]

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