如何在 WebRTC 的 MediaStream 中添加Track

Posted 2023-02-19

【中文标题】如何在 WebRTC 的 MediaStream 中添加Track

【英文标题】：How to addTrack in MediaStream in WebRTC

【发布时间】：2016-05-31 23:04:59

【问题描述】：

我正在使用 webrtc 在对等方之间进行通信。我不想向旧生成的流添加新曲目，因为我不想为用户提供在音频通信期间切换麦克风的功能。我使用的代码是，

让“pc”是发生音频通信的 peerConnection 对象，“newStream”是从 getUserMedia 函数中获得的新生成的 MediaStream，带有新选择的麦克风设备。

            var localStreams = pc.getLocalStreams()[0];
            localStreams.removeTrack(localStreams.getAudioTracks()[0]);


            var audioTrack = newStream.getAudioTracks()[0];
            localStreams.addTrack(audioTrack);

他们是否以任何方式让新添加的轨道开始到达另一个先前连接的对等点，而无需再次向他提供整个 SDP？

在这种切换媒体设备的情况下使用什么优化方法，即在对等点之间已经建立连接时使用麦克风？

【问题讨论】：

我相信，当您对媒体流进行任何更改时，总是需要重新协商。

除了重新谈判还有其他方法吗？如果不是，执行重新协商的正确流程是什么

我不能权威地说这仅适用于 tracks，但它肯定适用于任何 streams。要重新协商，您只需要创建另一个报价，发送它，setRemoteDescription 在接收器上，创建答案，将其发送回并将其设置为远程描述。差不多就是这样。无需断开连接或 ICE 协商，只需交换更新的 SDP。

【参考方案1】：

更新： 接近底部的工作示例。

由于规范不断发展，这很大程度上取决于您目前使用的浏览器。

在the specification 和 Firefox 中，对等连接现在基本上是基于轨道的，并且不依赖于本地流关联。你有var sender = pc.addTrack(track, stream)、pc.removeTrack(sender)，甚至sender.replaceTrack(track)，后者根本不需要重新谈判。

在 Chrome 中，您仍然只有 pc.addStream 和 pc.removeStream，并且从本地流中删除轨道会导致停止发送它，但将其添加回来不起作用。我很幸运地将整个流删除并重新添加到对等连接，然后重新协商。

不幸的是，在这里使用 adapter.js 没有帮助，因为 addTrack 很难填充。

重新协商

重新协商没有重新开始。您只需要：

pc.onnegotiationneeded = e => pc.createOffer()
  .then(offer => pc.setLocalDescription(offer))
  .then(() => signalingChannel.send(JSON.stringify(sdp: pc.localDescription)));
  .catch(failed);

添加后，对等连接会在需要时使用您的信令通道自动重新协商。这甚至取代了对createOffer 和您现在正在做的朋友的调用，这是一场净赢。

有了这个，您可以在实时连接期间添加/删除曲目，它应该“正常工作”。

如果不够流畅，你甚至可以pc.createDataChannel("yourOwnSignalingChannel")

示例

这是所有这些的示例（在 Chrome 中使用 https fiddle）：

var config =  iceServers: [ urls: "stun:stun.l.google.com:19302" ] ;
var signalingDelayMs = 0;

var dc, sc, pc = new RTCPeerConnection(config), live = false;
pc.onaddstream = e => v2.srcObject = e.stream;
pc.ondatachannel = e => dc? scInit(sc = e.channel) : dcInit(dc = e.channel);

var streams = [];
var haveGum = navigator.mediaDevices.getUserMedia(fake:true, video:true)
.then(stream => streams[1] = stream)
.then(() => navigator.mediaDevices.getUserMedia( video: true ))
.then(stream => v1.srcObject = streams[0] = stream);

pc.oniceconnectionstatechange = () => update(pc.iceConnectionState);

var negotiating; // Chrome workaround
pc.onnegotiationneeded = () => 
  if (negotiating) return;
  negotiating = true;
  pc.createOffer().then(d => pc.setLocalDescription(d))
  .then(() => live && sc.send(JSON.stringify( sdp: pc.localDescription )))
  .catch(log);
;
pc.onsignalingstatechange = () => negotiating = pc.signalingState != "stable";

function scInit() 
  sc.onmessage = e => wait(signalingDelayMs).then(() =>  
    var msg = JSON.parse(e.data);
    if (msg.sdp) 
      var desc = new RTCSessionDescription(JSON.parse(e.data).sdp);
      if (desc.type == "offer") 
        pc.setRemoteDescription(desc).then(() => pc.createAnswer())
        .then(answer => pc.setLocalDescription(answer)).then(() => 
          sc.send(JSON.stringify( sdp: pc.localDescription ));
        ).catch(log);
       else 
        pc.setRemoteDescription(desc).catch(log);
      
     else if (msg.candidate) 
      pc.addIceCandidate(new RTCIceCandidate(msg.candidate)).catch(log);
    
  ).catch(log);


