CODEWITHSUNDEEP
javascripthtmlwebrtcaudio-streamingmediarecorder
Jackson Zamorano
Jackson Zamorano

Reputation: 403

How do I stream audio from the browser to a server?

I'm trying to make a simple lowish latency recorder. I currently use the below code to capture and transmit audio using Socket.IO. However, only the first packet is playable because it is the only packet that contains header information.

I have also tried creating new streams every second. It did not work because the audio would break up between recording sessions.

My question is how can I create a stream that takes input from a browser, transmits it to a server (it cannot be peer-to-peer), and can be played in another browser in near real-time. I know this is possible because apps like Discord use it.

This is the code I'm currently using. After the first packet, Chrome returns this error: Uncaught (in promise) DOMExecption: play() failed to load because no supported source was found.

I've been working on this for days, please help!

    function schedulePacketSend() {
        if (recording) {
            navigator.mediaDevices.getUserMedia({audio:true}).then(function(mediaStream) {
                const rec = RecordRTC(mediaStream, {
                    type:'audio',
                    mimeType:'audio/webm; codecs=opus',
                    recorderType:StereoAudioRecorder,
                    ondataavailable:function(e){
                        console.log('sending packet')
                        console.log(e)
                        socket.emit('audio-up', {audio:e.data, client:id})
                    },
                    timeSlice:1000
                })
                rec.startRecording()
            });
        }
    }

Thanks so much,

Jackson

Upvotes: 2

Views: 1467

Answers (1)

Sean DuBois
Sean DuBois

Reputation: 4252

I am not familiar with RecordRTC, but this is trivial with Pion WebRTC!

save-to-disk shows how you can capture the H264/Opus and save it to disk. From that point you can do w/e you want!

If you want realtime you probably want something more like broadcast it takes the incoming media and then does a fan out to many connected peers. You can combine these two examples so you can do recording and fan out combined.

Upvotes: 1

Related Questions