WebRTC 中的 audioGain 约束问题

Issue with audioGain Constraint in WebRTC

提问人:Manu Mohan 提问时间:11/13/2023 最后编辑:KaiidoManu Mohan 更新时间:11/13/2023 访问量:29

问:

我目前正在研究使用 WebRTC 实现音频录制功能,特别是利用 autoGainControl 约束来保持一致的音频电平。但是,我遇到了一个问题,即音频电平似乎没有保持不变,并且 autoGainControl 约束似乎没有按预期运行。

我通过阅读具有不同声音放大的文本来测试该功能,但不幸的是,我没有观察到音频电平有任何明显的差异。似乎 autoGainControl 约束没有按预期有效地调整增益。

我在下面提供了一段代码以供参考:

<h1>Audio Recording</h1>

<label for="audioDevice">Select Audio Device:</label>
<select id="audioDevice"></select>

<button id="startRecording">Start Recording</button>
<button id="stopRecording" disabled>Stop Recording</button>

<audio id="audioPlayer" controls></audio>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const startRecordingButton = document.getElementById('startRecording');
  const stopRecordingButton = document.getElementById('stopRecording');
  const audioPlayer = document.getElementById('audioPlayer');
  const audioDeviceDropdown = document.getElementById('audioDevice');

  let mediaRecorder;
  let chunks = [];

  const audioConstraints = {
    echoCancellation: true,
    noiseSuppression: true,
    autoGainControl: true
  };

  // Function to populate the audio device dropdown
  function populateAudioDevices() {
    navigator.mediaDevices.enumerateDevices()
      .then(devices => {
        devices.filter(device => device.kind === 'audioinput').forEach(device => {
          const option = document.createElement('option');
          option.value = device.deviceId;
          option.text = device.label || `Microphone ${audioDeviceDropdown.options.length + 1}`;
          audioDeviceDropdown.add(option);
        });
      })
      .catch(error => {
        console.error('Error enumerating audio devices:', error);
      });
  }

  // Event listener for when the selected audio device changes
  audioDeviceDropdown.addEventListener('change', () => {
    startRecordingButton.disabled = false;
  });

  // Function to start recording with the selected audio device
  function startRecording() {
    const selectedDeviceId = audioDeviceDropdown.value;

    navigator.mediaDevices.getUserMedia({ audio: { deviceId: selectedDeviceId, ...audioConstraints } })
      .then((stream) => {
        mediaRecorder = new MediaRecorder(stream);

        mediaRecorder.ondataavailable = (e) => {
          if (e.data.size > 0) {
            chunks.push(e.data);
          }
        };

        mediaRecorder.onstop = () => {
          const audioBlob = new Blob(chunks, { type: 'audio/wav' });
          const audioUrl = URL.createObjectURL(audioBlob);
          audioPlayer.src = audioUrl;
          chunks = [];
          startRecordingButton.disabled = false;
          stopRecordingButton.disabled = true;
        };

        mediaRecorder.onstart = () => {
          startRecordingButton.disabled = true;
          stopRecordingButton.disabled = false;
        };

        mediaRecorder.start();
      })
      .catch((error) => {
        console.error('Error accessing microphone:', error);
      });
  }

  // Event listener for starting recording
  startRecordingButton.addEventListener('click', () => {
    startRecording();
  });

  // Event listener for stopping recording
  stopRecordingButton.addEventListener('click', () => {
    mediaRecorder.stop();
  });

  // Populate the audio device dropdown on page load
  populateAudioDevices();
});
</script>

使用的浏览器是 Chrome。我知道 Safari 不支持此功能。

如果有人可以查看此代码并深入了解为什么 autoGainControl 约束可能无法按预期工作,我将不胜感激。

我在 chrome 上使用不同的音频输入设备尝试了这个。

音频 浏览器 WebRTC 录制 媒体流

评论


答: 暂无答案