Créez une expérience de lecture multivue fluide

Bonjour, je m’appelle Julia, ingénieure AVFoundation. Je vais ici expliquer comment créer une expérience utilisateur captivante dans votre app entre plusieurs lecteurs. Les utilisateurs aiment obtenir plusieurs perspectives à partir d’événements en direct comme des compétitions sportives ou regarder plusieurs chaînes simultanément. Une expérience de lecture multivue consiste à lire plusieurs flux audio et vidéo à la fois. Un cas d’utilisation consiste à lire plusieurs flux différents du même événement. Par exemple, un match de foot avec un flux audio pour l’annonceur et deux flux vidéo avec des perspectives différentes du terrain. Dans ce cas, il est important de synchroniser la lecture entre les flux. De cette façon, les moments clés s’alignent. D’autres exemples de flux synchronisés peuvent inclure un concert de musique qui comporte plusieurs angles de caméra ou un discours d’ouverture qui comprend un flux de contenu principal et un flux en langue des signes.

Un autre cas d’utilisation multivue consiste à lire plusieurs flux d’événements complètement différents. Par exemple, montrer les flux de différentes épreuves comme l’athlétisme et la natation pendant les Jeux olympiques, avec une musique de fond. Dans ce cas, les flux audio et vidéo n’ont pas besoin d’être synchronisés l’un avec l’autre. AVFoundation et AVRouting ont une API qui facilite la création de riches expériences de lecture multivue. Je vais passer ici en revue ces API, en commençant par la synchronisation de la lecture sur plusieurs flux. Puis j’aborderai comment gérer le routage entre plusieurs vues pour AirPlay. Enfin, j’expliquerai comment optimiser la qualité de lecture sur plusieurs lecteurs.

Lorsque vous diffusez plusieurs flux qui doivent être coordonnés, comme pour un match, il est essentiel de synchroniser la lecture entre tous les lecteurs afin que les moments clés s’alignent. Autrement dit, les comportements comme la lecture, la pause et la recherche doivent être coordonnés. Cependant, cela peut être compliqué. En plus des changements de vitesse et des recherches, les comportements complexes doivent aussi être gérés. AVPlaybackCoordinationMedium, du framework AVFoundation, facilite la synchronisation étroite de la lecture entre plusieurs lecteurs. Il coordonne les changements de vitesse et les sauts dans le temps, et d’autres comportements complexes comme le décrochage, les interruptions et la synchronisation au démarrage. Je vais vous montrer comment utiliser AV Playback Coordination Medium pour coordonner plusieurs lecteurs dans votre app. Dans les démos de cette vidéo, j’utiliserai l’exemple de différents angles de caméra d’un train sur des rails se déplaçant à travers différentes scènes comme des plantes et d’autres objets et points de repère. Cet exemple de train permet d’illustrer à quoi pourrait ressembler un contenu multivue avec plusieurs angles de caméra. Dans la démo de coordination, j’ajouterai plusieurs angles de caméra qui ont été filmés autour de la voie ferrée, comme si je regardais un match et que je voulais ajouter différents angles de caméra du match. Voici une app iPad avec divers flux vidéo d’un train miniature se déplaçant sur la voie. Je commence par une vue aérienne de la voie ferrée en cours de lecture. Je veux voir plus d’angles du train, alors j’ajoute une vue latérale de la voie. Le deuxième flux correspond au flux en cours de lecture. J’ajoute également deux autres angles de caméra enregistrés autour de la voie. Chaque flux supplémentaire avec jonction est synchronisé. Si je fais une pause, tous les lecteurs font de même. En regardant de plus près, je peux voir le train sous plusieurs angles sur les quatre lecteurs. En haut à gauche, dans la vue à vol d’oiseau, le train est positionné près du bord supérieur de la table près des plantes. Des autres angles de caméra, je peux voir que le train commence à entrer dans la partie droite des voies et s’approche du singe par derrière. En regardant l’horodatage sur chaque vidéo, je vois que toutes sont en même temps.

Je vais lancer la lecture et tous les lecteurs feront de même. Je peux regarder le train en parfaite coordination sous différents angles.

