Skip to content


Guide d’implémentation des messages in-app SharePlay

SharePlay est une fonctionnalité qui permet aux utilisateurs iOS 15 FaceTime de bénéficier d’une expérience multimédia partagée sur leurs appareils, offrant une synchronisation audio et vidéo en temps réel. SharePlay est un excellent moyen pour les utilisateurs de partager du contenu avec leurs amis et leur famille, offrant aux clients Braze une possibilité supplémentaire pour le contenu vidéo et des opportunités de présenter votre application à de nouveaux utilisateurs.

SharePlay

Aperçu

Le nouveau framework GroupActivities publié par Apple dans le cadre de la mise à jour iOS 15 vous permet de tirer parti de FaceTime en intégrant SharePlay dans vos applications à l’aide des messages in-app Braze. SharePlay

Lorsque les utilisateurs lancent une vidéo SharePlay dans un appel FaceTime, un bouton « Open » (Ouvrir) apparaît en haut de l’écran de tout le monde. Une fois ouvert, l’audio et la vidéo sont synchronisés sur tous les appareils compatibles, ce qui permet aux utilisateurs de regarder des vidéos ensemble en temps réel. Les personnes qui n’ont pas téléchargé l’application seront redirigées vers l’App Store.

Lecture multimédia synchronisée
Avec la lecture multimédia synchronisée, si une personne met en pause la vidéo SharePlay, elle sera mise en pause sur tous les appareils.

SharePlay

Intégration

Le message in-app utilisé dans cette intégration est un contrôleur de vue modal de message in-app sous-classé. Un guide de configuration est disponible dans le guide d’implémentation du cas d’utilisation avancé des messages in-app iOS. Avant de procéder à l’intégration, assurez-vous d’ajouter le droit GroupActivities à votre projet Xcode.

Étape 1 : Remplacer et charger le XIB

1
2
3
4
5
6
7
8

override var nibName: String {
  return "ModalVideoViewController"
}

/// Overriding loadView() from ABKInAppMessageModalViewController to provide our own view for the in-app message
override func loadView() {
  Bundle.main.loadNibNamed(nibName, owner: self, options: nil)
}

Étape 2 : Configurer AVPlayer pour les messages in-app

Les messages in-app peuvent lire des vidéos nativement avec un travail de développement léger. Vous avez ainsi accès à toutes les fonctionnalités d’AVPlayerVideoController, comme SharePlay. Le message in-app utilisé pour cet exemple est un ABKInAppMessageModalViewController sous-classé qui dispose d’une vue personnalisée pour intégrer un lecteur vidéo natif.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

func configureVideoPlayer() {
  guard let urlString = inAppMessage.extras?["video_url"] as? String,
        let url = URL(string: urlString) else { return }

  let videoTitle = inAppMessage.extras?["video_title"] as? String
  mediaItem = MediaItem(title: videoTitle ?? "Video Content", url: url)

  let asset = AVAsset(url: url)
  let playerItem = AVPlayerItem(asset: asset)
  player.replaceCurrentItem(with: playerItem)
  playerViewController.player = player

  addChild(playerViewController)
  videoPlayerContainer.addSubview(playerViewController.view)
  playerViewController.didMove(toParent: self)
}

Configuration du tableau de bord

Paires clé-valeur : Le fichier vidéo doit être défini dans les paires clé-valeur du message in-app et ne peut pas être attaché à l’élément multimédia lui-même. Vous pouvez également ajouter une vérification de validité d’URL dans beforeInAppMessageDisplayed comme garde-fou avant d’afficher le contenu.

Déclenchement : Le message in-app doit être éligible pour tous les utilisateurs avec la rééligibilité activée. Pour cela, définissez deux déclencheurs : un déclencheur par défaut pour lancer le message et un autre pour le lancer lorsqu’il est initié depuis SharePlay. Les utilisateurs ne disposant pas d’iOS 15 ne pourront voir les messages que localement.

Étape 3 : Créer une activité de visionnage en groupe

