Prise en charge de la lecture vidéo immersive dans les apps visionOS

Bonjour. Je m’appelle Jamal, je suis ingénieur en applications de contenu multimédia dans l’équipe AVKit. Je m’appelle Michael, je suis ingénieur logiciel au sein de l’équipe visionOS Spatial Media. L’une de mes activités préférées sur visionOS c’est de regarder des vidéos d’une manière propre à la plate-forme. Dans visionOS 2, cela inclut des expériences incroyables comme la lecture depuis la station d’accueil et les vidéos spatiales. Sous visionOS 26, nous avons étendu vos frameworks multimédias préférés, tels que Quick Look, AVKit et RealityKit, pour prendre en charge des profils multimédias plus immersifs et vous aider à créer une grande expérience de lecture vidéo immersive dans visionOS. Jamal et moi allons partager comment prendre en charge cette lecture vidéo immersive dans votre application. À toi de jouer, Jamal. Merci, Michael. Je vais passer brièvement en revue les différents types de profils vidéo. Je présenterai la façon dont Quick Look et les nouvelles API d’AVKit prennent en charge la lecture multimédia immersive. Enfin, Michael expliquera comment les applications peuvent personnaliser les expériences de lecture immersives avec RealityKit. À la fin de cette vidéo, vous apprendrez tout ce que vous devez savoir, pour créer une expérience de lecture vidéo immersive, dans votre application visionOS. Je vais commencer par passer en revue les différents types de profils vidéo pris en charge dans visionOS 26.

Dans visionOS 1, les vidéos 2D et 3D étaient le principal moyen d’offrir la lecture vidéo dans les applications. Les médias spatiaux ont permis aux gens de filmer du contenu stéréo convaincant et d’apprécier leur création de manière immersive. visionOS 26 inclut désormais Apple Projected Media Profile (APMP) pour les vidéos à 180°, 360° et à large champ de vision. Et pour des expériences des plus immersives, il y a Apple Immersive Video. Chacun de ces profils est unique à sa manière. Si vous n’êtes pas familier avec les termes, la séance « Explore video experiences for visionOS » vous sera utile. Il existe de nombreuses façons de prendre en charge tous les profils vidéo que je viens d’énumérer. Choisir la bonne technologie pour votre application est important pour offrir une expérience immersive exceptionnelle.

Quick Look est idéal pour présenter rapidement tout type de contenu multimédia, même immersif. AVKit offre une expérience vidéo cohérente et familière sur toutes les plates-formes, tout en offrant des commandes améliorées pour l’expérience de lecture. RealityKit est conçu pour les applications qui exigent une expérience de lecture immersive unique, comme celles que l’on trouve dans les environnements de jeux vidéo. Enfin, si vous recherchez une prise en charge de la lecture immersive dans un navigateur, Consultez « What’s new for spatial web », pour une explication plus détaillée de la lecture immersive du contenu web.

Ensuite, je passerai en revue les outils disponibles pour Quick Look et AVKit dans visionOS 26, afin que vous puissiez vous lancer dans la création de votre application de lecture vidéo immersive. Quick Look propose deux API pour afficher et prévisualiser rapidement le contenu multimédia dans les apps. Il y a PreviewApplication, une API qui active une fenêtre hors processus pour la présentation multimédia. Et QLPreviewController, une API permettant de prévisualiser du contenu multimédia dans la fenêtre d’une app ou dans un style de présentation modale. Dans visionOS 26, QLPreviewController a été amélioré pour prendre en charge les photos et les vidéos spatiales. PreviewApplication prend désormais en charge Apple Immersive Video et Apple Projected Media Profile, y compris les vidéos à 180°, 360° et à large champ de vision.

