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

Ce que vous apprendrez dans ce guide

Unreal Engine Pixel Streaming transmet l’image et le son de l’application à un appareil distant, tout en permettant de recevoir les entrées de cet appareil. Un projet Unreal Engine peut ainsi être affiché dans une page web ; les utilisateurs sur ordinateur ou appareil mobile peuvent interagir avec l’application au clavier, à la souris ou par commandes tactiles. Aucun logiciel supplémentaire n’est à installer dans le navigateur.

Ce guide explique comment préparer le projet pour la diffusion, démarrer les composants du serveur et se connecter depuis un navigateur sur le même réseau local. Le guide de démarrage d’Epic Games prend Windows comme exemple et précise que, sous Linux et Mac, les scripts du serveur se trouvent dans un autre dossier.

Prérequis et préparation

Le plugin Pixel Streaming peut encoder la vidéo sur des ordinateurs exécutant Windows, Linux ou Mac, avec certains types de GPU pris en charge. Le guide source renvoie au document Pixel Streaming Reference pour obtenir des précisions sur le matériel compatible. Comme il ne répertorie pas de modèles de GPU précis, il est conseillé de vérifier la compatibilité avant de lancer la diffusion.

Pour la configuration initiale sur un réseau local, les ports réseau 80 et 8888 doivent être ouverts à la communication. Si d’autres serveurs web fonctionnent sur l’ordinateur, le guide recommande de les arrêter avant de procéder à l’installation. Une configuration réseau supplémentaire peut être nécessaire pour se connecter via Internet ou entre différents réseaux. Pour un premier essai, il est plus simple de commencer sur le même ordinateur avec l’adresse localhost ou 127.0.0.1.

Le guide ne mentionne aucune exigence liée à un compte utilisateur. L’infrastructure du serveur est disponible dans le dépôt Pixel Streaming Infrastructure d’Epic Games sur GitHub. Le projet doit être exécuté sous forme d’application empaquetée ou depuis Unreal Editor avec l’option Standalone Game ; le guide explique l’utilisation du plugin avec ces deux modes de lancement.

Installation : préparer le projet et les serveurs

1. Ouvrez le projet dans Unreal Editor. Dans le menu principal, sélectionnez Edit > Plugins ; dans la catégorie Graphics, activez le plugin Pixel Streaming ou Pixel Streaming 2, puis redémarrez le projet. Pour un projet avec personnage nécessitant des commandes tactiles sur mobile, vous pouvez activer l’option Always Show Touch Interface, dans la catégorie Engine > Input de Edit > Project Settings. Ce réglage n’est pas obligatoire ; le composant Player Controller du personnage doit également prendre en charge les entrées tactiles.

2. Définissez le paramètre de lancement du projet. Dans Edit > Editor Preferences..., ouvrez la catégorie Level Editor > Play et ajoutez l’adresse de connexion locale dans le champ Additional Launch Parameters :

-PixelStreamingURL=ws://127.0.0.1:8888

Ce paramètre indique l’adresse à laquelle l’application se connectera au serveur Pixel Streaming. Pour empaqueter le projet pour Windows, sélectionnez Files > Package Project > Windows (64-bit) dans le menu d’Unreal Editor, puis choisissez le dossier de sortie. L’application doit recevoir le même paramètre à chaque lancement. Le guide explique également qu’il est possible d’ajouter ce paramètre au champ Target du raccourci de lancement.

1. Récupérez les composants du serveur Pixel Streaming. Le guide indique que vous pouvez télécharger l’infrastructure directement depuis le dépôt GitHub ou exécuter la commande ci-dessous dans le terminal de votre choix. Remplacez UEX.Y par la branche à utiliser ; le document donne 5.7 en exemple.

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

Vous pouvez également accéder au dossier \Engine\Plugins\Media\PixelStreaming\Resources\WebServers de votre installation Unreal Engine et exécuter le script get_ps_servers, avec l’extension .bat sous Windows ou .sh sous Linux ou Mac. Cette opération récupère la branche correspondante de l’infrastructure dans le dossier.

1. Dans l’exemple Windows, exécutez le script d’installation qui se trouve dans le dossier SignallingWebServer de l’infrastructure téléchargée, depuis PowerShell lancé en tant qu’administrateur :

SignallingWebServer\platform_scripts\cmd\setup.bat

Une fois l’installation terminée, exécutez le script de démarrage du serveur situé dans la même arborescence :

