Unity中如何将WebRTC流视频从Canvas切换到VR球体渲染？

我正在开发一个Unity项目，基于修改版的WebApp（Bidirectional示例），通过WebRTC把本地360度视频文件流传输到Unity端。目前已经实现了Web到Unity的视频流传输，但现在需要把视频从Canvas的RawImage渲染改成球体渲染，用来搭建VR沉浸式观看环境。

Unity端接收脚本（ReceiverSample.cs） #

using UnityEngine;
using UnityEngine.UI;

namespace Unity.RenderStreaming
{
    public class ReceiverSample : MonoBehaviour
    {
#pragma warning disable 0649
        [SerializeField] private Button startButton;
        [SerializeField] private Button stopButton;
        [SerializeField] private InputField connectionIdInput;
        [SerializeField] private RawImage remoteVideoImage;
        [SerializeField] private ReceiveVideoViewer receiveVideoViewer;
        [SerializeField] private SingleConnection connection;
#pragma warning restore 0649

        private string connectionId;

        void Awake()
        {
            startButton.onClick.AddListener(OnStart);
            stopButton.onClick.AddListener(OnStop);
            if (connectionIdInput != null)
                connectionIdInput.onValueChanged.AddListener(input => connectionId = input);
            receiveVideoViewer.OnUpdateReceiveTexture += texture => remoteVideoImage.texture = texture;
        }

        private void OnStart()
        {
            if (string.IsNullOrEmpty(connectionId))
            {
                connectionId = System.Guid.NewGuid().ToString("N");
                connectionIdInput.text = connectionId;
            }
            connectionIdInput.interactable = false;

            connection.CreateConnection(connectionId, true);

            startButton.gameObject.SetActive(false);
            stopButton.gameObject.SetActive(true);
        }

        private void OnStop()
        {
            connection.DeleteConnection(connectionId);
            connectionId = string.Empty;
            connectionIdInput.text = string.Empty;
            connectionIdInput.interactable = true;
            startButton.gameObject.SetActive(true);
            stopButton.gameObject.SetActive(false);
        }
    }
}

Web端发送脚本（sendvideo.js） #

export class SendVideo {
  constructor(localVideoElement, remoteVideoElement) {
    this.localVideo = localVideoElement;
    this.remoteVideo = remoteVideoElement;
    this.peerConnection = null; // WebRTC PeerConnection
  }

  async startLocalVideo() {
    try {
      const videoElement = document.createElement('video');
      videoElement.src = '/videos/video.mp4'; // Path to your video file
      videoElement.muted = true;
      await videoElement.play();

      const stream = videoElement.captureStream();
      this.localVideo.srcObject = stream;
      await this.localVideo.play();

      // Initialize WebRTC connection for video streaming
      this.initializePeerConnection(stream);
    } catch (err) {
      console.error(`Error starting local video: ${err}`);
    }
  }

  // Set up WebRTC connection and send the video stream to Unity
  initializePeerConnection(stream) {
    this.peerConnection = new RTCPeerConnection();

    // Add video tracks to the connection
    stream.getTracks().forEach(track => {
      this.peerConnection.addTrack(track, stream);
    });

    // Event when connection is established
    this.peerConnection.onconnectionstatechange = () => {
      if (this.peerConnection.connectionState === 'connected') {
        console.log("WebRTC connection established with Unity");
      }
    };

    // Offer to connect to Unity
    this.peerConnection.createOffer().then(offer => {
      return this.peerConnection.setLocalDescription(offer);
    }).then(() => {
      // Send the offer to the Unity client via signaling server
      console.log("Offer created and sent to Unity client");
    }).catch(err => console.error(err));
  }

  addRemoteTrack(track) {
    if (this.remoteVideo.srcObject == null) {
      this.remoteVideo.srcObject = new MediaStream();
    }
    this.remoteVideo.srcObject.addTrack(track);
  }
}

我试过创建RenderTexture和Material，把RenderTexture赋值给Material再贴到球体上，但Canvas一直遮挡场景，而且球体显示黑色，视频无法正常渲染，问题没解决。

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