Mobile browser shows error when recording

[vyashh]

Hey,

I made an app that records audio. On desktop it works, but when I open the website on mobile. The whole thing crashes as soon as the recording is supposed to start. I don't know how to go any further. Does someone here have a solution for this?

The app is made in React 17.0.1.

Thanks in advance!

Unhandled Rejection (TypeError): AudioContext.createMediaStreamSource: Argument 1 is not an object.
AudioReactRecorder/_this.setUpRecording
src/index.js:125

  122 |    this.volume = this.context.createGain()
  123 | 
  124 |    // creates an audio node from teh microphone incoming stream
> 125 |    this.audioInput = this.context.createMediaStreamSource(this.stream)
      | ^  126 | 
  127 |    // Create analyser
  128 |    this.analyser = this.context.createAnalyser()

_temp3
src/index.js:272

  269 |      console.log('Error: Issue getting mic', err)
  270 |    }
  271 | 
> 272 |    this.setUpRecording()
      | ^  273 |  }
  274 | 
  275 |  start = async () => {

AudioReactRecorder/_this.setupMic
src/index.js:262

  259 |    draw()
  260 |  }
  261 | 
> 262 |  setupMic = async () => {
      | ^  263 |    //TODO: only get stream after clicking start
  264 |    try {
  265 |      window.stream = this.stream = await this.getStream()

AudioReactRecorder/_this.start
src/index.js:275

  272 |    this.setUpRecording()
  273 |  }
  274 | 
> 275 |  start = async () => {
      | ^  276 |    await this.setupMic()
  277 | 
  278 |    this.recording = true

doIfState
src/index.js:77

  74 | 
  75 |  doIfState(state, cb) {
  76 |    if (this.props.state == state) {
> 77 |      cb && cb()
     | ^  78 |    }
  79 |  }
  80 | 

checkState
src/index.js:70

  67 |       this.doIfState(RecordState.START, this.start)
  68 |       break
  69 |     default:
> 70 |       this.doIfState(RecordState.START, this.start)
     | ^  71 |       break
  72 |   }
  73 | }

componentDidUpdate
src/index.js:53

  50 |  componentDidUpdate(prevProps, prevState) {
  51 |    const { state } = this.props
  52 | 
> 53 |    this.checkState(prevProps.state, state)
     | ^  54 |  }
  55 | 
  56 |  checkState(previousState) {

[vyashh]

Solved!

Be sure to ask the user for permission on mobile devices. Also make sure that when using chrome https is enabled. Otherwise it won't ask for permission and just crash. I tried it on firefox and that worked because it doesn't require https.

Source: https://stackoverflow.com/questions/58716619/error-activating-microphone-in-google-chrome

const permissions = navigator.mediaDevices.getUserMedia({ audio: true, video: false })