Skip to content


Guia de implementação de mensagem no app do SharePlay

O SharePlay é um recurso recém-lançado no iOS 15, que proporciona aos usuários do FaceTime uma experiência de compartilhamento de mídias entre seus dispositivos, com sincronização de áudio e vídeo em tempo real. O SharePlay é uma ótima maneira para os usuários experimentarem conteúdo com amigos e familiares, oferecendo aos clientes da Braze uma via adicional para conteúdo de vídeo e oportunidades para apresentar novos usuários ao seu aplicativo.

SharePlay

Visão geral

O novo framework GroupActivities lançado pela Apple como parte da atualização do iOS 15 permite que você aproveite o FaceTime integrando o SharePlay em seus apps com a ajuda de mensagens no app da Braze. SharePlay

Quando os usuários iniciam um vídeo do SharePlay em uma chamada FaceTime, um botão “Abrir” aparecerá no topo da tela de todos. Quando aberto, áudio e vídeo serão sincronizados em todos os dispositivos compatíveis, permitindo que os usuários assistam a vídeos juntos em tempo real. Aqueles que não tiverem o app baixado serão redirecionados para a App Store.

Reprodução de mídia sincronizada
Com a reprodução de mídia sincronizada, se uma pessoa pausar o vídeo do SharePlay, ele será pausado em todos os dispositivos.

SharePlay

Integração

A mensagem no app usada nesta integração é um controlador modal de subclasse de visualização de mensagens no app. Consulte instruções de configuração no guia de implementação, na seção sobre o caso de uso avançado de mensagens no app do iOS. Antes de fazer a integração, adicione a permissão GroupActivities ao seu projeto do Xcode.

Etapa 1: Substituição e carregamento do 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)
}

Etapa 2: Configurar AVPlayer para mensagens no app

As mensagens no app podem reproduzir vídeos de forma nativa com um trabalho leve de desenvolvimento. Ao fazer isso, você tem acesso a todos os recursos do AVPlayerVideoController, como o SharePlay. A mensagem no app usada para este exemplo é uma subclasse ABKInAppMessageModalViewController que tem uma visualização personalizada para incorporar um reprodutor de vídeo nativo.

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)
}

Configuração do dashboard

Pares de chave-valor: O arquivo de vídeo deve ser configurado nos pares de chave-valor na mensagem no app e não pode ser anexado ao item de mídia em si. Você também pode adicionar a verificação de validade de URL em beforeInAppMessageDisplayed como uma proteção antes de exibir o conteúdo.

Disparo: A mensagem no app deve ser elegível para todos os usuários com re-elegibilidade ativada. Isso pode ser feito configurando dois gatilhos: um gatilho padrão para disparar a mensagem e outro para disparar a mensagem quando iniciada pelo SharePlay. Usuários que não estiverem no iOS 15 só poderão visualizar as mensagens localmente.

Etapa 3: Criar atividade de assistir em grupo

Crie um objeto que esteja em conformidade com o protocolo GroupActivity. O objeto será os metadados do GroupSession compartilhados ao longo do ciclo de vida do 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
  }
}

Preparação para a reprodução

Na preparação para reproduzir o item de mídia, cada atividade em grupo tem três estados de prepareForActivation():

  • .activationDisabled - visualizando individualmente
  • .activationPreferred - assistindo juntos
  • .cancelled - ignorar e prosseguir com naturalidade

Quando o estado retornar como activationPreferred, esse é o seu sinal para ativar o restante do ciclo de vida da atividade em grupo.

SharePlay

Etapa 4: Abrir a mensagem no app a partir da API do SharePlay

A API GroupActivities determina se há um vídeo presente. Se houver, você deve disparar o evento personalizado para lançar sua mensagem no app compatível com SharePlay. O CoordinationManager é responsável pelas mudanças de estado do SharePlay, como a entrada e a saída de usuários na chamada.

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)
}

Etapa 5: Saída de uma sessão em grupo ao dispensar a mensagem no app

A dispensa da mensagem no app é um bom momento para sair da sessão do SharePlay e descartar o objeto da sessão.

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
  }
...
}

Configurar a visibilidade do botão SharePlay

É uma prática recomendada ocultar ou exibir dinamicamente qualquer indicador do SharePlay. Use a variável isEligibleForGroupSession para observar se o usuário está em uma chamada FaceTime ou não. Se estiver em uma chamada FaceTime, um botão deve ficar visível para compartilhar o vídeo entre os dispositivos compatíveis no chat. Na primeira vez que o usuário iniciar o SharePlay, um prompt aparecerá no dispositivo original solicitando a seleção das opções. Um prompt subsequente aparecerá então nos dispositivos dos usuários compartilhados para interagir com o conteúdo.

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!