function dcInit() 
  dc.onopen = () => 
    live = true; update("Chat:"); chat.disabled = false; chat.select();
  ;
  dc.onmessage = e => log(e.data);


function createOffer() 
  button.disabled = true;
  pc.onicecandidate = e => 
    if (live) 
      sc.send(JSON.stringify( "candidate": e.candidate ));
     else if (!e.candidate) 
      offer.value = pc.localDescription.sdp;
      offer.select();
      answer.placeholder = "Paste answer here";
    
  ;
  dcInit(dc = pc.createDataChannel("chat"));
  scInit(sc = pc.createDataChannel("signaling"));
;

offer.onkeypress = e => 
  if (e.keyCode != 13 || pc.signalingState != "stable") return;
  button.disabled = offer.disabled = true;
  var obj =  type:"offer", sdp:offer.value ;
  pc.setRemoteDescription(new RTCSessionDescription(obj))
  .then(() => pc.createAnswer()).then(d => pc.setLocalDescription(d))
  .catch(log);
  pc.onicecandidate = e => 
    if (e.candidate) return;
    if (!live) 
      answer.focus();
      answer.value = pc.localDescription.sdp;
      answer.select();
     else 
      sc.send(JSON.stringify( "candidate": e.candidate ));
    
  ;
;

answer.onkeypress = e => 
  if (e.keyCode != 13 || pc.signalingState != "have-local-offer") return;
  answer.disabled = true;
  var obj =  type:"answer", sdp:answer.value ;
  pc.setRemoteDescription(new RTCSessionDescription(obj)).catch(log);
;

chat.onkeypress = e => 
  if (e.keyCode != 13) return;
  dc.send(chat.value);
  log("> " + chat.value);
  chat.value = "";
;

function addTrack() 
  pc.addStream(streams[0]);
  flipButton.disabled = false;
  removeAddButton.disabled = false;


var flipped = 0;
function flip() 
  pc.getSenders()[0].replaceTrack(streams[flipped = 1 - flipped].getVideoTracks()[0])
  .catch(log);


function removeAdd() 
  if ("removeTrack" in pc) 
    pc.removeTrack(pc.getSenders()[0]);
    pc.addStream(streams[flipped = 1 - flipped]);
   else 
    pc.removeStream(streams[flipped]);
    pc.addStream(streams[flipped = 1 - flipped]);
  


var wait = ms => new Promise(resolve => setTimeout(resolve, ms));
var update = msg => div2.innerhtml = msg;
var log = msg => div.innerHTML += msg + "<br>";

<video id="v1"   autoplay muted></video>
<video id="v2"   autoplay></video><br>
<button id="button" onclick="createOffer()">Offer:</button>
<textarea id="offer" placeholder="Paste offer here"></textarea><br>
Answer: <textarea id="answer"></textarea><br>
<button id="button" onclick="addTrack()">AddTrack</button>
<button id="removeAddButton" onclick="removeAdd()" disabled>Remove+Add</button>
<button id="flipButton" onclick="flip()" disabled>ReplaceTrack (FF only)</button>
<div id="div"><p></div><br>
<table><tr><td><div id="div2">Not connected</div></td>
  <td><input id="chat" disabled></input></td></tr></table><br>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

说明：

不涉及服务器，所以点击Offer，然后剪切'n'paste offer 并在两个选项卡之间手动回答（粘贴后按ENTER键）。

完成后，您可以通过数据通道聊天，然后点击addTrack 将视频添加到另一端。

然后您可以使用Remove + Add 或replaceTrack (FF only) 切换远程显示的视频（如果您要使用辅助摄像头，请在 Chrome 中修改小提琴。）

重新协商现在都在数据通道上进行（不再是剪切粘贴）。

【讨论】：

这个 pc.onnegotiationneeded 是否适用于所有支持 webtrc 的浏览器？

是的，这是一个核心功能。

上述小提琴出现错误“TypeError：RTCPeerConnection.addStream 的参数 1 不是对象。”当onclick addTrack

@user969068 感谢您告诉我！您是否对 Firefox Beta 有任何更改？这是一个代码 sn-p 问题。我已经在上面提交了bug。请暂时使用https fiddle。

@robertfoenix 已修复，谢谢！至少我在工作示例中是正确的。 ;)