SignallingWebServer\platform_scripts\cmd\start_with_stun.bat

Sous Linux et Mac, le guide indique qu’il faut utiliser les scripts du dossier SignallingWebServer\platform_scripts\bash. Une fois le serveur prêt, la console doit afficher des messages indiquant qu’il écoute les connexions des diffuseurs sur le port 8888, celles des joueurs sur le port 80 et les requêtes du service HTTP.

Lancer l’application et se connecter depuis un navigateur

Une fois les serveurs démarrés, lancez l’application empaquetée avec le paramètre de l’adresse de connexion Pixel Streaming. Exemple de commande :

MyPixelStreamingApplication.exe -PixelStreamingURL=ws://127.0.0.1:8888

MyPixelStreamingApplication.exe est un nom de fichier d’exemple ; utilisez celui de votre application empaquetée. Lorsque l’application se connecte au serveur, le message Streamer connected doit apparaître dans la console du serveur.

Sur le même ordinateur, ouvrez un navigateur pris en charge et accédez à http://127.0.0.1. Le guide d’Epic cite Google Chrome et Mozilla Firefox comme options adaptées. Cliquez sur la page, puis sur le bouton de lecture pour démarrer le flux. La page joueur par défaut peut transmettre à l’application Unreal Engine les entrées clavier, souris et tactiles.

Pour vous connecter depuis un autre ordinateur du même réseau local ou depuis un appareil mobile, saisissez dans le navigateur l’adresse IP de l’ordinateur qui diffuse. Avec cette méthode, tous les appareils connectés voient la même scène, issue de la même instance Unreal Engine ; avec les paramètres par défaut, les entrées de chaque appareil sont également transmises à la même application. Une configuration réseau plus avancée peut être nécessaire pour les connexions depuis Internet ou d’autres sous-réseaux. Le guide source mentionne la configuration de serveurs STUN/TURN pour ce type de connexion.

Problèmes courants et place dans le workflow architectural

En cas d’échec de la connexion, vérifiez d’abord que les composants du serveur fonctionnent, que l’application a été lancée avec le bon paramètre PixelStreamingURL et que les ports 80 et 8888 sont accessibles. La présence d’un autre serveur web sur le même ordinateur peut également perturber la configuration initiale. Si le flux d’entrée s’interrompt lorsque la fenêtre de l’application est réduite, le guide indique que le paramètre -RenderOffScreen permet d’exécuter l’application sans fenêtre visible.

Dans les workflows d’architecture, d’architecture d’intérieur et d’archviz, cette configuration peut être utile aux équipes qui souhaitent afficher une même scène sur plusieurs ordinateurs ou appareils mobiles et proposer une présentation interactive dans un navigateur. Le rendu est calculé sur l’ordinateur hôte de l’application ; les appareils connectés reçoivent la même vue. La compatibilité du GPU de l’ordinateur hôte et la configuration réseau sont donc importantes. Le guide précise que des paramètres comme la résolution, la taille de l’écran, les adresses IP et les ports peuvent être configurés. Les sources ne précisent ni les conditions de licence et de tarification du produit ni sa compatibilité avec un logiciel d’archviz particulier.

Étapes suivantes

Une fois la diffusion de base opérationnelle, la page web du joueur peut être personnalisée en fonction du projet. Il est également possible de contrôler les utilisateurs autorisés à envoyer des entrées ou d’ajouter des éléments d’interface HTML5 à la page. Epic propose un guide d’optimisation du streaming consacré aux réglages qui influent sur la qualité, la latence et la fiabilité de la connexion. Pour des besoins tels que plusieurs serveurs, différents clients ou la diffusion sur Internet, consultez le Hosting and Networking Guide.

Si vous modifiez les fichiers de l’infrastructure, le guide recommande d’éditer l’emplacement d’installation d’origine plutôt que la copie située dans le dossier de l’application empaquetée. Les modifications apportées aux fichiers de ce dossier peuvent être écrasées lors de l’empaquetage suivant. Après avoir terminé la configuration initiale sur un réseau local, examinez les exigences du projet et les paramètres réseau nécessaires avant de passer à des scénarios de connexion plus complexes.

Sources et licence

Ce guide a été adapté en turc à partir des informations de la documentation Unreal Engine Pixel Streaming d’Epic Games et de son guide de démarrage Pixel Streaming. Les deux sources sont fournies sous une licence libre.