实战：构建 P2P 屏幕共享辅助通道

屏幕共享的元数据通道、控制信令分离。

说实话，屏幕共享这个功能，很多开发者一开始都觉得简单——不就是把视频流扔过去吗？但真正做过的人都知道，坑全在细节里。我记得第一次做屏幕共享时，用户那边画面是有了，但分辨率、帧率、光标位置全乱套。后来我才意识到，视频流和数据通道，必须分开走。

这一章，我们就来聊聊怎么用数据通道做屏幕共享的「辅助通道」。说白了，就是让视频流专心传画面，让数据通道负责传元数据和控制信令。

为什么需要辅助通道？

你想想看，屏幕共享时，视频流里只包含像素信息。但用户可能还需要知道：

• 当前共享的是哪个窗口？
• 分辨率是多少？
• 鼠标位置在哪里？
• 用户是否暂停了共享？

这些信息如果硬塞进视频流，要么编码复杂，要么延迟高。我个人的习惯是：视频流只负责画面，数据通道负责一切「元信息」。这样两者互不干扰，调试起来也清爽。

架构设计：双通道分离

我们来看一下整体架构。这里我画了一张图，帮你理清思路：

从图上你能看到，发送端同时建立两条「管道」：一条是视频流（走 SRTP），另一条是数据通道（走 SCTP）。接收端则分别处理这两条流。这样做的好处很明显——控制信令不会因为视频卡顿而延迟。

实战：建立数据通道

好，我们直接上代码。假设你已经有了一个 RTCPeerConnection 实例，接下来就是创建数据通道：

// 创建数据通道，用于传输元数据和控制信令
const dataChannel = peerConnection.createDataChannel('screen-share-aux', {
  ordered: false,        // 不要求顺序，减少延迟
  maxRetransmits: 0      // 不重传，丢了就丢了
});

// 监听通道打开
dataChannel.onopen = () => {
  console.log('辅助通道已建立');
  // 发送初始元数据
  sendMetadata({
    type: 'metadata',
    resolution: `${screen.width}x${screen.height}`,
    fps: 30,
    source: 'entire_screen'
  });
};

// 监听消息
dataChannel.onmessage = (event) => {
  const msg = JSON.parse(event.data);
  handleControlMessage(msg);
};

// 发送元数据的辅助函数
function sendMetadata(data) {
  if (dataChannel.readyState === 'open') {
    dataChannel.send(JSON.stringify(data));
  }
}

控制信令的分离设计

你可能要问：控制信令和元数据都走同一个数据通道，会不会乱？

嗯，这里要注意。我的做法是：用 type 字段区分消息类型。就像上面代码里那样，type 可以是 metadata、control、cursor、error 等。接收端根据 type 分发到不同的处理函数。

举个例子，当用户暂停共享时：

// 发送端：暂停共享
function pauseScreenShare() {
  sendMetadata({
    type: 'control',
    action: 'pause',
    reason: 'user_clicked_pause'
  });
  // 同时暂停视频流（比如替换为黑帧）
  videoTrack.enabled = false;
}

// 接收端：处理暂停
function handleControlMessage(msg) {
  if (msg.type === 'control' && msg.action === 'pause') {
    // 显示「共享已暂停」提示
    showPauseOverlay(msg.reason);
    // 可以保留最后一帧画面
  }
}

元数据通道的典型场景

除了控制信令，元数据通道还能做很多事。我整理了几个常用场景：

我个人建议，把 ping/pong 机制也加进去。数据通道虽然稳定，但偶尔也会断开。我曾经遇到过用户长时间共享后，通道静默断开，但视频流还在跑，接收端完全不知道。加个心跳检测，5 秒一次，丢了就重建通道。

接收端的完整处理逻辑

最后，我们看看接收端怎么处理这些消息。这里是一个完整的监听器：

// 接收端：数据通道消息处理器
peerConnection.ondatachannel = (event) => {
  const auxChannel = event.channel;
  
  auxChannel.onmessage = (event) => {
    const msg = JSON.parse(event.data);
    
    switch (msg.type) {
      case 'metadata':
        // 更新显示信息
        updateDisplayInfo(msg.resolution, msg.fps);
        break;
      case 'cursor':
        // 绘制自定义光标
        drawCursor(msg.x, msg.y, msg.visible);
        break;
      case 'control':
        // 处理控制指令
        if (msg.action === 'pause') {
          showPauseOverlay();
        } else if (msg.action === 'resume') {
          hidePauseOverlay();
        }
        break;
      case 'error':
        // 显示错误提示
        showError(msg.message);
        break;
      default:
        console.warn('未知消息类型:', msg.type);
    }
  };
};

你看，整个逻辑其实不复杂。关键是把「视频流」和「数据通道」的职责分清楚。视频流负责「好看」，数据通道负责「好控」。两者配合，才能做出流畅的屏幕共享体验。

好了，这一章的内容就到这里。下一章我们会深入数据通道的「消息分片与重组」，到时候再聊更底层的细节。