C#-Uniform Render Streaming з WebRTC для двонаправленого обміну текстовими повідомленнями від клієнта Unity до сервера JavaScript

Увімкнення зв’язку в реальному часі між Unity та JavaScript за допомогою WebRTC

Із зростаючим попитом на спілкування в реальному часі в додатках розробники використовують WebRTC для безпроблемної передачі відео, аудіо та даних. У цьому контексті Unity Render Streaming пропонує потужну структуру для потокової передачі відео з сервера JavaScript на клієнт Unity. Однак встановлення двостороннього зв’язку, наприклад надсилання текстових повідомлень із Unity на сервер JavaScript, може бути проблемою.

У цьому проекті ми прагнемо створити потокову програму за допомогою плагіна Unity Render Streaming разом із протоколом WebRTC. Хоча частину потокового відео налаштовано успішно, наступний крок передбачає ввімкнення обміну даними через RTCDataChannel. Це дозволить надсилати текстові повідомлення з клієнта Unity під час активних відеопотоків.

Ми розглянемо, як змінити існуючі зразки коду, щоб відповідати цим вимогам. Веб-додаток на основі JavaScript керуватиме потоковим відео, тоді як клієнт Unity спробує надіслати на сервер зразок повідомлення, наприклад «Hello World». Ми розглянемо труднощі конфігурації, які виникли, і їх потенційні рішення.

У цій статті також обговорюються такі проблеми, як відсутні простори імен і невирішені посилання в Unity. Ми оцінимо, чи поточний код на правильному шляху, і запропонуємо рішення для вирішення типових проблем, як-от помилка, пов’язана з «SingleConnection». Зрештою, ми прагнемо створити гладкий, двонаправлений конвеєр обміну текстовими повідомленнями між Unity та JavaScript за допомогою WebRTC.

Створення системи обміну повідомленнями Unity-to-JavaScript за допомогою WebRTC

Метою цього проекту є використання Потокове передавання Unity Render плагін із WebRTC для передачі відео із сервера JavaScript до клієнта Unity, а також надсилання повідомлень даних назад із Unity. Перший крок у сценарії JavaScript передбачає налаштування медіа-потоку. Ми використовуємо метод `captureStream()` для потокової передачі відеоконтенту з елемента HTML5 і RTCPeerConnection об'єкт керує з'єднанням між двома одноранговими вузлами. У цьому з’єднанні створюється DataChannel, який дає змогу передавати немедійні дані (наприклад, текст) разом з відеопотоком.

З боку Unity ми ініціалізуємо з’єднання WebRTC у сценарії `ReceiverSample.cs`, встановивши RTCDataChannel. Цей канал відповідає як за надсилання, так і за отримання текстових даних на сервер JavaScript. Функція співпрограми використовується для повторного надсилання повідомлення «Hello World» кожні дві секунди, лише якщо стан каналу «Відкритий». Коли DataChannel на сервері JavaScript отримує повідомлення, він записує вміст на консоль для підтвердження успішного підключення.

Критичною проблемою, виділеною під час цього процесу, є відсутність посилання на простір імен `SingleConnection` у коді Unity, що спричиняє помилки компіляції. Це означає, що або відсутній необхідний пакет, або існує неправильна залежність у конфігурації проекту. Щоб вирішити цю проблему, ми рекомендуємо переконатися, що всі необхідні залежності, такі як пакет Unity WebRTC, правильно встановлено та на них є посилання. Якщо пакет недоступний, можливо, клас потрібно замінити на стандартний RTCPeerConnection об'єкт.

Нарешті, механізм обробки помилок для обох сценаріїв гарантує, що невдалі з’єднання повідомляються на консолі, допомагаючи з налагодженням. Сценарій Unity містить функцію `StartCoroutine()` для керування асинхронним обміном повідомленнями, що корисно для підтримки обміну даними в реальному часі без блокування інших процесів. Ми також використовуємо події `OnOpen` і `OnClose` для моніторингу стану DataChannel, гарантуючи, що повідомлення надсилаються лише тоді, коли з’єднання стабільне. Ця модульна установка гарантує, що код можна легко розширювати або змінювати, і це забезпечує надійну відправну точку для створення більш просунутих потокових програм за допомогою Unity та WebRTC.

