how to add a audio stream on canvas stream in webrtc

Question

I want to add an audio stream obtained via getusermedia () to the canvas stream and send it to the remote peer... So I looked up, and there was addTrack (). But addTrack () does not seem to work properly. I am running on chrome.

var audioTracks;
navigator.getUserMedia({ "audio": true, "video": false }, function (stream) 
{
audioTracks = stream.getAudioTracks()[0];

}, function(error) { console.log(error);});

.
.
.

var sharestream = canvas2.captureStream(25); // 25 FPS
peerConn.addTrack(audioTracks,sharestream);
peerConn.addStream(sharestream);

It's part of my code. What's wrong? My webrtc full source code works fine, but it does not work with addTrack ().

See also http://stackoverflow.com/questions/39992048/how-can-we-mix-canvas-stream-with-audio-stream-using-mediarecorder — jib, Mar 21 '17 at 20:53
Does this answer your question? [MediaStream Capture Canvas and Audio Simultaneously](https://stackoverflow.com/questions/39302814/mediastream-capture-canvas-and-audio-simultaneously) — Kaiido, Jan 16 '21 at 00:15

Muaz Khan · Accepted Answer · 2018-10-29T08:26:39.503

Updated on 10-29-2018 to replace getAudioTracks with getTracks:

var canvasStream = canvas2d.captureStream(25); // parameter is optional

// get first audio track
// var audioTrack = audioStream.getAudioTracks()[0];
var audioTrack = audioStream.getTracks().filter(function(track) {
    return track.kind === 'audio'
})[0];

// append audio track into Canvas2D stream
canvasStream.addTrack( audioTrack );

// now canvas2D stream has both audio and video tracks
// peerConnection.addStream( canvasStream );
canvasStream.getTracks().forEach(function(track) {
   peerConnection.Track( track, canvasStream );
});

// create offer or answer descriptions
peerConnection.createOffer(hints).then(success).catch(failure);

how to add a audio stream on canvas stream in webrtc

1 Answers1

Linked