20

ピア間の通信に 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 全体を再度提供することなく、以前に接続されていた他のピアに到達し始める方法はありますか?

ピア間で接続がすでに確立されている場合、スイッチ メディア デバイス、つまりマイクなどの場合に使用する最適な方法は何でしょうか?

4

1 に答える 1

15

更新: 下部近くの作業例。

これは、仕様が進化しているため、現在使用しているブラウザによって大きく異なります。

仕様と 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 フィドルを使用します)。

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、 を押して、オファーを切り取り、2 つのタブ間で手動で回答します (貼り付け後に ENTER キーを押します)。

完了したら、データチャネルを介してチャットし、ヒットaddTrackしてビデオを反対側に追加できます.

Remove + Add次に、またはを使用してリモートで表示されるビデオを切り替えることができますreplaceTrack (FF only)(使用するセカンダリ カメラがある場合は、Chrome のフィドルを変更します)。

現在、再ネゴシエーションはすべてデータ チャネル上で行われています (切り取りと貼り付けは不要です)。

于 2016-02-19T21:38:16.133 に答える