如何在 webrtc 的画布流上添加音频流

Posted 2023-03-24

【中文标题】如何在 webrtc 的画布流上添加音频流

【英文标题】：how to add a audio stream on canvas stream in webrtc

【发布时间】：2017-08-13 03:58:33

【问题描述】：

我想将通过getusermedia() 获得的音频流添加到画布流中，并将其发送到远程对等点... 于是我一抬头，果然出现了addTrack()。 但是 addTrack() 似乎不能正常工作。我在 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);

这是我的代码的一部分。怎么了？ 我的 webrtc 完整源代码可以正常工作，但它不适用于 addTrack()。

【问题讨论】：

另见***.com/questions/39992048/…

这能回答你的问题吗？ MediaStream Capture Canvas and Audio Simultaneously

【参考方案1】：

于 2018 年 10 月 29 日更新，将 getAudioTracks 替换为 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);