如何用React.js+Node.js直播Unity C# VR游戏？已试WebRTC却无头绪

一、Unity端：捕获VR画面并对接WebRTC #

• 捕获VR渲染画面：用RenderTexture或Camera.targetTexture捕获VR合成后的最终画面（优先选合成画面，避免处理双眼分离的额外逻辑），将帧数据存入纹理对象。
• 接入WebRTC：通过Unity Package Manager安装官方Unity WebRTC插件，用插件提供的VideoTrackSource将Unity纹理数据传入，生成符合WebRTC标准的视频轨道。
• 初始化PeerConnection：配置STUN服务器（如stun.l.google.com:19302），创建Offer并生成SDP，同时收集ICE候选，将这些数据通过WebSocket发送到Node.js信令服务器。

二、Node.js：搭建WebRTC信令转发服务 #

信令服务仅负责转发SDP和ICE候选，无需处理媒体数据，用WebSocket实现最轻量化：

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  ws.on('message', (data) => {
    // 转发信令消息给所有在线客户端（可扩展为定向转发）
    wss.clients.forEach((client) => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(data);
      }
    });
  });
});

• 信令流程：Unity发送方连接后，发送包含SDP的offer消息；服务端转发给React接收方；接收方生成answer消息回传；双方的ICE候选也通过相同路径互相转发。

三、React前端：接收流并播放 #

• 初始化PeerConnection：配置相同的STUN服务器，监听ICE候选并发送到信令服务。
• 处理信令交互：收到Unity的Offer后，设置远程描述、生成Answer并发送回服务端；收到ICE候选后添加到PeerConnection。
• 挂载播放流：当收到远程视频轨道时，将流绑定到<video>元素，开启自动播放：

import { useEffect, useRef } from 'react';

function VRStreamPlayer() {
  const videoRef = useRef(null);
  const pcRef = useRef(null);

  useEffect(() => {
    const ws = new WebSocket('ws://localhost:8080');
    const pc = new RTCPeerConnection({
      iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
    });

    // 接收远程视频流
    pc.ontrack = (event) => {
      videoRef.current.srcObject = event.streams[0];
    };

    // 发送本地ICE候选
    pc.onicecandidate = (event) => {
      if (event.candidate) {
        ws.send(JSON.stringify({ type: 'ice', candidate: event.candidate }));
      }
    };

    // 处理信令消息
    ws.onmessage = async (event) => {
      const data = JSON.parse(event.data);
      if (data.type === 'offer') {
        await pc.setRemoteDescription(new RTCSessionDescription(data));
        const answer = await pc.createAnswer();
        await pc.setLocalDescription(answer);
        ws.send(JSON.stringify(answer));
      } else if (data.type === 'ice') {
        await pc.addIceCandidate(new RTCIceCandidate(data.candidate));
      }
    };

    pcRef.current = pc;
    return () => {
      pc.close();
      ws.close();
    };
  }, []);

  return <video ref={videoRef} autoPlay playsInline style={{ width: '100%', height: 'auto' }} />;
}

export default VRStreamPlayer;

四、核心注意事项 #

• 跨网连接：如果Unity和React端不在同一局域网，必须搭建TURN服务器（如coturn），否则WebRTC无法建立P2P连接。
• 性能优化：VR画面分辨率高，建议降低捕获分辨率（如1080p），开启Unity WebRTC插件的硬件编码功能，避免占用过多游戏性能。
• VR画面适配：若Unity输出双眼分屏画面，React端可通过CSS或WebGL做畸变校正，让观众看到正常的VR视觉效果。

内容的提问来源于stack exchange，提问作者lamaro