WebRTC：如何将客户端 A 的视频流式传输到客户端 B？答案

【问题标题】：WebRTC: How do I stream Client A's video to Client B?WebRTC：如何将客户端 A 的视频流式传输到客户端 B？
【发布时间】：2016-11-23 04:25:42
【问题描述】：

我正在研究 WebRTC，但我觉得我不了解全貌。我特别看这个演示项目：https://github.com/oney/RCTWebRTCDemo/blob/master/main.js

我无法理解如何匹配 2 个客户端，以便客户端 A 可以看到客户端 B 的视频流，反之亦然。

这是在演示中：

function getLocalStream(isFront, callback) {
  MediaStreamTrack.getSources(sourceInfos => {
    console.log(sourceInfos);
    let videoSourceId;
    for (const i = 0; i < sourceInfos.length; i++) {
      const sourceInfo = sourceInfos[i];
      if(sourceInfo.kind == "video" && sourceInfo.facing == (isFront ? "front" : "back")) {
        videoSourceId = sourceInfo.id;
      }
    }
    getUserMedia({
      audio: true,
      video: {
        mandatory: {
          minWidth: 500, // Provide your own width, height and frame rate here
          minHeight: 300,
          minFrameRate: 30
        },
        facingMode: (isFront ? "user" : "environment"),
        optional: [{ sourceId: sourceInfos.id }]
      }
    }, function (stream) {
      console.log('dddd', stream);
      callback(stream);
    }, logError);
  });
}

然后它是这样使用的：

socket.on('connect', function(data) {
  console.log('connect');
  getLocalStream(true, function(stream) {
    localStream = stream;
    container.setState({selfViewSrc: stream.toURL()});
    container.setState({status: 'ready', info: 'Please enter or create room ID'});
  });
});

问题：

MediaStreamTrack.getSources 到底在做什么？这是因为设备可以有多个视频源（例如 3 个网络摄像头）吗？
getUserMedia 不只是打开客户端的摄像头吗？在上面的代码中，客户不只是在观看自己的视频吗？

我想知道如何将客户端 A 的某种 URL 传递给客户端 B，以便客户端 B 流式传输来自客户端 A 的视频。我该怎么做？我在想象这样的事情：

客户端 A 进入，加入房间“abc123”。等待其他客户加入
客户端 B 进入，也加入房间“abc123”。
客户端 A 收到客户端 B 已进入房间的信号，因此他与客户端 B 建立连接
客户端 A 和客户端 B 开始从他们的网络摄像头进行流式传输。客户端 A 可以看到客户端 B，客户端 B 可以看到客户端 A。

我将如何使用 WebRTC 库（您可以假设已创建用于房间匹配的后端服务器）

【问题讨论】：

标签： webrtc

【解决方案1】：

您正在寻找的过程称为 JSEP（JavaScript 会话建立协议），它可以分为我在下面描述的 3 个步骤。一旦两个客户端都在房间里并且可以通过 WebSockets 进行通信，这些步骤就开始了，我将使用 ws 作为虚拟的 WebSocket API，用于客户端与服务器和其他客户端之间的通信：

1.邀请

在此步骤中，一个设计的调用者创建并提供并通过服务器将其发送给另一个客户端（被调用者）：

// This is only in Chrome
var pc = new webkitRTCPeerConnection({iceServers:[{url:"stun:stun.l.google.com:19302"}]}, {optional: [{RtpDataChannels: true}]});

// Someone must be chosen to be the caller
// (it can be either latest person who joins the room or the people in it)
ws.on('joined', function() {
  var offer = pc.createOffer(function (offer) {
    pc.setLocalDescription(offer);
    ws.send('offer', offer);
  });
});

// The callee receives offer and returns an answer
ws.on('offer', function (offer) {
  pc.setRemoteDescription(new RTCSessionDescription(offer));
  pc.createAnswer(function(answer) {
    pc.setLocalDescription(answer);
    ws.send('answer', answer);
  }, err => console.log('error'), {});
});

// The caller receives the answer
ws.on('answer', function (answer) {
  pc.setRemoteDescription(new RTCSessionDescription(answer));
});

现在双方已经交换了 SDP 数据包并准备相互连接。

2。谈判 (ICE)

ICE 候选者由每一方创建以找到一种相互连接的方式，它们几乎是可以找到它们的 IP 地址：本地主机、局域网地址 (192.168.x.x) 和外部公共 IP 地址 (ISP ）。它们由 PC 对象自动生成。

// Both processing them on each end:
ws.on('ICE', candidate => pc.addIceCandidate(new RTCIceCandidate(data)));
// Both sending them:
pc.onicecandidate = candidate => ws.send('ICE', candidate);

在 ICE 协商之后，除非您尝试通过连接两侧的防火墙连接客户端，否则连接会建立，p2p 通信是 NAT 穿越，但在某些情况下不起作用。

3.数据流

// Once the connection is established we can start to transfer video,
// audio or data

navigator.getUserMedia(function (stream) {
  pc.addStream(stream);
}, err => console.log('Error getting User Media'));

这是一个不错的选择，在拨打电话之前、在前面的步骤中、在为呼叫者创建报价之前以及在接到被呼叫者的呼叫之后立即添加它，这样您就不必处理重新谈判.几年前这很痛苦，但现在在 WebRTC 中可能会更好地实现。

请随意查看我在 GitHub 中的 WebRTC 项目，我在其中为许多参与者在房间中创建 p2p 连接，它位于 GitHub 并有一个 live demo。

【讨论】：

非常感谢您的详细解释！

【解决方案2】：

MediaStreamTrack.getSources 用于连接视频设备。它现在似乎已被弃用。请参阅此stack-overflow 问题和documentation。另请参阅MediaStreamTrack.getSourcesdemo and code。

是的。 getUserMedia 正在打开相机。可以看demo和代码here。

请参考此对等连接示例和代码here 在用户之间流式传输音频和视频。

另请参阅this 与 WebRTC 的实时通信。

【讨论】：