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

在WebRTC中将客户端A的视频流传输到客户端B涉及多个步骤。以下是这个过程的概述和每个步骤的详细解释：

1. 获取媒体输入

首先，客户端A需要通过WebRTC的API getUserMedia 来获取本地视频和音频流。这个API会请求用户的许可，以访问计算机的摄像头和麦克风。

javascript
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(function(stream) {
    // 可以使用这个流进行预览或传输
    localVideo.srcObject = stream;
  })
  .catch(function(error) {
    console.error('获取媒体失败:', error);
  });

2. 创建RTCPeerConnection

接下来，客户端A和客户端B各自创建一个RTCPeerConnection对象。这个对象负责处理视频流的编码和网络传输。

javascript
const peerConnection = new RTCPeerConnection();

3. 添加本地流到连接

客户端A将获取的视频流添加到其RTCPeerConnection实例中。

javascript
peerConnection.addStream(stream);

4. 设置ICE处理

为了使两个客户端能够找到彼此并建立连接，它们需要收集并交换ICE候选者（网络信息）。WebRTC使用ICE框架来处理NAT和防火墙。

javascript
peerConnection.onicecandidate = function(event) {
  if (event.candidate) {
    // 在真实的场景中，这里会使用信令服务发送候选者到对方客户端
    sendToServer('new-ice-candidate', event.candidate);
  }
};

5. 创建并交换Offer和Answer

客户端A创建一个offer（提议），并通过服务器发送给客户端B。客户端B收到后会创建一个answer（应答），并返回给客户端A。

javascript
// 客户端A创建Offer
peerConnection.createOffer()
  .then(offer => {
    return peerConnection.setLocalDescription(offer);
  })
  .then(() => {
    // 通过信令发送到客户端B
    sendToServer('offer', peerConnection.localDescription);
  });

// 客户端B设置Remote Description并创建Answer
peerConnection.setRemoteDescription(offer)
  .then(() => {
    return peerConnection.createAnswer();
  })
  .then(answer => {
    return peerConnection.setLocalDescription(answer);
  })
  .then(() => {
    // 通过信令发送回客户端A
    sendToServer('answer', peerConnection.localDescription);
  });

6. 建立连接并流传输

一旦客户端A和客户端B成功交换了所有必要的信息（offer, answer, ICE candidates），他们的RTCPeerConnection就会尝试建立连接。如果成功，视频流就会开始从客户端A传输到客户端B。

这个过程中，信令服务器扮演了通信的中间人角色，但不处理媒体流本身。这是一个典型的WebRTC使用场景，可以实现实时的视频和音频通信。