QLPreviewController et PreviewApplication peuvent gérer la présentation et les transitions des nouveaux profils vidéo. Ils adaptent également leur aperçu avec le style vidéo approprié. Dans visionOS 26, toutes les applications qui implémentent déjà des API Quick Look prendront automatiquement en charge les profils multimédias immersifs. Pour en savoir plus sur l’implémentation des API PreviewApplication ou QLPreviewController, reportez-vous à nos vidéos « Discover Quick Look for spatial computing » de la WWDC23 et « What’s new in Quick Look for visionOS » de la WWDC24. Ensuite, je vais aborder les nouvelles API AVKit introduites pour prendre pleinement en charge la lecture vidéo immersive. Dans visionOS 26, l’API AVExperienceController est exploitée pour réaliser des transitions vers une nouvelle expérience immersive. Il existe différentes options pour réaliser la transition vers une expérience immersive avec AVExperienceController. La première étant Expanded. L’expérience Expanded permet à AVPlayerViewController d’utiliser toute la scène de la fenêtre de l’interface utilisateur, et maintenant, dans visionOS 26, Expanded est configurable pour obtenir une lecture vidéo immersive. Nouveauté de la configuration Expanded, la propriété AutomaticTransitionToImmersive permet de déterminer si des transitions automatiques vers une expérience immersive doivent être lancées. La propriété AutomaticTransitionToImmersive peut être définie sur default pour accepter le comportement par défaut du système, ou sur none si aucune transition automatique n’est souhaitée.

La valeur .none définie pour la propriété AutomaticTransitionToImmersive donne à AVPlayerViewController un traitement de portail pour le contenu immersif lorsqu’il est détecté. Tout en conservant AVExperienceController dans l’expérience Expanded. Voici un exemple de désactivation des transitions automatiques vers une expérience immersive, lorsque le traitement de portail pour le contenu immersif est souhaité. Je vais d’abord créer un AVPlayerViewController et le configurer avec le contenu multimédia immersif. J’ajoute à experienceController l’ensemble recommandé, qui comprend les expériences appropriées pour la plate-forme, tout en m’assurant que .expanded et .immersive en font partie. Puisque AutomaticTransitionToImmersive est une propriété initiale par défaut, je dois définir la valeur .none de la propriété. En supposant qu’AVPlayerViewController soit déjà dans la hiérarchie de vue des applications, je suis prêt pour la transition de AVExperienceController vers l’expérience .expanded. Avec la nouvelle API immersive, dans le cadre des expériences AVExperienceController, il est possible de passer explicitement à cette expérience au lieu de compter sur un déclencheur automatique. Tout comme cela a été fait pour Expanded.

L’API Expérience immersive s’accompagne d’une nouvelle API de configuration qui permet aux apps de définir l’emplacement pour expérimenter la lecture vidéo immersive. Cet extrait de code montre comment utiliser l’expérience immersive avec l’API de configuration. En supposant que AVPlayerViewController n’ait pas été ajouté à la hiérarchie de vue, vous devrez le spécifier via l’API de configuration. Pour ce faire, accédez à la configuration ExperienceController et fournissez la valeur de placement avec la fonction .over pour votre scène d’interface utilisateur de fenêtre préférée. Une fois défini, AVExperienceController est prêt à passer à une expérience immersive. Si AVPlayerViewController est déjà contenu dans la hiérarchie de vue, AVExperienceController considère que la scène de fenêtre où il se trouve est la scène de placement souhaitée. Et c’est ainsi que les applications peuvent passer à une expérience immersive avec AVKit. Lors de la transition vers et hors de l’expérience immersive, AVExperienceController gère les animations et les transitions entre les expériences. Ces transitions sont initiées à tout moment, soit par l’utilisateur, soit par la logique de l’application, soit par le système.

Par conséquent, lorsque vous utilisez AVExperienceController, il est important de comprendre tout changement d’état de transition ou de présentation, cela vous donnera la flexibilité nécessaire pour gérer correctement l’état actif de votre application. Pour cela, le protocole AVExperienceController.Delegate est la solution. Le protocole compte trois méthodes de délégué : didChangeAvailableExperiences, qui avertit lorsque les expériences disponibles possibles ont changé. prepareForTransitionUsing, qui avertit lorsque AVExperienceController est sur le point d’effectuer une transition, permettant à votre app de se préparer une dernière fois au nouvel état. et didChangeTransitionContext, qui avertit lorsque la transition vers la nouvelle expérience est finalisée.

L’expérience immersive est étroitement liée au type de contenu fourni. Utilisez la méthode didChangeAvailableExperiences pour déterminer si une expérience immersive est disponible pour le type de contenu actuel. Par exemple, si du contenu multimédia 2D est fourni à AVPlayerViewController, l’expérience immersive ne sera pas disponible. Pour en savoir plus sur l’utilisation d’AVExperienceController et de ses méthodes déléguées, consultez l’exemple de code « Playing immersive media with AVKit ». Outre les nouvelles API pour la lecture vidéo immersive, Quick Look et AVKit prennent désormais en charge la détection de l’atténuation du confort sous visionOS 26. Les vidéos immersives présentent parfois des mouvements de caméra impressionnants, ce qui peut gêner le spectateur. Comme solution, la détection de mouvement est désormais prise en charge pour le contenu Apple Projected Media Profile. Quick Look et AVKit détectent les mouvements rapides pendant la lecture et réduisent automatiquement le niveau d’immersion. Le spectateur peut régler les options dans l’app Réglages pour personnaliser le comportement de Quick Look et AVKit. Pour les expériences de lecture vidéo les plus immersives, Quick Look et AVKit sont parfaits ! Pour une expérience immersive plus personnalisée, RealityKit est idéal, et je vais laisser Michael vous dire pourquoi. Merci, Jamal. RealityKit est excellent pour la lecture vidéo personnalisée, comme l’inclusion de vidéos dans un jeu immersif ou le rendu vidéo avec une interface utilisateur personnalisée. Dans visionOS 26, RealityKit prend en charge la lecture native de vidéos immersives. Nous allons voir un nouveau mode immersif progressif pour les vidéos à 180°, 360° et à large champ de vision, ainsi que Apple Immersive Video, mais aussi le rendu de vidéos spatiales avec un style spatial complet, exactement comme dans l’app Photos. Je vous montrerai également comment détecter l’application des mesures d’atténuation du confort vidéo. Enfin, je vous donnerai quelques conseils sur l’utilisation de RealityKit pour la lecture vidéo dans une scène SwiftUI. VideoPlayerComponent est une API puissante pour le rendu de vidéos dans RealityKit. Reliée à une entité RealityKit, elle crée ses propres maillage et matériau en fonction de la vidéo en cours dans AVPlayer et des propriétés du composant. VideoPlayerComponent est idéal pour le rendu de vidéos avec des modes d’affichage immersifs, car les mises à jour et les animations de maillage sont gérées automatiquement, comme dans cet exemple d’ancrage vidéo du projet Destination Video sur developer.apple.com. Consultez « Enhance your spatial computing app with RealityKit » pour une présentation de VideoPlayerComponent.

Dans visionOS 26, VideoPlayerComponent prend en charge tous les profils vidéo immersifs désormais pris en charge par Quick Look et AVKit. Je vais commencer par les vidéos Apple Projected Media Profile et Apple Immersive Video. VideoPlayerComponent prend en charge trois modes immersifs pour ces profils vidéo. Le rendu vidéo du mode Portal s’effectue dans un portail, pour une présentation en fenêtre. Le mode progressif est une nouvelle API qui permet aux utilisateurs de régler leur propre niveau d’immersion à l’aide de la Digital Crown, ce qui leur permet de rester connectés au monde qui les entoure tout en profitant de la vidéo. Et à 100 % d’immersion, le mode progressif équivaut au mode de vision immersif complet.

