Uncaught (in promise) TypeError: onStartCallback is not a function

[keyhole425]

Howdy,

I've just set everything up to use react-mic.. Using react (v15.6.x), react-router (v4.1.x) and the latest version of react-mic (v7.0.8) I get an error: "Uncaught (in promise) TypeError: onStartCallback is not a function". Everything works as expected, until I go to start the audio recorder (via a button click) which is when it errors out (after it recognises that getUserMedia is available). A little digging shows that the issue seems to point to the onStartCallback var in MicrophoneRecorder.js

Here is my first attempt at getting it going:

import React from 'react';
import { ReactMic } from 'react-mic';

export default class AudioRecorder extends React.Component {
	constructor(props) {
		super(props);
		this.state = { 
			'file': {},
			'record': false
		};
	}

	startRecording = () => {
		console.log('start recording');
		this.setState({
			record: true
		});
	}

	stopRecording = () => {
		this.setState({
			record: false
		});
	}

	onStop(recordedBlob) {
		console.log('recorded blob is: ' + recordedBlob);

		//TODO - Playback to user and send to server next
	}

	render() {
		return (
			<div>
				<ReactMic record={this.state.record} className="sound-wave" onStop={this.onStop} strokeColor="#000000" backgroundColor="#FF4081" />
				<button onClick={this.startRecording} type="button">Start</button>
				<button onClick={this.stopRecording} type="button">Stop</button>
			</div>
		);
	}
}

Is this something on my end (relatively new to React) that I'm missing? Thanks for an otherwise superb library.

Cheers Kyle

[minhnguyenwp]

I have same issue, could u provide it?

[minhnguyenwp]

Hi @keyhole425

I found the solution. Just add onStart prop for <ReactMic

like this https://github.com/hackingbeauty/react-mic/blob/master/demo/src/index.js

[keyhole425]

Hi @minhnguyenwp

Great spot, that fixed it for me too! Thanks.

[hackingbeauty]

Hi everyone. Mark here, author of this package. I started this package because I really wanted the functionality and the visualization; however, people are increasingly using it.

The code needs to be refactored and I need to add tests. I'm happy to work with someone else on refactoring the code and establishing the test suite. If you're interested, please ping me at mark.muskardin@gmail.com.

Until then, there may be bugs...