So übernehmen Sie iOS Picture in Picture für Vonage Video-Anrufe

Mit der Veröffentlichung von iOS 15 hat Apple die Funktion "Picture in Picture" eingeführt, eine bedeutende Verbesserung für das Multitasking auf iPhones und iPads. Mit Picture in Picture können Sie Videoanrufe fortsetzen, während Sie andere Apps nutzen, was große Flexibilität und Komfort bietet. Das macht Sie produktiver und reaktionsschneller und zeigt, wie wichtig diese Funktion für die moderne Kommunikation ist.

In diesem Artikel erfahren Sie, wie Entwickler iOS Picture in Picture nutzen können, um Videoanrufe von Vonage effektiv in ihre Apps zu integrieren.

Vonage API-Konto

Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

Sind Sie bereit, mit dem Bau zu beginnen?

Erleben Sie nahtlose Konnektivität, Echtzeit-Messaging und kristallklare Sprach- und Videoanrufe - alles auf Knopfdruck.

Voraussetzungen

• A Vonage Entwickler-Konto

• A unterstützte Version von Xcode

• Installieren Sie CocoaPods

• Gerät mit iOS 15 oder höher

Benutzerdefiniertes Video-Rendering von Vonage

Bevor Sie Videoanrufe von Vonage in iOS Picture in Picture integrieren können, müssen Entwickler Videorohdaten vom Video-Renderer von Vonage abrufen und verarbeiten. Diese Daten sind für den Zugriff auf den Videostream direkt in Ihrer Anwendung unerlässlich. Beginnen wir mit dem Aufbau der Grundlage unserer Anwendung!

Folgen Sie der Anleitung, um eine einfache Video-Chat-Anwendung zu erstellen zu erstellen (geschätzte Bearbeitungszeit: 25 Minuten). Wenn Sie nicht bei Null anfangen möchten, können Sie unsere Swift-Beispielanwendung klonen auf GitHub.

Wenn Sie das Repository geklont haben, stellen Sie sicher, dass Sie die Werte für Ihre eigene App-ID, Sitzungs-ID und Token mit Ihren eigenen Werten ersetzen:

• Die App-ID ist Ihr Vonage-API-Schlüssel, den Sie auf Ihrem Dashboard finden, wenn Sie die Anwendung erstellen.

• Die Sitzungs-ID wird erstellt, wenn Sie in Ihrem Dashboard "Videositzung erstellen" wählen.

• Ein Token kann mit einem der folgenden Tools generiert werden Vonage Server SDKs indem Sie eine Sprache auswählen und das Code-Snippet unter "Generating Tokens" finden) mit Ihren eigenen Werten.

Angenommen, Sie haben CocoaPods installiert, öffnen Sie Ihr Terminal, wechseln Sie in Ihr Projektverzeichnis und geben Sie ein pod installieren. Öffnen Sie Ihr Projekt erneut in Xcode mit der .xcworkspace-Datei.

Ersetzen Sie in der Datei ViewController.swift die folgenden leeren Zeichenfolgen durch die entsprechenden Werte für API-Schlüssel, Sitzungs-ID und Token:

// *** Fill the following variables using your own Project info  ***

//  ***            https://tokbox.com/account/#/                  ***

// Replace with your OpenTok API key

let kApiKey = ""

// Replace with your generated session ID

let kSessionId = ""

// Replace with your generated token

let kToken = ""

Erstellen und starten Sie die Anwendung.

In der Beispielanwendung ViewController.swift haben Sie bereits einen Abonnenten mit OTSubscriber:

  subscriber = OTSubscriber(stream: stream, delegate: self)

Der Abonnent hat eine Eigenschaft namens videoRendermit der Sie einen benutzerdefinierten Renderer für den abonnierten Stream zuweisen können. Nun müssen Sie die Eigenschaft videoRender Eigenschaft des Abonnenten dem ExampleVideoRender Klasse, einer benutzerdefinierten Klasse, die die OTVideoRender Protokoll implementiert (definiert im iOS SDK). Mit diesem Protokoll können Sie einen benutzerdefinierten Video-Renderer definieren, der von einem Vonage Video-Publisher oder -Abonnenten verwendet wird.

   let videoRender = ExampleVideoRender()
   subscriber?.videoRender = videoRender

