django webRTC音频-关闭/停止后不知道如何恢复流媒体

66bbxpm5  于 2023-11-20  发布在  Go
关注(0)|答案(1)|浏览(214)

我正在尝试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();
    }
  });

字符串
我知道有些条件是多余的,我正在调试。谢谢。

txu3uszq

txu3uszq1#

不要尝试重复使用MediaRecorder -只需创建一个新的MediaRecorder,这是最简单的解决方案。在mediaRecorder.stop();之后设置mediaRecorder = null,它将解决问题。

相关问题