À partir de visionOS 26, le mode d’affichage immersif progressif est préféré au mode d’affichage immersif complet pour les vidéos Apple Projected Media Profile et Apple Immersive Video, en raison de la plus grande flexibilité qu’il offre, et pour sa prise en charge de la détection de l’atténuation du confort, que j’aborderai plus tard. Ici, je vais créer une vue pour rendre une vidéo à 180 degrés en mode portail, et je vais la placer dans un WindowGroup de l’espace partagé. Pour configurer la lecture du portail, commencez par créer un AVPlayerItem et un AVPlayer, avec une URL locale ou HTTP Live Streaming. Ensuite, initialisez un VideoPlayerComponent avec le lecteur. Définissez desiredImmersiveViewingMode du composant sur portal et attachez le composant à une entité. Le maillage de VideoPlayerComponent a une hauteur de 1 mètre par défaut. Je fais une mise à l’échelle de 0,4 mètre, pour tenir dans la scène de la fenêtre SwiftUI. Enfin, ajoutez l’entité à la scène. Pour un rendu de cette vidéo en mode progressif, remplacez .portal par .progressive dans le mode desiredImmersiveViewingMode du composant. Comme le composant contrôle la mise à l’échelle en mode progressif, les opérations de mise à l’échelle n’ont aucun effet. Je vais le supprimer pour que ce soit plus clair. Passer le composant à .progressive ne suffit pas pour le rendu dans une scène SwiftUI. Pour éviter de tronquer le développement du maillage dans les limites de la scène de fenêtre, je dois placer le nouveau ProgressiveVideoView dans un ImmersiveSpace. Et lors du rendu avec le mode progressif, cet ImmersiveSpace doit avoir un style d’immersion .progressive. Ici, le niveau d’immersion initial est de 1 : soit une immersion totale. J’ai choisi une plage large de 10 à 100 %, afin que les gens puissent composer leur propre niveau d’immersion. Si j’avais inclus 0 %, l’immersion aurait pu être réduite jusqu’à faire disparaitre le contenu, mais je ne veux pas de cela pour mon app. La valeur ImmersionStyle de SwiftUI et le mode d’affichage immersif du composant sont tous deux importants pour configurer la lecture. Faites toujours correspondre desiredImmersiveViewingMode avec ImmersionStyle lors du rendu dans un RealityView. Pour plus d’informations sur les styles d’immersion, consultez la vidéo de 2024 « Dive deep into volumes and immersive spaces ». Pour passer du mode portail au mode progressif, attendez l’événement ImmersiveViewingModeDidChange lors du changement de scène SwiftUI. Les événements ImmersiveViewingModeWillTransition et DidTransition signalent quand changer la visibilité de la UI pendant les transitions animées, pour réduire les conflits de mouvement et stéréo. Pour obtenir des exemples de ces événements, consultez « Playing immersive media with RealityKit » sur developer.apple.com. Révision : Pour un rendu portail des vidéos Apple Projected Media Profile et Apple Immersive Video, définissez desiredImmersiveViewingMode sur .portal. Les portails sont généralement dans un WindowGroup SwiftUI de l’espace partagé, mais peuvent être exclusifs dans un espace immersif avec une immersion .mixed. Pour un rendu immersif, définissez desiredImmersiveViewingMode sur .progressive, dans un ImmersiveSpace avec un ImmersionStyle .progressive comme précédemment. Pour obtenir un comportement système préféré, ne définissez pas desiredViewingMode. Le viewingMode sera automatiquement .mono pour les vidéos monoscopiques et .stereo pour les vidéos stéréo telles que stéréo 180 et Apple Immersive video. Les vidéos spatiales sont des vidéos stéréo que des personnes comme vous ont peut-être déjà capturées dans l’écosystème Apple. Elles contiennent des métadonnées spatiales qui permettent un rendu plus confortable et immersif. Tout comme les vidéos Apple Projected Media Profile et Apple Immersive Video, les vidéos spatiales sont désormais prises en charge en mode natif dans RealityKit avec un rendu en style spatial complet et des modes immersifs.

