MediaRecorder 未触发事件

Question

我一直在尝试在用户对着麦克风讲话时从麦克风的媒体流中获取数据。 我的目标是不断将该数据发送到网络服务器，直到用户通过按钮关闭麦克风为止。 我已经从 mdn 尝试了很多类似的方法，不幸的是它是用 javascript 编写的，我尝试用打字稿重写它，我认为这就是我的问题出现的地方。目前这就是我所拥有的

  mediaRecorder?: MediaRecorder
  chunks: any = []
  dest?: MediaStreamAudioDestinationNode
  constraints = { audio:true, video: false }

  async record_audio() {
    if (navigator.mediaDevices){
      var $this = this;
      navigator.mediaDevices.getUserMedia(this.constraints).then((stream)=>{
        this.mediaRecorder = new MediaRecorder(stream)
        this.mediaRecorder.start();
        //this.mediaRecorder.ondataavailable = this.pushChunks;

        this.mediaRecorder.ondataavailable = function (e) {
          console.log("pushing chunk")
          $this.chunks.push(e.data);
        };
        console.log('starting recorder...')
      })
     
    } else { alert('getUserMedia not supported.'); }
  }

该方法被调用，但

mediaRecorder.ondataavailable

从未被调用。我不知道该方法退出后是否会被销毁或其他什么。

如何不断获取此流中的数据，以便将其上传到网络服务器？

添加 我努力编写这个方法。

AudioWorkletNode

不断地触发它

process

方法，但不幸的是，工作集必须在不同的类和文件中实现，我无法利用当前类组件中的资源 我将注释的代码插入到块中，看看它是否会触发，但它没有

async record_audio() {
    console.log("audio is starting up ...");

    if (await navigator.mediaDevices.getUserMedia({audio:true, video: false})){
      this.start_microphone(await navigator.mediaDevices.getUserMedia({audio:true, video: false}))
    } else { alert('getUserMedia not supported in this browser.'); }
  };  
 
      

  async start_microphone(stream:MediaStream){

        // this.mediaRecorder = new MediaRecorder(stream)
        // console.log('starting recorder...')
        // this.mediaRecorder.start();
        // this.mediaRecorder.ondataavailable = this.pushChunks;

        // this.mediaRecorder.ondataavailable = function (e) {
        //   console.log("pushing chunk")
        //   this.chunks.push(e.data);
        // };

    this.gainNode = this.audioCtx!.createGain();
    //gain_node.connect( $this.audioCtx!.destination );

    this.microphone_stream = this.audioCtx!.createMediaStreamSource(stream);
    this.microphone_stream.connect(this.gainNode); 

    await this.audioCtx!.audioWorklet.addModule("/assets/audio-processor.js");
    this.processorNode = new AudioWorkletNode(this.audioCtx!, "audio-processor");
    this.microphone_stream.connect(this.processorNode);
  }

Answer 1

您可以尝试以下方法来解决问题：

启动功能

navigator.mediaDevices.getUserMedia({ audio: true, video: false })
  .then(stream => {
    if (!this.audioContext) {
      this.audioContext = new AudioContext();
    }
    const source = this.audioContext.createMediaStreamSource(stream);
    source.connect(this.gainNode); 
    this.mediaRecorder = new MediaRecorder(stream);
    this.mediaRecorder.start(1000);

    this.mediaRecorder.ondataavailable = (e: BlobEvent) => {
      this.chunks.push(e.data);
    };
  })
  .catch(error => {
    console.error('Error accessing microphone:', error);
  });

哪里

audioContext = new AudioContext();
gainNode = audioContext.createGain();