Für kontinuierliches Video-Streaming müssen Sie die willResignActiveNotification aus dem Abonnenten entfernen. Dadurch kann die Anwendung den Video-Stream-Betrieb aufrechterhalten, auch wenn sie im Hintergrund läuft.

NotificationCenter.default.removeObserver(subscriber, name: UIApplication.willResignActiveNotification, object: nil)

Die BeispielVideoRender Klasse verarbeitet die eingehenden Videostromdaten und stellt sicher, dass die Videobilder des Teilnehmers innerhalb Ihrer Anwendung abgerufen und angepasst werden können. Die renderVideoFrame Methode wird aufgerufen, wenn der Abonnent ein Video-Bild an den Video-Renderer überträgt. Das Bild ist ein OTVideoFrame Objekt (definiert durch das iOS SDK), das Videobildinformationen wie Metadaten und Ebenendaten enthält.

Seit OTVideoFrame nur YUV-Ebenendaten liefert, müssen wir sie in CMSampleBuffer konvertieren, bevor sie in UIView und Picture in Picture angezeigt werden können. Wir werden den Konvertierungsprozess später in diesem Artikel durchgehen.

Mit dem CMSampleBuffer bereit, können Sie ihn in einer bestimmten UIView abrufen und anzeigen.

let bufferDisplayLayer = videoRender.bufferDisplayLayer

bufferDisplayLayer.frame = frame

videoContainerView.layer.addSublayer(bufferDisplayLayer)

Konvertierung von YUV-Daten in Probenpuffer

YUV (YCbCr) ist ein gängiger Farbraum für Video, der Luminanz (Y) und Chrominanz (UV) getrennt darstellt. Durch das Extrahieren von YUV-Ebenendaten können Entwickler diese Komponenten manipulieren und in ein Format konvertieren, das mit dem Sample-Buffer von iOS kompatibel ist. Dies ist für die Anzeige von Videobildern im iOS-Bild-in-Bild-Modus erforderlich.

Wie oben erwähnt, können Sie die OTVideoFrame unter dem renderVideoFrame Methode abrufen, die aufgerufen wird, wenn der Abonnent ein Video-Bild rendert. Dieser Frame enthält YUV-Ebenendaten, die Entwickler verwenden können, um einen CVPixelBuffer. In diesem Schritt werden die YUV-Komponenten korrekt organisiert und dem Pixelpuffer zugeordnet.

let pixelAttributes: NSDictionary = [kCVPixelBufferIOSurfacePropertiesKey as String: [:]]

var pixelBuffer: CVPixelBuffer?

let result = CVPixelBufferCreate(kCFAllocatorDefault, width, height, kCVPixelFormatType_32BGRA, pixelAttributes as CFDictionary, &pixelBuffer)
         _ = accel.convertFrameVImageYUV(frame, to: pixelBuffer)

Als nächstes erstellen Sie CMSampleBuffer aus dem CVPixelBuffereinschließlich der erforderlichen Metadaten wie Zeitstempel und Formatbeschreibung. Diese Schritte sind entscheidend für die Vorbereitung von Video-Frames für die Anzeige im iOS-Bild-in-Bild-Modus und gewährleisten eine reibungslose Wiedergabe und die Einhaltung der iOS-Standards.