Le style spatial des vidéos spatiales est configuré avec la propriété desiredSpatialVideoMode sur VideoPlayerComponent. Définissez cette propriété pour spécifier le rendu d’une vidéo spatiale. Lisez la propriété spatialVideoMode get-only pour déterminer le rendu d’une vidéo spatiale. Pour choisir le style spatial pour les vidéos spatiales, définissez desiredSpatialVideoMode sur .spatial.

Le rendu spatial prend en charge les modes ImmersiveViewingModes .portal et .full. Contrairement à d’autres types de vidéos immersives, le rendu immersif de SpatialVideo est toujours configuré avec ImmersiveViewingMode .full. Les vidéos spatiales immersives s’affichent dans une taille fixe en fonction du champ de vision du contenu.

Définissez desiredSpatialVideoMode sur .screen, la valeur par défaut, pour afficher les vidéos spatiales en stéréo traditionnelle sur un maillage d’écran. SpatialVideoMode ne sera pas mis à jour, sauf si la vidéo en cours est une vidéo spatiale valide. Comme son nom l’indique, ce mode ne s’applique qu’aux vidéos spatiales. Abonnez-vous au nouveau VideoPlayerEvent : SpatialVideoModeDidChange, ou observez la propriété 'spatialVideoMode' et déterminez si la propriété spatialVideoMode a été mise à jour et à quel moment. Pour effectuer un rendu vidéo en tant que vidéo spatiale en mode portail, créez d’abord un VideoPlayerComponent avec un AVPlayer qui contient une vidéo spatiale. Définissez le desiredViewingMode sur stéréo. C’est la valeur par défaut des vidéos spatiales, mais j’aime être précis. Définissez ensuite desiredSpatialVideoMode sur .spatial et choisissez .portal pour desiredImmersiveViewingMode. Comme vu précédemment, redimensionnez la vidéo pour qu’elle tienne dans la fenêtre. En mode spatial, la vidéo peut être agrandie en réglant le mode d’affichage immersif sur .full. Je supprime également l’opération de mise à l’échelle puisque le composant contrôle la taille pendant la présentation immersive. Comme dans mon exemple précédent, la vue devra être dans un espace immersif pour éviter d’être tronquée. Mais le rendu vidéo spatial immersif n’est pas verrouillé comme d’autres types de vidéo immersive, je dois donc définir la position de l’entité. Je vais choisir un mètre et demi au-dessus du sol et un mètre en avant. Mais pour une solution plus solide, utilisez un ancrage pour initialiser l’entité avec une position devant le spectateur. Enfin, je vais envelopper cette ImmersiveSpatialVideoView dans un ImmersiveSpace. Pour les vidéos spatiales, utilisez un ImmersionStyle .mixed pour un rendu en mode immersif sur passthrough. Pour permettre un rendu des vidéos spatiales également dans les environnements système, comportement que je valide toujours, utilisez le nouveau modificateur de scène immersiveEnvironmentBehavior avec l’option .coexist.

Révision : les portails de vidéos spatiales sont configurés avec un mode desiredSpatialVideoMode .spatial et un desiredImmersiveViewingMode .portal dans l’espace partagé, ou un ImmersiveSpace avec ImmersionStyle .mixed. Par défaut, le ViewingMode des vidéos spatiales est .stereo. Le mode immersif de vidéo spatiale est défini avec desiredImmersiveViewingMode .full et ImmersiveSpace avec ImmersionStyle .mixed pour un rendu sur passthrough.

Pour un rendu traditionnel .stereo, sans style spatial, définissez desiredSpatialVideoMode sur .screen. Les modes d’affichage immersif n’ont aucun effet dans ce mode. Le rendu des vidéos spatiales peut également être monoscopique avec un desiredViewingMode .mono. Dans ce mode, ni SpatialVideoMode ni ImmersiveViewingMode n’ont d’effet. Ces modes non immersifs se trouvent généralement dans un WindowGroup, dans l’espace partagé. Regarder des vidéos immersives est une expérience incroyablement immersive. Cela signifie que la lecture peut être très sensible aux mouvements rapides dans la vidéo. Ainsi, pour les vidéos Apple Projected Media Profile, RealityKit prend automatiquement des mesures de limitation du confort pendant la lecture, comme Jamal l’a décrit précédemment pour AVKit et Quick Look.

