通过WebSocket流式音频-网络音频

tct7dpnv  于 2023-06-29  发布在  其他
关注(0)|答案(2)|浏览(312)

我是如此接近获得音频聊天工作通过Websockets。这个应用程序的想法,我的建设是有一个小组语音聊天工作在浏览器。
我正在使用socket.io服务器来转发此信息。
音频传输正常。使用此代码:

let hasHeader = false 
export function emitAudioStream(mic, sock, room) {
    console.log('beginning record')
    const recorder = new MediaRecorder(mic)
    recorder.ondataavailable = (evt) => {
        // fetch the header
        if (!hasHeader) {
            console.log('header:', evt.data)
            sock.emit('header:audio', evt.data)
            hasHeader = true
        }
        // console.log(evt.data.size)
        sock.emit('stream:audio', ({room, streamData: evt.data}))
    }
    recorder.start()
    console.log(`Recording begin. (State: "${recorder.state}")`)

    setInterval(() => {
        recorder.requestData()
    }, 1e3/60)
}

有“参与者”的房间-连接的个人。服务器处理请求的方式如下:

sock.on('header:audio', (packet) => {
        console.log(`setting audio header for ${sock.id}`)
        sock.__audioHeader = packet
    })

    sock.on('stream:audio', ({room, streamData}) => {
        const participants = rooms[room]
        if (!participants) {
            console.log(`not found ${room} room`)
            return
        } 
        // create a getParticipants to handle not found
        // add flag to include current socket
        participants.forEach(participant => {
            // if (participant.id === sock.id) return 
            participant.emit('stream:audio:packet', {header: sock.__audioHeader, streamData})
        })
    })

回到客户端,我正在尝试播放(这一切都失败了),它看起来像这样。我可能误解了Web音频文档。谁能给我指出正确的方向/解释为什么这不是正确的方法?

sck.on('stream:audio:packet', ({header, streamData}) => {
  playSound(streamData)
})

function playSound(buffer) {
  const context = new AudioContext()
  var source = context.createBufferSource()
  source.buffer = buffer
  source.connect(context.destination)
  source.start(0)
}

我使用的另一个解码尝试:

sck.on('stream:audio:packet',async  ({header, streamData}) => {
            if (streamData === 'data:') return
            const b64ToBuffer = (data) => fetch(data).then(r => r.blob())
            const buff = await b64ToBuffer(streamData)

            playSound(await buff.arrayBuffer())
        })

        let context = new AudioContext()

        
        async function playSound(buffer) {
            try {
                const buff = await context.decodeAudioData(buffer)
                let source = context.createBufferSource()
                source.connect(context.destination)
                console.log(buff)
                source.buffer = buff
                source.start(0)
            } catch (err) {
                console.warn('error decoding data:', err)
            }
        }
jvlzgdj9

jvlzgdj91#

您当前的解决方案不起作用的原因是MediaRecorder不需要发出可以自己编码的块。在停止MediaRecorder之后,需要将所有块拼接在一起,以获得有效的文件。此外,Web Audio API只能使用其decodeAudioData()方法解码完整文件。
正如上面的评论所述,WebRTC是专门为此用例制作的API。如果你想有单独的房间,你可以确保你的信令过程只连接属于同一个房间的客户端。
如果你想避免WebRTC,你可以尝试我写的一个库,它增加了对MediaRecorder的WAVE支持。该库名为extendable-media-recorder。当被要求发出块时,这些块本身也不是有效的WAVE文件,但是手工解码部分WAVE文件比解码压缩文件容易得多。尽管头44个字节组成了标题,但它只是原始的PCM数据。
您也可以做相反的事情,保留原生的MediaRecorder,并在接收端将其与自定义解码器结合使用。如果您配置MediaRecorder来编码Opus文件,opus-stream-decoder应该能够解码块。

f5emj3cl

f5emj3cl2#

使用流,您可以使用navigator.mediaDevices.getUserMedia(constraints)MDN Reference获取流,并将socket.io-streams添加到socket.io,然后使用音频元素或视频元素播放它们

相关问题