Configurer Unreal Engine Pixel Streaming : diffuser un projet dans le navigateur

Unreal Engine Pixel Streaming peut transmettre l’image et le son d’une application Unreal Engine empaquetée à un navigateur web, tout en relayant les entrées de l’utilisateur vers l’application. Les guides officiels d’Epic Games expliquent étape par étape comment configurer le système sur un réseau local et l’utiliser depuis des ordinateurs et des appareils mobiles. Les étapes ci-dessous se concentrent d’abord sur la diffusion, dans des navigateurs du même réseau, d’une application exécutée sur un seul ordinateur.

Que découvrirez-vous dans ce guide ?

Une fois la configuration terminée, un projet Unreal Engine peut s’exécuter sur son ordinateur tandis que d’autres appareils s’y connectent via un navigateur. L’image et le son sont transmis à distance ; la page de lecteur par défaut prend en charge le transfert des entrées du clavier, de la souris et de l’écran tactile. Il n’est donc pas nécessaire d’installer l’application séparément sur chaque appareil pour une présentation architecturale, l’examen interactif d’une scène ou une démonstration de projet.

Cette méthode ne revient pas à déplacer l’application dans le cloud : le guide de démarrage officiel recommande de commencer par des essais sur un réseau local ou un VPN. Il convient donc d’appliquer d’abord ces étapes à un seul ordinateur et à des clients connectés au même réseau. Un accès via Internet ou depuis différents sous-réseaux peut nécessiter une configuration réseau supplémentaire.

Prérequis et préparation

Le plugin Pixel Streaming peut fonctionner sous Windows, Linux ou Mac pour l’encodage vidéo, avec certains GPU. La source renvoie au document Pixel Streaming Reference pour les détails sur les GPU pris en charge ; il faut donc vérifier la compatibilité du matériel avant l’installation. Le guide n’impose pas de version spécifique d’Unreal Engine. La branche 5.7 est donnée à titre d’exemple pour l’infrastructure serveur, mais elle n’est pas présentée comme une exigence de version pour tous les projets.

Les étapes d’empaquetage présentées dans le guide de démarrage concernent Windows. Pour les communications sur le réseau local, les ports 80 et 8888 doivent être ouverts et les autres serveurs web en cours d’exécution sur l’ordinateur doivent être arrêtés pendant la configuration. Pour effectuer un essai sur le même ordinateur, vous pouvez utiliser localhost ou 127.0.0.1. Pour vous connecter depuis d’autres appareils, vous aurez besoin de l’adresse IP réseau de l’ordinateur qui héberge l’application et le Signalling Server. Les sources ne mentionnent aucune obligation de compte payant.

Étapes d’installation et de connexion

1. Activez le plugin. Ouvrez le projet dans Unreal Editor, accédez à Edit > Plugins et activez le plugin Pixel Streaming ou Pixel Streaming 2, dans la catégorie Graphics. Redémarrez le projet pour appliquer la modification.

2. Définissez l’adresse de lancement. Dans Edit > Editor Preferences..., ouvrez la catégorie Level Editor > Play. Ajoutez l’adresse de connexion locale dans le champ Additional Launch Parameters :

-PixelStreamingURL=ws://127.0.0.1:8888

Pour les projets comprenant des personnages, si vous souhaitez utiliser les commandes tactiles depuis un téléphone ou une tablette, vous pouvez activer Always Show Touch Interface dans la catégorie Engine > Input de Edit > Project Settings. Ce réglage est facultatif et dépend de la prise en charge des entrées tactiles par le composant Player Controller du projet.

1. Empaquetez le projet. Dans l’exemple Windows de la source, l’application est empaquetée en sélectionnant Files > Package Project > Windows (64-bit). Le plugin peut être utilisé avec une application empaquetée ou avec un projet lancé depuis Unreal Editor à l’aide de l’option Standalone Game ; l’exécution dans l’affichage normal de l’éditeur ne remplace pas les options indiquées dans le guide. Transmettez le même paramètre de connexion à chaque lancement de l’application empaquetée.

