Catch the permission exception on the audio component#2330
Conversation
|
Thanks @Ian-GL for the fix! This looks pretty good, but I wonder if it would be possible to use Gradio's Error instead of alert() for a better UI? cc @aliabid94 |
Hey @abidlabs , I wasn't aware of Gradio's Error. Yes, if you have an example of another component that uses it I could use that as a guide to add it here. |
| const stream = await navigator.mediaDevices | ||
| .getUserMedia({ audio: true }) | ||
| .then((stream) => { | ||
| return stream; | ||
| }) | ||
| .catch((err) => { | ||
| if (err instanceof DOMException && err.name == "NotAllowedError") { | ||
| alert( | ||
| "Please allow the use of microphone if you wish to record audio." | ||
| ); | ||
| return null; | ||
| } else { | ||
| throw err; | ||
| } | ||
| }); |
|
I'll make a PR against this fork to launch a gradio.Error from within a component - we don't have any examples of doing this before so I'll take care of that. |
|
Just made the changes to use gradio error messaging (and added errors to webcam as well), @pngwn please rereview |
|
Pushed a change to convert the chained promises to Looks good, thanks @Ian-GL and @aliabid94! |
|
Will merge when CI passes with everything merged in. |
|
Thanks for taking care of the changes, @pngwn and @aliabid94 ! |

Description
Currently the Audio component fails silently if the microphone permissions were not granted and the UI seems as if it was recording. This fix catches the permission exception and raises an alert that tells the user the permissions are needed. It also prevents the UI from showing the stop button as if it had started recording.
Closes: #2325
Checklist: