Question

我正在研究一个项目，该项目需要能够将音频从网页流传输到其他客户端。我已经在使用websocket了，想在那儿引导数据。

我当前的方法使用Media Recorder，但是采样会导致中断。它注册1s音频，然后将其发送到服务器，然后将其中继到其他客户端。是否可以捕获连续音频流并将其转换为base64？

也许有一种方法可以不延迟地从MediaStream创建base64音频，它将解决此问题。你觉得呢？

我想继续使用websockets，我知道这里有webrtc。您是否曾经做过这样的事，这可行吗？

谢谢

                                                                --> Device 1
 MediaStream -> MediaRecorder -> base64 -> WebSocket -> Server --> Device ..
                                                                --> Device 18

这里是当前方法的演示...您可以在这里尝试：https://jsfiddle.net/8qhvrcbz/

var sendAudio = function(b64) {
  var message = 'var audio = document.createElement(\'audio\');';
  message += 'audio.src = "' + b64 + '";';
  message += 'audio.play().catch(console.error);';
  eval(message);
  console.log(b64);
}

 navigator.mediaDevices.getUserMedia({
      audio: true
 }).then(function(stream) {
        setInterval(function() {
            var chunks = [];
            var recorder = new MediaRecorder(stream);
            recorder.ondataavailable = function(e) {
                chunks.push(e.data);
            };
            recorder.onstop = function(e) {
                var audioBlob = new Blob(chunks);
                var reader = new FileReader();
                reader.readAsDataURL(audioBlob);
                reader.onloadend = function() {
                    var b64 = reader.result
                    b64 = b64.replace('application/octet-stream', 'audio/mpeg');
                    sendAudio(b64);
                }
            }
            recorder.start();
            setTimeout(function() {
                recorder.stop();
            }, 1050);
        }, 1000);
    });

Answer 1

Websocket并不是最好的。我通过使用WebRTC而不是websocket解决了。使用websocket的解决方案是在记录1050ms而不是记录1000ms时获得的，它会产生一点重叠，但仍然比听到空白更好。

Answer 2

尽管您已经通过WebRTC解决了此问题，这是业界推荐的方法，但我想在此分享我的答案。

这里的问题通常不是 websockets ，而是MediaRecorder API。代替使用它，可以使用PCM音频捕获，然后将捕获的阵列缓冲区提交给Web Worker或WASM，以编码为MP3块或类似内容。

根据我的实验，这将为您提供“实时”音频。我对MediaRecorder API的理论是，在发出任何导致可观察到的延迟的内容之前，它会先进行一些缓冲。

通过网络套接字流传输音频，具有低延迟和无中断

2 个答案: