如何在 WebRTC 的 MediaStream 中添加Track

Question

我正在使用 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？

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

Answer 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" width="120" height="90" autoplay muted></video>
<video id="v2" width="120" height="90" 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 中修改小提琴。）

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