现场音频通过socket.io1.0

Question

从插座上看。io网站

从1.0开始，可以来回发送任何Blob：图像、音频、视频。

我现在想知道，这是否能解决我最近想要实现的目标。

我其实是在寻找一种方法，如何直播音频流从（A-即，麦克风输入...）到所有客户连接到我的网站。像这样的事情可能吗？我一直在摆弄WebRTC（https://www.webrtc-experiment.com/）示例，但我无法为几个连接的客户端管理目标。

我的想法是关于像getUserMedia或任何其他音频源（PCM，无论什么...）在A侧被切成块并提供给客户端，例如通过html5音频元素或任何东西播放...我需要使流尽可能实时，没有喊/冰铸服务不够快（事实上，他们不是我的问题的解决方案，他们应该这样使用），我真的不关心音频质量。跨平台兼容性会很棒。

这样可能吗？通过使用套接字。io作为向客户提供这些数据的方式？

我将非常感激任何可以帮助我实现这一目标的参考、提示或来源。多谢了。

Answer 1

在客户端代码中，您可以编写setInterval（）而不是setTimeout（），然后递归调用mediaecorder.start（），以便每隔5秒连续发出Blob。

setInterval(function() {
        mediaRecorder.stop()
        mediaRecorder.start()
    }, 5000);

客户端代码

var constraints = { audio: true };
navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) {
var mediaRecorder = new MediaRecorder(mediaStream);
mediaRecorder.onstart = function(e) {
    this.chunks = [];
};
mediaRecorder.ondataavailable = function(e) {
    this.chunks.push(e.data);
};
mediaRecorder.onstop = function(e) {
    var blob = new Blob(this.chunks, { 'type' : 'audio/ogg; codecs=opus' });
    socket.emit('radio', blob);
};

// Start recording
mediaRecorder.start();

// Stop recording after 5 seconds and broadcast it to server
setInterval(function() {
    mediaRecorder.stop()
    mediaRecorder.start()
  }, 5000);
});

// When the client receives a voice message it will play the sound
socket.on('voice', function(arrayBuffer) {
  var blob = new Blob([arrayBuffer], { 'type' : 'audio/ogg; codecs=opus' });
  var audio = document.createElement('audio');
  audio.src = window.URL.createObjectURL(blob);
  audio.play();
});

服务器代码

socket.on('voice', function(blob) {
    // can choose to broadcast it to whoever you want
    socket.broadcast.emit('voice', blob);
});

Answer 2

本示例向您展示了如何使用MediaRecorder上传音频，然后使用socket.io转发音频。此代码只会在调用mediaecorder.stop（）后广播。您可以选择在ondata内部广播。如果您这样做，您可能希望将一个timeslice传递给mediaecorder.start（），这样它就不会经常触发ondata可用性。

这个解决方案并不是真正的生活，但我认为它会帮助那些回来发现这个问题的人。

客户端代码

var constraints = { audio: true };
navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) {
    var mediaRecorder = new MediaRecorder(mediaStream);
    mediaRecorder.onstart = function(e) {
        this.chunks = [];
    };
    mediaRecorder.ondataavailable = function(e) {
        this.chunks.push(e.data);
    };
    mediaRecorder.onstop = function(e) {
        var blob = new Blob(this.chunks, { 'type' : 'audio/ogg; codecs=opus' });
        socket.emit('radio', blob);
    };

    // Start recording
    mediaRecorder.start();

    // Stop recording after 5 seconds and broadcast it to server
    setTimeout(function() {
        mediaRecorder.stop()
    }, 5000);
});

// When the client receives a voice message it will play the sound
socket.on('voice', function(arrayBuffer) {
    var blob = new Blob([arrayBuffer], { 'type' : 'audio/ogg; codecs=opus' });
    var audio = document.createElement('audio');
    audio.src = window.URL.createObjectURL(blob);
    audio.play();
});

服务器代码

socket.on('radio', function(blob) {
    // can choose to broadcast it to whoever you want
    socket.broadcast.emit('voice', blob);
});