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...