Je fais ensuite une avance rapide de 10 secondes. Avec chacune des actions, les lecteurs restent synchronisés.

Même si je quitte mon app iPad et que je passe à une vue Image dans l’image. Les flux restent synchronisés.

Si je reviens à l’app, toutes les vidéos sont toujours synchronisées.

Cela fonctionne aussi très bien sur les interfaces système, comme En cours de lecture. Les comportements de lecture sont également coordonnés. Si je fais une pause et reprends la lecture, les lecteurs restent synchronisés. La coordination entre tous les lecteurs crée une excellente expérience utilisateur. Dans la démo, j’ai montré un exemple avec un train traversant des points de repère. Dans le monde réel, il peut s’agir d’événements sportifs, de flux en langue des signes ou d’autres scénarios multivue pour lesquels vous souhaitez coordonner la lecture. Maintenant que nous avons vu à quoi cela ressemble en action, voyons comment créer cette expérience dans votre app. L’API AV Playback Coordination Medium s’appuie sur l’architecture AVPlaybackCoordination qui existe pour SharePlay. Chaque AVPlayer dispose d’un AVPlaybackCoordinator qui négocie entre l’état de lecture du lecteur et tous les autres lecteurs connectés. Pour en savoir plus sur le coordinateur de lecture et son fonctionnement, regardez la vidéo « Coordinate media experiences with Group Activities ». S’il y a plusieurs lecteurs vidéo, le coordinateur de lecture doit gérer l’état à distance et s’assurer que chaque lecteur est synchronisé avec les autres. AV Playback Coordination Medium communique les changements d’état entre tous les coordinateurs de lecture. Le support de coordination transmet les états d’un coordinateur aux autres coordinateurs de lecture et les maintient synchronisés. Ceci est possible grâce à la messagerie. Le support de coordination transmet des messages entre les lecteurs pour les changements d’état importants tels que la vitesse de lecture, l’heure ou autres. Par exemple, si un lecteur est mis en pause, ce message est envoyé au support de coordination. Ensuite, le support de coordination l’envoie aux autres coordinateurs de lecture connectés. Les coordinateurs de lecture gèrent et appliquent l’état de lecture. Tous les lecteurs restent ainsi synchronisés lors de la lecture de contenu multivue coordonné. La mise en œuvre ne prend que quelques lignes de code. D’abord, je configure mes AVPlayers, chacun avec une ressource différente. Ici, j’utilise deux vidéos. Une pour un gros plan et une pour une vue aérienne. Je les configure séparément avec différentes ressources. Ensuite, je crée le support de coordination. Puis, je connecte chaque lecteur au support de coordination via la méthode des coordonnées. Cette méthode peut générer des erreurs, il est donc important de les gérer. Enfin, je fais de même pour le deuxième lecteur, le plan aérien. Désormais, les deux coordinateurs de lecture sont connectés au support de coordination, et les actions sur chaque lecteur sont synchronisées. Il me suffit d’appeler une action sur un lecteur pour que tous les autres lecteurs connectés fassent de même. Dans cet exemple, je n’ai utilisé que deux lecteurs, mais vous pouvez en connecter plus. AVPlaybackCoordinationMedium est idéal pour coordonner la lecture multivue.

