webRTC 音频 - 不知道如何在关闭/停止后恢复流式传输

Question

我正在尝试使用 webRTC 作为带有语音提示的聊天机器人。我成功地将语音提示合并到聊天中，但我遇到了问题。我注意到 mediaRecorder.stop 不会停止流媒体，因此窗口中的红色圆圈不会消失。我希望它仅在用户录制消息时进行流式传输。

我尝试过的： 我搜索了其他解决方案，发现这一行将成功结束流：

stream.getTracks().forEach( track => track.stop() );

问题是，之后我不知道如何恢复串流，录制按钮没有反应。

这是我的整个代码，很抱歉没有提供更紧凑的代码，我不太热衷于 javascript 留下一些东西：

  let mediaRecorder;
  let recordedChunks = [];
  let isRecording = false; // Track the recording state

  // Function to start recording
  function startRecording() {
    if (mediaRecorder && mediaRecorder.state === 'inactive') {
      mediaRecorder.start();
      isRecording = true;
    }
  }

  // Function to stop recording
  function stopRecording() {
    if (mediaRecorder && mediaRecorder.state === 'recording') {
      mediaRecorder.stop();
      isRecording = false;
    }
  }
  // Function to initialize the MediaRecorder
  function initializeMediaRecorder() {
    if (!mediaRecorder) {
      // Initialize the MediaRecorder with audio constraints
      navigator.mediaDevices
        .getUserMedia({ audio: true })
        .then((stream) => {
          mediaRecorder = new MediaRecorder(stream);

          // Add data to the recordedChunks array when data is available
          mediaRecorder.ondataavailable = (e) => {
            if (e.data.size > 0) {
              recordedChunks.push(e.data);
            }
          };

          // When the recording is stopped, you can process the recorded data
          mediaRecorder.onstop = () => {
            const audioBlob = new Blob(recordedChunks, { type: 'audio/wav' });
            const audioSize = audioBlob.size;
            recordedChunks = [];

            // Example: Send the audio data to the server or do something else with it
            const messageItem = document.createElement('li');
            messageItem.classList.add('message', 'sent');
            messageItem.innerHTML = `
                <div class="message-text">
                    <div class="message-sender">
                        <b>You</b>
                    </div>
                    <div class="message-content">
                        Audio size: ${audioSize}. Recording state: ${mediaRecorder.state}
                    </div>
                </div>`;
            messagesList.appendChild(messageItem);
            //stream.getTracks().forEach( track => track.stop() );
          };
        })
        .catch((error) => {
          console.error('Error accessing audio:', error);
        });
    }
  }

  // Attach click event handler to the "Record" button
  const recordButton = document.querySelector('.btn-record');
  recordButton.addEventListener('click', () => {
    if (!isRecording) {
      // Start recording
      startRecording();
      initializeMediaRecorder(); // Initialize the MediaRecorder 

    } else {
      // Stop recording
      stopRecording();
    }
  });

我知道有些条件是多余的，我正在调试。 谢谢。

Answer 1

不要尝试重用 MediaRecorder - 只需创建一个新的，这是最简单的解决方案。在

mediaRecorder = null

之后设置

mediaRecorder.stop();

即可解决问题。