6

I programmed a script that allows visitors of our website to record audio and then saves the file on our server.

Everything worked perfectly until I noticed, that if a user did not give his permission but presses the recording button anyway, the script crashed. Therefore I included this to make sure that permission was granted:

navigator.permissions.query({name:'microphone'}).then(function(result) {
 if (result.state == 'granted') {
 //GRANTED
 } else if (result.state == 'denied') {
  //DENIED
 }
});

Unfortunately, this does not work for iOS Safari and therefore leads to a crash again in this case. I found several threads about this topic but not a single solution for iOS. But there must be one, right? How should we record audio on an iPhone if we cant make sure that the permission was granted and if recording while under denial of microphone access also leads to a crash?

I hope anyone has an Idea. Thanks in advance. Daniel

HenryChinaski
  • 137
  • 1
  • 8

2 Answers2

1

MDN Navigator.permissions (last edit on 2021-09-14) mentions this is an "experimental technology" and the compatibility table shows there's no support for Safari on both MAC and mobile devices (IE and Android WebView as well).

However from an answer from kafinsalim tackling the same issue, the geolocation object is supported on all major browsers. Accessing navigator.geolocation directly without checking permissions raises a permission prompt without throwing errors.

Therefore if you still need to use navigator.permissions check userAgent:

if (!/(safari))/i.test(navigator.userAgent)) {
  navigator.permissions.query({ name: 'geolocation' }).then(({state}) => {
    switch(state) {
      case 'granted':
        showMap();
        break;
      case 'prompt':
        showButtonToEnableMap();
        break;
      default:
        console.log('Geo permitions denied');
  }});
// https://developer.mozilla.org/en-US/docs/Web/API/Navigator/permissions#examples
} else {
  // Safari bypassing permissions
  navigator.geolocation.getCurrentPosition(
   pos => console.log('success', pos.coords),
   e => console.log('failed', e)
  );
// https://w3c.github.io/geolocation-api/#handling-errors
}
CPHPython
  • 12,379
  • 5
  • 59
  • 71
  • How can be your answer relevant to the question, which initially asked for the microphone? – Jimmy Feb 18 '22 at 12:01
  • @Jimmy `navigator.permissions.query({name:'WHATEVER'})` isn't supported in Safari, so I was able to avoid the crash OP mentioned simply by testing the **userAgent** and using another object supported in that browser: in my case was `navigator.geolocation` for his case [`navigator.mediaDevices`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/mediaDevices) may help (notice that the question mentions an **alternative to `navigator.permissions.query`**). – CPHPython Feb 18 '22 at 20:28
  • here questioner asking to check permission for Audio and we are giving suggestions to check for geolocation. That sounds contradictory. Only thing can help here is the mediadevices – Jimmy Feb 20 '22 at 06:13
  • not really, it solves the app crash by preventing `.permissions` usage with a **userAgent** check. If Safari doesn't support other usage of microphone related objects, that's an issue with the browser, I'm just providing a solution to the "`permissions. query` alternative" question. Have you tried mediaDevices? – CPHPython Feb 21 '22 at 10:25
  • Yes, mediaDevices is only can help here to check for access to Audio for Apple devices. Geolocation check won't help to answer this question as questioner is looking for alternative to check microphone usage. – Jimmy Feb 22 '22 at 17:48
-2

Please try this one.

navigator.permissions.query({name:'microphone'}).then(function(result) {
 if (result.state === 'granted') {
    //GRANTED
 } else if (result.state === 'denied') {
  //DENIED
 }
});
Kevin Baldha
  • 89
  • 1
  • 10