webrtc - 在 WebRTC 中,如何标记本地 MediaStream 以便远程对等方可以识别它?
问题描述
我正在构建一个 WebRTC 应用程序,用户可以在其中共享他们的相机和屏幕。当客户端接收到一个流/轨道时,它需要知道它是一个摄像头流还是一个屏幕录制流。这种区别在发送端很明显,但是当轨道到达接收端时,这种区别就消失了。
这是我的应用程序中的一些示例代码:
// 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 将允许将 a 添加.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 并不真正存在。有一个MediaStreamTrack.label
属性,但它是只读的,在传输中不保留。通过实验,发送端的 .label 属性可以提供信息(例如label: "FaceTime HD Camera (Built-in) (05ac:8514)"
)。但在接收端,.label
不保留相同轨道的。(它似乎被替换.id
为轨道的 - 至少在 Chrome 中。)
Kevin Moreland 的这篇文章 描述了同样的问题,并推荐了一个稍微可怕的解决方案:在发送端 munge SDP,然后在接收端 grep SDP。但是这个解决方案感觉非常脆弱和低级。
我知道MediaStreamTrack.id
有财产。还有一处MediaStream.id
房产。这两者似乎都保留在传输中。这意味着我可以在边信道中发送元数据,例如信令信道或DataChannel
. 从发送端,我会发送{ "myStreams": { "screen": "<some stream id>", "camera": "<another stream id>" } }
. 接收端将等到它同时拥有元数据和流,然后再显示任何内容。然而,这种方法引入了一个侧通道(以及与之相关的不可避免的并发挑战),其中一个侧通道感觉没有必要。
我正在寻找一个惯用的、强大的解决方案。如何在发送端标记/识别 MediaStreams,以便接收端知道哪个流是哪个?
解决方案
我最终在信令通道中发送了这个元数据。每个包含SessionDescription
(SDP) 的信令消息现在还包含旁边的元数据对象,它注释MediaStream
SDP 中描述的 s。这没有并发问题,因为客户端总是会在触发事件MediaStream
之前收到 SDP+元数据 a 。track
MediaStream
所以以前我有这样的信令消息:
{
"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" }
}
}