Parlons maintenant des outils qui peuvent s’appliquer aux types de lecture multivue coordonnés et non coordonnés. AirPlay offre une expérience de lecture externe exceptionnelle. Les utilisateurs peuvent acheminer les flux vidéo vers un écran plus grand chez eux, ou un flux audio vers un HomePod. Il est important d’acheminer la bonne vue vers le bon appareil. Voyons comment prendre en charge AirPlay dans votre app avec des expériences multivue. Allons-y ! Dans cet exemple, je regarde une vidéo à vol d’oiseau avec une vidéo en gros plan d’une voie. Les deux vidéos sont en cours de lecture sur mon iPad. Les deux vidéos sont en cours de lecture sur mon iPad. Toutefois, je souhaite diffuser ma vidéo sur l’Apple TV via AirPlay de mon iPad. Le récepteur AirPlay ne peut recevoir qu’un seul flux. Si je l’utilise, je préfère donc que la vue aérienne soit lue sur grand écran pour voir tous les détails plus clairement. Je lance la lecture de deux vidéos sur mon iPad et les achemine vers une Apple TV. Pendant ce temps, la vue en gros plan continue à être lue sur mon iPad. Et la vue aérienne de la vidéo est diffusée sur grand écran, car c’est mon lecteur préféré. Pour changer la vidéo en cours de lecture sur le téléviseur, je peux passer d’un flux à l’autre en mettant à jour le lecteur préféré pour qu’il soit le flux en gros plan, et les deux vidéos changeront de place. Sur cette app iPad, cela se fait en appuyant sur le bouton étoile, qui définit la vidéo en gros plan comme lecteur préféré. Je le sélectionne. Le gros plan sera diffusé sur le téléviseur, et la vue aérienne sur l’iPad. Et je peux faire une pause et lancer la lecture. Si les flux sont coordonnés, ils resteront synchronisés. Voici un exemple de scénario de lecture coordonnée. Les flux multivue non coordonnés fonctionnent aussi de manière transparente avec AirPlay. AVRoutingPlaybackArbiter, qui fait partie du framework AVRouting, vous permet d’intégrer facilement la prise en charge d’AirPlay pour des expériences multivue. L’arbitre de lecture s’assure que le multivue fonctionne bien avec AirPlay ou d’autres expériences de lecture externes ne prenant en charge qu’un seul flux vidéo ou audio. Il gère les complexités du passage au flux vidéo ou audio approprié. AVRoutingPlaybackArbiter gère et applique les préférences sur les chemins audio non mixables. Il s’agit de chemins audio où un seul flux audio peut être lu et où la lecture audio simultanée sur le récepteur n’est pas possible. L’arbitre de lecture gère également les chemins vidéo de lecture externes contraints. Il s’agit de chemins où un seul flux vidéo peut être lu sur le récepteur, comme avec la vidéo AirPlay et les adaptateurs Lightning AV numériques. Dans un cas de lecture multivue, comme avec les vidéos du train, je peux avoir une vidéo à vol d’oiseau et plusieurs gros plans. Je veux que la vue aérienne soit prioritaire quand je lis une vidéo par AirPlay. D’abord, j’obtiens l’instance singleton de l’arbitre de lecture. Ensuite, je définis la vue aérienne sur une propriété de l’arbitre de lecture, preferredParticipantForExternalPlayback. Désormais, si j’achemine ma vidéo vers une Apple TV depuis mon iPad tout en lisant du contenu multivue, la vue aérienne achemine sa vidéo vers l’Apple TV et les autres vidéos sont lues localement sur mon iPad. De même, s’il y a plusieurs lecteurs et que la vue aérienne doit avoir la priorité audio, obtenez d’abord le singleton de l’arbitre de lecture et définissez le lecteur de la vue aérienne comme preferredParticipant ForNonMixableAudioRoutes. Si du contenu multivue est en cours de lecture et que j’achemine l’audio vers un HomePod depuis mon iPad, l’audio de la vue aérienne est diffusé. Voyons un exemple d’utilisation de cette API. D’abord, je configure deux AVPlayers, l’un en gros plan et l’autre en vue aérienne. Puis, j’obtiens le singleton de l’arbitre de lecture à partir d’une instance d’AVRoutingPlaybackArbiter. Je veux voir la vue aérienne sur le grand écran quand j’accède à AirPlay. Je le définis donc comme participant privilégié pour la lecture externe, et je veux entendre son audio si j’utilise un HomePod. Je le définis donc aussi comme participant privilégié pour les chemins audio non mixables. Dans cet exemple, j’ai choisi le même lecteur pour les deux propriétés, mais des lecteurs différents sont possibles. Grâce à AVRoutingPlaybackArbiter, assurez une intégration transparente d’AirPlay et d’autres expériences de lecture audio et vidéo externes dans votre app multivue. Voyons maintenant comment gérer la qualité de ces flux. Lorsque vous regardez du contenu multivue, certains flux peuvent être plus importants que d’autres. Par exemple, lorsque vous regardez un match en mode multivue, un flux peut être une vue aérienne du terrain. Deux autres flux peuvent être des perspectives différentes du terrain, et un autre peut être une vue en gros plan de la foule.

