Not Supported on iOS Safari

[harrymelka]

Hello,

I already put it in the #21 issues but nobody could give me an answer so I made a new issue.

I tried multiple things with mic-recorder lib in my React project but I have an issue with the safari browser on iOS (same on ios chrome). When I click on the record button with

startRecording = () => {
    // Start recording. Browser will request permission to use your microphone.
    window.AudioContext = window.AudioContext || window.webkitAudioContext;
  if (window.AudioContext) {
    window.audioContext = new window.AudioContext();
  }
    this.setState({
      isRecording: true,
    });
    recorder
      .start()
      .then(() => {
        // something else
      })
      .catch(e => {
        console.error(e);
      });
  };

When trying the example from https://jsfiddle.net/8u5fbpx6/1/ it works on ios.

Because I am not using it exactly like the example in my REACT code, it doesn't display the popup that should ask me if I want to accept that safari is going to use the microphone.

If someone have any idea with that

Thank you

[buzinas]

Please share your code in a Github repo or use Code Sandbox for showing an example. I can't reproduce your issue.

[harrymelka]

Hey,

So I made a code sandbox with it, a bit different from what I have in my code with all the reducers, actions and everything.

https://codesandbox.io/s/mistermlk-54guf?file=/src/App.js

Weird stuff happen... it's working on codesanbox but still not on mine 😭

You can find the real file on OriginalPostButton.js

It's really weird.

Thank you.

[harrymelka]

Hey again,

I recreated another project, with the issue. You will see that it's not working with ios safari but it works with mac safari.
test-voice.zip

Thank you again

[tyherox]

Can confirm this problem

It's strange because the js-fiddle demo above works on my iPhone as well but does not work on my project. Will investigate and come back if I find anything :)

[tyherox]

Hey guys, it's a pretty quick fix and it's not the libraries fault.

Basically, Safari requires your url to be https to use the microphone. I fixed the problem by using ngrok to tunnel and used the given https url to test the functionality.

Hope this helps!

[harrymelka]

Thank you @tyherox. I will try this with my AWS config

[guptamanish07]

Hey guys, it's a pretty quick fix and it's not the libraries fault.

Basically, Safari requires your url to be https to use the microphone. I fixed the problem by using ngrok to tunnel and used the given https url to test the functionality.

Hope this helps!

Hi @therox the link mention is not working can you please share again. Thank you

[guptamanish07]

This issue is still exit for ios device , please can someone share the what configuration is required

[tyherox]

Use this to use your localhost through a tunnel.

Should be pretty simple and straightforward but let me know if you need help!

[guptamanish07]

Use this to use your localhost through a tunnel.

Should be pretty simple and straightforward but let me know if you need help!

Do you have any sample project with ngrok , which solve ios ?

[vinikatyal]

Anyone has a sample example for ios safari?