在reactJS中使用getusermedia媒体设备录制音频

嗨,我想实现的一切 getUserMedia 在我的应用程序中录制音频。

我很难将我的mediaRecorder与此链接。state对象,并使媒体设备API获得提供应用程序所需的函数。

当我点击视图上的“开始录制”时,我的控制台会返回我:

TypeError: this.state.mediaRecorder.start is not a function

  48 | startRecord() {   
  49 |    
  50 | 
  51 |    this.setState({mediaRecorder:this.state.mediaRecorder.start()});   
  52 |    alert("start record function started =, mediaRecorder state : " + this.state.mediaRecorder.state)   
  53 |    console.log(this.state.mediaRecorder.state); // > recording   
  54 |    console.log("recorder started"); View compiled

这是我的应用。js:

  import React from "react";
// import "./install.js" ;
import "./mediaDevices-getUserMedia-polyfill.js";
class RecorderAPI extends React.Component {
  constructor(props) {
    super(props);
    this.handleDelete = this.handleDelete.bind(this);
    this.startRecord = this.startRecord.bind(this);
    this.stopRecord = this.stopRecord.bind(this);
    this.recordOnStop = this.recordOnStop.bind(this);

      this.state = {
      mediaRecorder : [],
      audioURL : []
      }
  }

  componentDidMount() {
  if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    console.log('getUserMedia supported');
                                          // target
    navigator.mediaDevices.getUserMedia( {audio: true })

      /***** success callback ******/
      // create a media stream
      .then(function (stream) {
        //if callback succeed, the following code will run :

        // create a new Media Recorder instance
        // with MediaRecorder() constructor
        // this instance is the entry point
        // into using the MediaRecorder API
        stream = new MediaRecorder(stream);
        this.setState({ mediaRecorder: stream });
      })/***** error callback *****/
      .catch(function (err) {
        console.log("error : " + err)
      });
  }
  else {
    console.log("getUserMedia : missing")
  }
}


  // launch mediaRecorder.start methods the stream
  // when the record button is pressed:
  startRecord() {


          this.setState({mediaRecorder: this.state.mediaRecorder.start()});
          alert("start record function started =, mediaRecorder state : " + this.state.mediaRecorder.state)
          console.log( this.state.mediaRecorder.state); // > recording
          console.log("recorder started");

          // As recording progresses we
          // collect the audio data via an event handler
          var chunks = []; // we set a container
          this.setState({mediaRecorder: this.state.mediaRecorder.ondataavailable = function (e) {
            chunks.push(e.data);
          }
        });

  }

  // e MediaRecorder.stop() method
  // to stop the recording when the stop button is pressed
  stopRecord() {
    // callback for onStop function
    this.recordOnStop();
    console.log( this.state.mediaRecorder.state);
    console.log("recorder stopped");

  }

  /***** Grabbing and using the blob *****/

  // stop event finalize our blob there
  // from all the chunks we have received:
  recordOnStop() { //  event handler stop of recording
    console.log("recorder stopped");

    var blob = new Blob(this.chunks, { 'type': "audio/ogg ; codecs=opus" })
    this.chunks = [];
    // creates a DOMString containing a URL representing
    // the object given in the parameter
    this.setState({ audioURL: window.URL.createObjectURL(blob)})
  }

  handleDelete(e) {
    var evtTgt = e.target;
    evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
  }



  render() {
    return (

      <div>
        <button className="dashboard">
          Dashboard</button>

        <span className="controlsBar">

          <button onClick={this.startRecord} className="start">
            Start recording
      </button>
          <button onClick={this.stopRecord} className="stop">
            Stop recording</button>
          <button onClick={this.deleteRecord} className="delete">
            Delete recording
      </button>

        </span>
      </div>
    )
  }
}

export default RecorderAPI;