IFrame embed demo permission error with Microphone

[titu1994]

Describe the bug

With Gradio 3.7 (possibly even older gradio versions), an Iframe embedded gradio demo does not ask for microphone permission from the browser (chrome), and so it errors out. File upload still works for audio.

Site: https://docs.nvidia.com/deeplearning/nemo/user-guide/docs/en/main/asr/intro.html

Space: https://huggingface.co/spaces/smajumdar/nemo_multilingual_language_id

If the solution is to try gradio js library, I can try that.

Is there an existing issue for this?

• I have searched the existing issues

Reproduction

Site: https://docs.nvidia.com/deeplearning/nemo/user-guide/docs/en/main/asr/intro.html

Src for Site: (you'll need to view the rst file to see the .. raw: html section)

https://github.com/NVIDIA/NeMo/blob/main/docs/source/asr/intro.rst

Screenshot

Logs

No error in the actual HF Space, or local run. 

Only on the Iframe embedded demo in a site.

System Info

Gradio 3.7

Severity

annoying

[pngwn]

Hello. I'm afraid this is one of the issues with using the iframe, you need to grant the iframe explicit permissions when you create it. We generally recommend using the web component embed where possible.

In this case could you try changing your iFrame HTML to the following, this should fix it:

<iframe src="https://hf.space/embed/smajumdar/nemo_multilingual_language_id/+"
  allow="microphone;"
  width="100%" 
  class="gradio-asr"
></iframe>

Depending on the components used, different ones will require different permissions, which makes it challenging to create and general purpose embed snippet. I'll see if there is a way we could generate the correct iFrame snippet (with the correct permissions) dynamically, depending on the components used.

Let me know if this doesn't solve your problem and we can reopen this issue. I'll also discuss how we can improve the documentation with the team.

[pngwn]

#3070