我正在尝试从客户端web浏览器捕获麦克风音频,使用WebSocket将捕获的音频实时传输到Node.js服务器,然后再次将音频传输回不同的web浏览器客户端。
到目前为止,在客户端,我用JavaScript打开了一个WebSocket连接
const webSocket = new WebSocket('ws://127.0.0.1:8080'); webSocket.binaryType = 'blob';
在连接到服务器时,我从用户的麦克风捕获音频流,并在每隔1秒可用的数据块上,通过WebSocket将其发送到服务器
webSocket.onopen = event => { console.log('info: connected to server'); navigator.mediaDevices .getUserMedia({ audio: true, video: false }) .then(stream => { const mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm', mediaRecorder.addEventListener('dataavailable', event => { if (event.data.size > 0) { webSocket.send(event.data); mediaRecorder.start(1000); };
现在,在服务器端,使用 ws 模块,我接收每个blob并将其发送到另一个客户端
ws
wss.on('connection', ws => { console.log('info: client connected'); ws.on('message', message => { wss.clients.forEach(client => { if (client !== ws && client.readyState === webSocket.OPEN) { client.send(message); });
回到客户端,我尝试使用带有引用 audioEl 的 audio 标记来播放音频
audioEl
audio
webSocket.onmessage = event => { audioEl.src = window.URL.createObjectURL(event.data); audioEl.play(); };
现在,我知道这只适用于第一个数据块(它确实有效),因为 audioEl.play(); 是异步的。在本例中,我尝试更改 audio 元素的blob,每秒钟通过WebSocket接收一个新的blob。
audioEl.play();
经过一周的研究,我只找到了如何将服务器端的音频流式传输到客户端,开始录制音频,停止录制,然后将整个块作为blob发送的解决方案。
我也试着发送了一个 AudioBuffer ,但不知道如何处理它来播放音频。
AudioBuffer
const context = new AudioContext(); const source = context.createMediaStreamSource(stream); const processor = context.createScriptProcessor(1024, 1, 1);