func createSampleBufferFrom(pixelBuffer: CVPixelBuffer) -> CMSampleBuffer? {
        CVPixelBufferLockBaseAddress(pixelBuffer, .readOnly)
        
        var sampleBuffer: CMSampleBuffer?
        
        
        let now = CMTimeMakeWithSeconds(CACurrentMediaTime(), preferredTimescale: 1000)
        var timingInfo = CMSampleTimingInfo(duration: CMTimeMakeWithSeconds(1, preferredTimescale: 1000), presentationTimeStamp: now, decodeTimeStamp: now)
        var formatDescription: CMFormatDescription? = nil
        CMVideoFormatDescriptionCreateForImageBuffer(allocator: kCFAllocatorDefault, imageBuffer: pixelBuffer, formatDescriptionOut: &formatDescription)
        
        let osStatus = CMSampleBufferCreateReadyWithImageBuffer(
            allocator: kCFAllocatorDefault,
            imageBuffer: pixelBuffer,
            formatDescription: formatDescription!,
            sampleTiming: &timingInfo,
            sampleBufferOut: &sampleBuffer
        )
        
        if osStatus != noErr {
            let errorMessage = osStatusToString(status: osStatus)
            print("osStatus error: \(errorMessage)")
        }
        
        guard let buffer = sampleBuffer else {
            print("Cannot create sample buffer")
            return nil
        }
        
        CVPixelBufferUnlockBaseAddress(pixelBuffer, [])
        
        return buffer
    }

Implementierung der Bild-in-Bild-Komponente

Nun, da der CMSampleBuffer fertig ist, folgen Sie diesen Schritten, um Picture in Picture für Videoanrufe hinzuzufügen:

1. Erstellen Sie eine Quellansicht, die in der Ansichtssteuerung für Videoanrufe angezeigt wird.

class SampleBufferVideoCallView: UIView {

    override class var layerClass: AnyClass {

        AVSampleBufferDisplayLayer.self

    }

    var sampleBufferDisplayLayer: AVSampleBufferDisplayLayer {

        layer as! AVSampleBufferDisplayLayer

    }

}

2. Erstellen Sie einen AVPictureInPictureVideoCallViewController und fügen Sie die Quelle als Unteransicht hinzu, um die Quellenansicht anzuzeigen.

let pipVideoCallViewController = AVPictureInPictureVideoCallViewController()

pipVideoCallViewController.preferredContentSize = CGSize(width: 640, height: 480)  

pipVideoCallViewController.view.addSubview(sampleBufferVideoCallView)

3. Erstellen Sie eine AVPictureInPictureController.ContentSource die die Quelle des Inhalts darstellt, den das System in der Datei ViewController.swift anzeigt.

let contentSource = AVPictureInPictureController.ContentSource(

            activeVideoCallSourceView: videoContainerView,

            contentViewController: pipVideoCallViewController)

4. Initialisieren AVPictureInPictureController und setze canStartPictureInPictureAutomaticallyFromInline auf wahr.

pipController = AVPictureInPictureController(contentSource: contentSource)   

pipController.canStartPictureInPictureAutomaticallyFromInline = true

Mit der obigen Einrichtung sollte Ihre Anwendung für den Picture in Picture-Modus bereit sein. Sie können sehen, dass der Videoanruf startet, wenn ein Benutzer in den Hintergrund wechselt. Wenn Sie es nicht sehen, überprüfen Sie den Picture in Picture-Modus in Ihren iPhone/iPad-Einstellungen, um zu sehen, ob er aktiviert ist.

iOS Demo

Zusammenfassung des Integrationsprozesses

Die Integration der Videoanrufe von Vonage in iOS Picture in Picture verbessert das Multitasking und ermöglicht es den Benutzern, Videoanrufe ohne Unterbrechung fortzusetzen, während sie andere Apps nutzen. Diese Fähigkeit steigert die Produktivität, insbesondere bei professionellen Meetings und gemeinsamer Arbeit.

Weitere Details und den vollständigen Code für die Picture in Picture Sample App finden Sie in unserem GitHub-Repositorium.

Wenn Sie Fragen haben, treten Sie unserem Gemeinschaft Slack oder senden Sie uns eine Nachricht auf X, früher bekannt als Twitter.

Zusätzliche Ressourcen

• Grundlegende Vonage Video API-Funktionalität

• APIs in Bezug auf Vonage Video