// sendvideo.js - JavaScript Server-Side Code
import * as Logger from "../../module/logger.js";
export class SendVideo {
  constructor(localVideoElement, remoteVideoElement) {
    this.localVideo = localVideoElement;
    this.remoteVideo = remoteVideoElement;
    this.peerConnection = new RTCPeerConnection();
    this.dataChannel = this.peerConnection.createDataChannel("myDataChannel");
  }
  async startLocalVideo() {
    const stream = document.createElement('video').captureStream();
    this.localVideo.srcObject = stream;
    await this.localVideo.play();
    this.peerConnection.createOffer().then(offer => {
      this.peerConnection.setLocalDescription(offer);
    });
  }
}

// ReceiverSample.cs - Unity Client Code
using System.Collections;
using UnityEngine;
using Unity.WebRTC;
public class ReceiverSample : MonoBehaviour {
  private RTCDataChannel dataChannel;
  void Start() { StartCoroutine(InitializeConnection()); }
  IEnumerator InitializeConnection() {
    var connection = new RTCPeerConnection();
    dataChannel = connection.CreateDataChannel("myDataChannel");
    dataChannel.OnOpen += OnChannelOpen;
    yield return null;
  }
  void OnChannelOpen() { StartCoroutine(SendMessageLoop()); }
  IEnumerator SendMessageLoop() {
    while (dataChannel.ReadyState == RTCDataChannelState.Open) {
      dataChannel.Send("Hello World");
      yield return new WaitForSeconds(2);
    }
  }
}

// Adjustments to avoid missing reference issues in ReceiverSample.cs
using Unity.WebRTC;
public class FixedReceiverSample : MonoBehaviour {
  private RTCPeerConnection peerConnection;
  private RTCDataChannel dataChannel;
  void Start() { InitializeWebRTC(); }
  void InitializeWebRTC() {
    peerConnection = new RTCPeerConnection();
    dataChannel = peerConnection.CreateDataChannel("myDataChannel");
    dataChannel.OnOpen += () => Debug.Log("DataChannel open!");
    peerConnection.CreateOffer().ContinueWith(offer => {
      peerConnection.SetLocalDescription(offer.Result);
    });
  }
}

// DataChannelTest.cs - Unity Unit Test
using NUnit.Framework;
using Unity.WebRTC;
public class DataChannelTest {
  [Test]
  public void TestDataChannelCommunication() {
    var connection = new RTCPeerConnection();
    var channel = connection.CreateDataChannel("testChannel");
    bool messageReceived = false;
    channel.OnMessage += message => {
      messageReceived = message == "Hello World";
    };
    channel.Send("Hello World");
    Assert.IsTrue(messageReceived);
  }
}

Вивчення проблем передавання даних у потоковій передачі Unity та WebRTC

Окрім потокового відео, увімкнення передача даних між клієнтом Unity та сервером JavaScript за допомогою WebRTC відкриває нові можливості. Однак реалізація такого зв’язку не завжди проста, особливо якщо ви інтегруєте плагін Unity Render Streaming. Поширеною проблемою є правильне налаштування та керування RTCDataChannel для безперебійного текстового спілкування. У нашому прикладі клієнт Unity повинен мати можливість надіслати повідомлення «Hello World» назад на сервер JavaScript. Цей крок вимагає ретельного поводження як із середовищем сценаріїв Unity, так і з нюансами протоколу WebRTC.

Одним із важливих завдань є керування залежностями в Unity. Такі помилки, як відсутність простору імен `SingleConnection` у нашому коді `ReceiverSample.cs`, підкреслюють необхідність переконатися, що всі необхідні плагіни, включаючи WebRTC, встановлено правильно. Хорошою практикою тут є перевірка сумісності між версією Unity та версією плагіна, що використовується. Проблема також може виникати через застарілі або відсутні компоненти Unity Render Streaming, які потрібно налаштувати за допомогою правильного підключення об'єктів.

Окрім технічних проблем, додатковим аспектом, який слід дослідити, є затримка між Unity та JavaScript через WebRTC. Хоча WebRTC забезпечує зв’язок із малою затримкою, умови мережі все одно можуть впливати на доставку повідомлень. Використання співпрограм у Unity дозволяє неблокувати доставку повідомлень, гарантуючи, що надсилання текстових даних (наприклад, через `StartCoroutine`) не перериватиме потокове відео. Перевірка стабільності з’єднання за допомогою `RTCDataChannelState` є ще однією ключовою практикою, щоб переконатися, що повідомлення надсилаються лише тоді, коли канал активний. Ці стратегії допомагають оптимізувати продуктивність і забезпечують кращий досвід роботи з додатками в режимі реального часу.