Le nouvel événement VideoComfortMitigationDidOccur signale lorsqu’une atténuation du confort est appliquée par le système, en réponse à un mouvement important dans la vidéo. Aucune action n’est alors nécessaire, c’est le signal qu’un certain niveau d’atténuation a été appliqué. La réduction de l’immersion n’est disponible que pendant le rendu progressif, c’est pourquoi il est important d’utiliser ImmersiveViewingMode et un style d’immersion en mode .progressive plutôt que .full, pour les vidéos Apple Projected Media Profile. Pendant le rendu .portal, aucune atténuation ne se produit, car la lecture du portail est déjà confortable pour la plupart des contenus. Les comportements et les styles de rendu pris en charge d’un VideoPlayerComponent dépendent du profil vidéo spécifique présenté. Utilisez l’événement ContentTypeDidChange pour détecter le type de vidéo dans un VideoPlayerComponent, y compris de nouveaux types comme les vidéos Apple Projected Media Profile. Réagissez au moindre changement de type de vidéo pour comprendre les modes d’affichage disponibles, si une atténuation du confort sera appliquée ou pour mettre à jour des éléments de la UI. Lorsque VideoPlayerComponent est combiné avec la UI, ou simplement présenté dans une scène SwiftUI, j’ai quelques conseils pour assurer une intégration fluide entre le contenu RealityKit et SwiftUI. Par exemple, la gestion de l’échelle d’un maillage est importante pour placer du contenu multimédia avec l’interface utilisateur. En mode portail, la taille du maillage est reflétée par la propriété playerScreenSize, dans l’espace de coordonnées local de l’entité. Le maillage du portail est toujours créé avec une hauteur de 1 mètre. Lors de la mise à l’échelle d’une entité vidéo, mettez toujours à l’échelle X et Y uniformément pour conserver les proportions. Si la scène de fenêtre a une hauteur inférieure à 1 mètre, le maillage est tronqué par les limites de la scène, sauf si l’entité est réduite. Pour mettre à l’échelle une vidéo et l’adapter à l’intérieur de la scène, définissez l’échelle en fonction de la taille de la fenêtre disponible à l’aide de GeometryReader3D. Reportez-vous à l’exemple de projet « Playing immersive media with RealityKit » sur developer.apple.com pour un exemple de mise à l’échelle d’un portail vidéo pour l’adapter à une scène.

J’ai aussi, une remarque sur le tri : La UI personnalisée sur le même plan que le maillage vidéo aura un comportement de tri non défini. Ajoutez un ModelSortGroupComponent à la même entité que le VideoPlayerComponent, et utilisez un ModelSortGroup qui spécifie une catégorie planarUIPlacement, pour trier explicitement l’entité par rapport à l’interface utilisateur coplanaire. Qu’il s’agisse de Quick Look, AVKit ou RealityKit, c’est à vous de choisir le framework à utiliser pour une lecture vidéo immersive, et vous disposez des outils nécessaires pour intégrer ces expériences incroyables dans votre app !

Créez de nouvelles expériences immersives dans votre app en ajoutant des vidéos APMP à 360° à un jeu immersif, ou en diffusant des vidéos Apple Immersive Video ou spatiales, par exemple. Pour en savoir plus sur les nouveaux types de vidéos APMP, regardez la vidéo « Learn about the Apple Projected Media Profile ». Et pour en savoir plus sur Apple Immersive Video, regardez la vidéo « Learn about Apple Immersive Video technologies ». Il ne vous reste plus qu’à créer des expériences vidéo immersives étonnantes !