在 WebRTC 中，如何标记本地 MediaStream 以便远程端可以识别它？

Question

我正在构建一个 WebRTC 应用程序，用户可以在其中共享他们的相机和屏幕。当客户端收到一个stream/track，它需要知道它是摄像头流还是屏幕录像流。这种区别在发送端很明显，但当轨道到达接收方时，区别就消失了。

这是我的应用程序中的一些示例代码：

// Note the distinction between streams is obvious at the sending end.
const localWebcamStream = await navigator.mediaDevices.getUserMedia({ ... });
const screenCaptureStream = await navigator.mediaDevices.getDisplayMedia({ ... });

// This is called by signalling logic
function addLocalTracksToPeerConn(peerConn) {
  // Our approach here loses information because our two distinct streams 
  // are added to the PeerConnection's homogeneous bag of streams

  for (const track of screenCaptureStream.getTracks()) {
    peerConn.addTrack(track, screenCaptureStream);
  }

  for (const track of localWebcamStream.getTracks()) {
    peerConn.addTrack(track, localWebcamStream);
  }
}

// This is called by signalling logic
function handleRemoteTracksFromPeerConn(peerConn) {
    peerConn.ontrack = ev => {
      const stream = ev.streams[0];
      if (stream is a camera stream) {  // FIXME how to distinguish reliably?
        remoteWebcamVideoEl.srcObject = stream;
      }
      else if (stream is a screen capture) {  // FIXME how to distinguish reliably?
        remoteScreenCaptureVideoEl.srcObject = stream;
      }
  };
}

我理想中的 API 允许将 .label 添加到曲目或流中，如下所示：

// On sending end, add arbitrary metadata
track.label = "screenCapture";
peerConn.addTrack(track, screenCaptureStream);

// On receiving end, retrieve arbitrary metadata
peerConn.ontrack = ev => {
      const trackType = ev.track.label;  // get the label when receiving the track
}

但是这个API并不真的存在。有a MediaStreamTrack.label property, 但它是只读的，不会在传输中保留。通过实验，发送端的 .label 属性是信息性的（例如 label: "FaceTime HD Camera (Built-in) (05ac:8514)"）。但是在接收端，不会保留同一轨道的 .label。（它似乎被轨道的 .id 取代 - 至少在 Chrome 中。）

This article by Kevin Moreland 描述了同样的问题，并推荐了一个有点可怕的解决方案：在发送端修改 SDP，然后在接收端grep SDP。但是这个解决方案感觉非常脆弱和低级。

我知道有一个MediaStreamTrack.id属性。还有一个MediaStream.id属性。这两者似乎都在传播中得以保留。这意味着我可以在侧通道中发送元数据，例如信令通道或 DataChannel。从发送端，我会发送{ "myStreams": { "screen": "<some stream id>", "camera": "<another stream id>" } }。接收端会等到它同时拥有元数据和流后才会显示任何内容。然而，这种方法引入了一个侧通道（以及与之相关的不可避免的并发挑战），感觉不需要旁路的地方。

我正在寻找一种惯用的、可靠的解决方案。我如何label/identify发送端的MediaStreams，以便接收端知道哪个流是哪个？

Answer 1

我最终在信令通道中发送了这个元数据。每个包含 SessionDescription (SDP) 的信令消息现在还包含元数据对象，它注释了 SDP 中描述的 MediaStreams。这没有并发问题，因为在 MediaStream.

的 track 事件被触发之前，客户端总是会收到 MediaStream 的 SDP+ 元数据。

所以之前我有这样的信令消息：

{
  "kind": "sessionDescription",

  // An RTCSessionDescriptionInit
  "sessionDescription": { "type": "offer", "sdp": "..." }
}

现在我有这样的信令消息：

{
  "kind": "sessionDescription",

  // An RTCSessionDescriptionInit
  "sessionDescription": { "type": "offer", "sdp": "..." },

  // A map from MediaStream IDs to arbitrary domain-specific metadata
  "mediaStreamMetadata": {
    "y6w4u6e57654at3s5y43at4y5s46": { "type": "camera" },
    "ki8a3greu6e53a4s46uu7dtdjtyt": { "type": "screen" }
  }
}

Answer 2

用元数据发送自定义流标签的更规范的方法是在发送之前（但在 setLocalDescription 之后）修改 SDP 并修改 msid 属性（代表媒体流 ID，see the specification). 这里的优点是在远程端，媒体流 id 属性被解析并在 ontrack 事件的流中可见。参见 this fiddle

请注意，您不能对曲目 ID 做出任何假设。在 Firefox 中，SDP 中的曲目 ID 甚至与发送方的曲目 ID 不匹配。

Answer 3

第三种方式是依靠收发器的确定性顺序：

const pc1 = new RTCPeerConnection(), pc2 = new RTCPeerConnection();

go.onclick = () => ["Y","M","C","A"].forEach(l => pc1.addTrack(getTrack(l)));

pc2.ontrack = ({track, transceiver}) => {
  const video = [v1, v2, v3, v4][pc2.getTransceivers().indexOf(transceiver)];
  video.srcObject = new MediaStream([track]);
};

pc1.onicecandidate = e => e.candidate && pc2.addIceCandidate(e.candidate);
pc2.onicecandidate = e => e.candidate && pc1.addIceCandidate(e.candidate);
pc1.onnegotiationneeded = async () => {
  await pc1.setLocalDescription(await pc1.createOffer());
  await pc2.setRemoteDescription(pc1.localDescription);
  await pc2.setLocalDescription(await pc2.createAnswer());
  await pc1.setRemoteDescription(pc2.localDescription);
};

function getTrack(txt, width = 100, height = 100, font = "100px Arial") {
  const can = Object.assign(document.createElement("canvas"), {width,height});
  const ctx = Object.assign(can.getContext('2d'), {font});
  requestAnimationFrame(function draw() {
    ctx.fillStyle = '#eeeeee';
    ctx.fillRect(0, 0, width, width);
    ctx.fillStyle = "#000000";
    ctx.fillText(txt, width/2 - 14*width/32, width/2 + 10*width/32);
    requestAnimationFrame(draw);
  });
  return can.captureStream().getTracks()[0];
};

<button id="go">Go!</button><br>
<video id="v1" autoplay></video>
<video id="v2" autoplay></video>
<video id="v3" autoplay></video>
<video id="v4" autoplay></video>
<div id="div"></div>

当您控制谈判时，这很有效，例如当初始谈判仅从一方进行时。

当双方都可以发起协商时，它的效果就不太好，因为当双方都创建收发器时，它们的顺序就不再是确定性的了。

在这些情况下，您最好像其他答案所示那样在带外发送 transceiver.mid 或 stream.id 等 ID。我在 my blog.

中对此进行了详细介绍

在 WebRTC 中，如何标记本地 MediaStream 以便远程端可以识别它？

In WebRTC, how do I label a local MediaStream so that a remote peer can identify it?

webrtc

mediastream