CODEWITHSUNDEEP
javascriptaudiocanvasaudio-streaming
Null Salad
Null Salad

Reputation: 1030

audio stream not being added to html canvas

I have an html canvas that was created in p5, and I would like to add an audio track to it so that I can stream it with a webrtc connection. I currently can stream the visuals but not the audio.

I am adding the audio stream to my canvas as follows:

let canvasSource = document.getElementById('canvas-viz');

navigator.mediaDevices.getUserMedia({
      audio: true
    }).then(audioStream => {
      audioStream.getAudioTracks().forEach(
        track => { 
          canvasSource.captureStream().addTrack(track) 
        })
      console.log("canv source: ",canvasSource.captureStream().getAudioTracks()); // prints  []
    })

So my main problem here is that when I call canvasSource.captureStream().getAudioTracks() I get []. So it seems that addTrack isn't properly working. I tried calling canvasSource.captureStream().getAudioTracks() in the dev tools in case there was some asynchronous tomfoolery happening and also go []. I also tried the following in the dev tools:

audioTracks = audioStream.getAudioTracks();
canvasSource.captureStream().addTrack(audioTracks[0]);

But this also didn't work, returning [] when looking at getAudioTracks(). When calling audioStream.getAudioTracks(), I get an array of size 1 with my microphone input stream.

I was following methods shown in: how to add a audio stream on canvas stream in webrtc

I am developing this in Chrome. For my purposes, at the time being, it doesn't need to be cross compatible in Firefox.

Upvotes: 1

Views: 1097

Answers (2)

Brad
Brad

Reputation: 163262

Kaiido's solution should work. As an alternative, what I do is simply create a new MediaStream with the tracks from the other two streams...

new MediaStream([
  canvasVideoTrack,
  audioTrack
]);

Upvotes: 3

Kaiido
Kaiido

Reputation: 136707

canvasSource.captureStream() returns a new MediaStream at each call. You have added your audiotrack to a MediaStream you can't access anymore.
Store the canvas MediaStream in a variable accessible there and add the track to that MediaStream.

Upvotes: 5

Related Questions