Créez un objet conforme au protocole GroupActivity. L’objet constituera les métadonnées de la GroupSession partagée tout au long du cycle de vie SharePlay.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

struct MediaItem: Hashable, Codable {
  let title: String
  let url: URL
}

@available(iOS 15, *)
struct MediaItemActivity: GroupActivity {
  static let activityIdentifier = "com.book-demo.GroupWatching"

  let mediaItem: MediaItem

  var metadata: GroupActivityMetadata {
    var metadata = GroupActivityMetadata()
    metadata.type = .watchTogether
    metadata.title = mediaItem.title
    metadata.fallbackURL = mediaItem.url
    return metadata
  }
}

Préparer la lecture

Lorsque vous préparez la lecture de l’élément multimédia, chaque activité de groupe possède trois états pour prepareForActivation() :

  • .activationDisabled — visionnage individuel
  • .activationPreferred — visionnage partagé
  • .cancelled — ignorer et gérer de manière élégante

Lorsque l’état revient en tant que activationPreferred, c’est votre signal pour activer le reste du cycle de vie de l’activité de groupe.

SharePlay

Étape 4 : Lancer le message in-app depuis l’API SharePlay

L’API GroupActivities détermine si une vidéo est présente. Si c’est le cas, vous devez déclencher l’événement personnalisé pour lancer votre message in-app compatible SharePlay. Le CoordinationManager est responsable des changements d’état de SharePlay, par exemple lorsque le ou les utilisateurs quittent ou rejoignent l’appel.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

private var subscriptions = Set<AnyCancellable>()
private var selectedMediaItem: MediaItem? {
  didSet {
    // Ensure the UI selection always represents the currently playing media.
    guard let _ = selectedMediaItem else { return }

    if !BrazeManager.shared.inAppMessageCurrentlyVisible {
      BrazeManager.shared.logCustomEvent("SharePlay Event")
    }
  }
}

private func launchVideoPlayerIfNecessary() {
  CoordinationManager.shared.$enqueuedMediaItem
      .receive(on: DispatchQueue.main)
      .compactMap { $0 }
      .assign(to: \.selectedMediaItem, on: self)
      .store(in: &subscriptions)
}

Étape 5 : Quitter une session de groupe lors de la fermeture du message in-app

Lorsque le message in-app est fermé, c’est le moment approprié pour quitter la session SharePlay et abandonner l’objet de session.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

override func viewDidDisappear(_ animated: Bool) {
  super.viewDidDisappear(animated)
  groupSession?.leave()
  CoordinationManager.shared.leave()
}

class CoordinationManager() {
...
  // Published values that the player, and other UI items, observe.
  @Published var enqueuedMediaItem: MediaItem?
  @Published var groupSession: GroupSession<MediaItemActivity>?

  // Clear activity when the user leaves
  func leave() {
    groupSession = nil
    enqueuedMediaItem = nil
  }
...
}

Configurer la visibilité du bouton SharePlay

Il est recommandé de masquer ou d’afficher dynamiquement tout indicateur SharePlay. Utilisez la variable isEligibleForGroupSession pour observer si l’utilisateur est actuellement en appel FaceTime ou non. S’il est en appel FaceTime, un bouton doit être visible pour partager la vidéo sur les appareils compatibles dans le chat. La première fois que l’utilisateur lance SharePlay, une invite apparaîtra sur l’appareil d’origine pour sélectionner les options. Une invite ultérieure apparaîtra ensuite sur les appareils des autres utilisateurs pour accéder au contenu partagé.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

private var isEligibleForSharePlay: Bool = false {
  didSet {
    sharePlayButton.isHidden = !isEligibleForSharePlay
  }
}

override func viewDidLoad() {
  super.viewDidLoad()

  // SharePlay button eligibility
  groupStateObserver.$isEligibleForGroupSession
    .receive(on: DispatchQueue.main)
    .assign(to: \.isEligibleForSharePlay, on: self)
    .store(in: &subscriptions)
}
New Stuff!