2. Récupérez l’infrastructure Pixel Streaming. Les composants du serveur web et de l’interface sont disponibles dans un dépôt distinct nommé Pixel Streaming Infrastructure. Le guide d’Epic propose de récupérer cette infrastructure depuis le dépôt Git ou d’exécuter la commande get_ps_servers dans l’installation d’Unreal Engine. Si vous choisissez de cloner le dépôt, vous pouvez utiliser le format de branche donné en exemple dans la source :

git clone --branch UEX.Y https://github.com/EpicGamesExt/PixelStreamingInfrastructure.git

Remplacez la valeur UEX.Y par le nom de la branche choisie ; le guide donne la branche 5.7 en exemple. Sous Windows, exécutez SignallingWebServer\platform_scripts\cmd\setup.bat pour préparer le serveur, puis SignallingWebServer\platform_scripts\cmd\start_with_stun.bat pour le démarrer. Pour Linux et Mac, le guide précise que les mêmes opérations s’effectuent avec les scripts situés dans SignallingWebServer\platform_scripts\bash.

1. Connectez l’application au serveur. Lorsque le Signalling Server est en cours d’exécution, ouvrez l’application empaquetée avec le paramètre défini à l’étape précédente. Le message Streamer connected qui apparaît dans la fenêtre du serveur indique que l’application s’y est connectée.

2. Connectez-vous depuis un navigateur. Sur le même ordinateur, ouvrez un navigateur pris en charge et accédez à http://127.0.0.1 ; lancez la connexion, puis la lecture sur la page. Pour vous connecter depuis un autre ordinateur ou un appareil mobile du réseau, remplacez 127.0.0.1 par l’adresse IP de l’ordinateur qui diffuse l’application. La page par défaut relaie les entrées du clavier, de la souris et de l’écran tactile ; les appareils connectés voient la même scène et, par défaut, envoient des entrées partagées à l’application.

Problèmes fréquents et étapes suivantes

Si la connexion échoue, vérifiez d’abord que l’application est exécutée sous forme empaquetée ou en mode Standalone Game, que le plugin est activé et que le paramètre de lancement a été correctement ajouté. Vérifiez ensuite que les ports 80 et 8888 sont ouverts aux communications et qu’aucun autre serveur web ne les utilise. Dans un navigateur, 127.0.0.1 désigne uniquement l’ordinateur utilisé ; depuis un autre appareil, il faut saisir l’adresse IP de l’ordinateur qui diffuse l’application.

La réduction accidentelle de la fenêtre de l’application peut interrompre le flux des entrées. Pour éviter cela, le guide propose également d’ajouter -RenderOffScreen aux paramètres de lancement de l’application. Un accès depuis plusieurs réseaux ou via Internet peut nécessiter une configuration réseau plus poussée ; pour les connexions depuis différents réseaux, des paramètres STUN/TURN pour le Signalling Server peuvent être nécessaires. La page de lecteur peut aussi être personnalisée ; pour ajouter une interface HTML5 et déterminer quels clients peuvent envoyer des entrées, consultez la documentation officielle sur la personnalisation.

Conséquences pour les workflows d’architecture, de design d’intérieur et d’archviz

Pixel Streaming peut être utile aux équipes d’architecture et de visualisation qui souhaitent partager une présentation interactive Unreal Engine via un navigateur. L’image est transmise depuis l’application distante ; les clients n’ont pas besoin d’installer l’application. Il faut toutefois vérifier au préalable la compatibilité du système d’exploitation et du GPU de l’ordinateur qui exécute la scène, ainsi que la connexion réseau et la configuration des ports. La source indique également qu’il faut trouver un équilibre entre qualité, latence et stabilité ; il est donc important d’effectuer des essais dans les conditions réelles de présentation. Une utilisation à plus grande échelle ou via Internet peut nécessiter une préparation réseau et serveur différente de la configuration de base sur réseau local.

Sources et licence

Ce guide a été adapté en turc à partir des étapes des documents officiels d’Epic Games « Pixel Streaming in Unreal Engine » et « Getting Started with Pixel Streaming in Unreal Engine ». Les sources sont signalées comme étant sous licence libre ; toutefois, le nom précis de la licence n’est pas indiqué dans les textes fournis.