web-dev-qa-db-ja.com

WebRTCのMediaStreamにTrackを追加する方法

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

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

webrtcmicrophoneaudiotrackmediastream
13
Akshay Rathore

更新：下の方の作業例

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

仕様 および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を押してから、オファーを切り取って2つのタブ間で手動で回答します（貼り付けた後、Enterキーを押します）。

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

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

現在、再ネゴシエーションはすべてデータチャネル上で行われています（カットアンドペーストは不要です）。

7
jib