Mobile browser shows error when recording
vyashh opened this issue · 1 comments
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) {
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 })