Question

根据最新更新，什么是捕获麦克风和扬声器音频以在后台js中进行实时音频处理的正确方法。我被困在这里，我尝试了所有媒体记录器api，record js api和chrome桌面捕获，但是它们都返回了麦克风音频。他们都将无法捕获扬声器音频。请提出一种实现这种情况的方法

下面是捕获麦克风但不捕获扬声器的示例代码：

var audioChunks;
startRecord.onclick = e => {
  startRecord.disabled = true;
  stopRecord.disabled=false;
  // This will prompt for permission if not allowed earlier
  navigator.mediaDevices.getUserMedia({audio:true})
    .then(stream => {
      audioChunks = []; 
      rec = new MediaRecorder(stream);
      rec.ondataavailable = e => {
        audioChunks.push(e.data);
        if (rec.state == "inactive"){
          let blob = new Blob(audioChunks,{type:'audio/x-mpeg-3'});
          recordedAudio.src = URL.createObjectURL(blob);
          recordedAudio.controls=true;
          recordedAudio.autoplay=true;
          audioDownload.href = recordedAudio.src;
          audioDownload.download = 'mp3';
          audioDownload.innerHTML = 'download';
       }
      }
    rec.start();  
    })
    .catch(e=>console.log(e));
}
stopRecord.onclick = e => {
  startRecord.disabled = false;
  stopRecord.disabled=true;
  rec.stop();
}

Answer 1

当您首次拨打getUserMedia的电话时，您可用的设备将只有音频（意味着麦克风）和摄像头（默认网络摄像头）。但是，如果您致电enumerateDevices，则会返回所有可用音频设备的列表。然后，您可以指定音频卡的特定ID，如下所示：

navigator.mediaDevices.getUserMedia({audio:{deviceId:{exact: deviceId}}})

这需要两次调用getUserMedia并在其中等待才能正常工作。另外，我应注意，devicechange的事件不会在Chromium浏览器中触发。这将使检测配置更改更加困难。

对于背景扩展，我认为您必须花点时间才能使其正常工作。您可以向用户显示设备列表，然后让他们选择，但是这会将一些消息传递到您的前端脚本，然后再返回，使设置复杂化。

Answer 2

这是示例代码，列出了所有可用的设备。

navigator.mediaDevices.enumerateDevices()
.then((devicesInfo)) => {
// Expect devices of kind `audioinput`, `audiooutput`, `videoinput` and other media cards available.
// Internal default speakers would fall under `audiooutput` and internal default microphone would fall under `audioinput`.
const select = document.createElement('select');
devicesInfo.forEach((device, index) => {
    const option = document.createElement('option');
    option.value = deviceInfo.deviceId;

    if(deviceInfo.kind === 'audioinput')
      option.text = deviceInfo.label;

    select.appendChild(option);
})
document.body.appendChild(select);

...
// Let user make the selection of device. Once selected, start the recording.
...

// select.value has the selected deviceId. Use `onChange` event of select to capture the value.
const constraints = {
    audio: {deviceId: select.value ? {exact: select.value} : undefined}
  };
  
  var audioChunks = [];
  navigator.mediaDevices.getUserMedia(constraints)
  .then((stream) => {
      window.stream = stream; // make stream available to console
  
      var rec = new MediaRecorder(stream);
      rec.ondataavailable = (e) => {
          audioChunks.push(e.data);
          if (rec.state == "inactive"){
              let blob = new Blob(audioChunks,{type:'audio/x-mpeg-3'});
              const recording = document.createElement('audio');
              recording.id = "recording";
              recording.src = URL.createObjectURL(blob);
              recording.controls=true;
              recording.autoplay=true;
              document.body.removeChild(document.getElementById('recording'));
              document.body.appendChild(downloadLink);

              const downloadLink = document.createElement('a');
              downloadLink.id = "downloadLink";
              downloadLink.href = recordedAudio.src;
              downloadLink.download = 'mp3';
              downloadLink.innerHTML = 'download';
              document.body.removeChild(document.getElementById('downloadLink'));
              document.body.appendChild(downloadLink);
    };

    // Start recording whenever user prefers to start.
    rec.start();

    ...
    ...


    // Stop recording whenever user prefers to stop.
    rec.stop();
  }
  })

}

让我们知道这是否是您想要的。

Chrome扩展程序：在背景JS中录制麦克风和扬声器

2 个答案: