Vue d'ensemble

Afficher les indicateurs d'observabilité fusionnés s'affichent en haut de l'interface utilisateur de l'appel, ce qui vous permet de consulter en temps réel les données de qualité pendant une session. En fonction de ce que vous observez, vous pouvez définir des seuils ultérieurement (par exemple, afficher un message indiquant une mauvaise connexion lorsque networkDegradationSource est .local).

Afficher les statistiques dans l'interface utilisateur

Utilisez un petit ObservabilityStats modèle dans votre projet destiné à contenir les champs de superposition (bande passante, perte de paquets, source de dégradation, étiquettes d'état du réseau).

1. Vues de l'éditeur hôte et de l'abonné

Réutiliser un UIViewRepresentable « wrapper » (comme dans le Les bases du chat vidéo (Swift) (tutoriel) pour intégrer OTPublisher et OTSubscriber vues dans SwiftUI :

struct VideoCallView: View {
    @ObservedObject var videoManager: VonageVideoManager

    var body: some View {
        ZStack {
            VStack {
                if let pubView = videoManager.pubView {
                    Wrap(view: pubView)
                        .frame(height: 200)
                }
                if let subView = videoManager.subView {
                    Wrap(view: subView)
                        .frame(maxHeight: .infinity)
                }
            }

            if let stats = videoManager.latestObservabilityStats {
                StatsOverlay(stats: stats)
            }
        }
    }
}

2. Superposition des statistiques

struct StatsOverlay: View {
    let stats: ObservabilityStats

    var body: some View {
        VStack(alignment: .leading, spacing: 4) {
            Text("Observability")
                .font(.headline)
            Text(stats.summaryLines.joined(separator: "\n"))
                .font(.system(.caption, design: .monospaced))
        }
        .padding(12)
        .background(.black.opacity(0.6))
        .foregroundColor(.white)
        .cornerRadius(8)
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
        .padding()
    }
}

Fil @Published var latestObservabilityStats sur VonageVideoManager Ainsi, SwiftUI se rafraîchit lorsque les callbacks des délégués mettent à jour l'état sur la file d'attente principale.

3. Cycle de vie d'une application iOS

Suivant : Lancez l'application avec un deuxième participant et vérifiez que les mises à jour de la superposition s'affichent correctement.