Dans cet exemple, la vue aérienne du terrain m’intéresse davantage. Je veux la voir plus clairement et à un niveau de qualité supérieur. Les gros plans de la foule m’intéressent moins. Je n’ai pas besoin de les voir en détail. Ils peuvent donc être lus à une qualité inférieure. Dans un scénario multivue, différents lecteurs peuvent nécessiter une qualité différente. Pour ce faire, définissez networkResourcePriority d’AVPlayer. Voyons de plus près comment cela fonctionne. Lors du streaming de contenu, chaque lecteur consomme de la bande passante réseau. Si ces lecteurs étaient de taille égale, vous voudriez peut-être que chacun consomme une quantité égale de bande passante réseau et lisent à la même qualité. Mais chaque lecteur peut nécessiter une bande passante réseau et une qualité distinctes. Pour ce faire, définissez networkResourcePriority d’AVPlayer. Chaque lecteur commence avec un niveau de priorité par défaut. Vous pouvez définir ce niveau sur élevé ou faible. Un niveau de priorité élevé signifie que le lecteur nécessite beaucoup de ressources réseau et que le streaming dans une résolution de haute qualité est crucial. Un niveau de priorité bas signifie que le lecteur nécessite une bande passante réseau minimale et que le streaming dans une résolution de haute qualité n’est pas aussi important.

Voyons un exemple de la façon d’y parvenir avec networkResourcePriority. Tout d’abord, créez un AVPlayer, puis définissez la networkResourcePriority du lecteur. Dans l’exemple du match, la vue aérienne sur le terrain est la plus importante. Sa priorité est donc élevée. La vue en gros plan de la foule est moins importante. Sa priorité est donc basse. La vue aérienne sur le terrain aura donc une priorité réseau plus élevée que la vue en gros plan de la foule. Ces priorités réseau permettent d’indiquer la priorité du lecteur lorsque le système alloue des ressources de bande passante réseau. La répartition exacte de la bande passante réseau prend en compte divers autres facteurs tels que le nombre d’autres lecteurs, la taille de la couche vidéo, les contraintes matérielles, etc. Voyons une démo des priorités du réseau en action. Dans cet exemple, j’utilise l’exemple multivue du train, qui peut se transposer à l’exemple de match et à d’autres scénarios multivue, où différentes qualités de lecture sont requises. Je regarde deux flux différents : une vue aérienne de la voie ferrée et une vue en gros plan du train. Je veux regarder le train sans manquer un seul instant. La vue aérienne doit donc être très nette. Je définis une priorité élevée pour les ressources réseau de la vue aérienne. Les deux vidéos sont actuellement lues en haute résolution. Les balises de résolution se trouvent en bas des vidéos. En cas de mauvaises conditions réseau et de bande passante réseau limitée, la vue en gros plan de droite passera d’abord à une résolution inférieure. C’est ce qui se passe maintenant. La vue aérienne, plus importante, à gauche conserve une résolution haute définition. En définissant la priorité des ressources réseau d’un lecteur, vous avez un meilleur contrôle sur la qualité de lecture d’un flux. AVFoundation et l’API AVRouting dont j’ai parlé interagissent pour vous permettre de créer des expériences multivue transparentes. Maintenant que vous avez vu ces fonctionnalités multivue avancées impliquant la coordination de la lecture, l’intégration d’AirPlay et l’optimisation de la qualité, développez et améliorez votre propre app avec multivue. Utilisez AVPlaybackCoordinationMedium pour créer des expériences multivue synchronisées engageantes. Synchronisez plusieurs angles de caméra de votre événement sportif préféré. Découvrez AVRoutingPlaybackArbiter pour améliorer une app multivue grâce à l’intégration d’AirPlay. Diffusez la lecture multi-flux, comme les flux ASL, sur grand écran. Affinez et optimisez la qualité de lecture grâce à l’allocation de bande passante réseau. Assurez-vous que les flux importants sont lus en haute qualité. Nous sommes impatients de voir toutes les expériences de lecture multivue passionnantes que vous allez créer. Merci de votre attention.