Benutzerdefiniertes Video-Rendering (iOS)

Übersicht

Dieses Tutorial führt Sie durch die Schritte, die erforderlich sind, um geringfügige Änderungen am Video-Renderer vorzunehmen, der von einem OTPublisher-Objekt verwendet wird. Sie können dieselben Techniken auch anwenden, um den Video-Renderer zu ändern, der von einem OTSubscriber-Objekt verwendet wird (obwohl dieses Beispiel nur einen benutzerdefinierten Renderer für einen Publisher veranschaulicht).

Einrichten Ihres Projekts

Der Code für diesen Abschnitt befindet sich in der Grundlegender Video-Renderer Projekt des Repo „opentok-ios-sdk-samples“Wenn Sie es also noch nicht getan haben, müssen Sie das Repo in ein lokales Verzeichnis klonen - Dies kann über die Befehlszeile erfolgen:

git clone https://github.com/opentok/opentok-ios-sdk-samples.git

Wechseln Sie in das Verzeichnis des Basic Video Renderer-Projekts:

cd opentok-ios-sdk-samples/Basic-Video-Renderer

Installieren Sie anschließend die OpenTok-Abhängigkeit:

pod install

Öffnen Sie das Projekt in Xcode, um es zu verfolgen.

Den Code erkunden

In diesem Beispiel verwendet die Anwendung einen benutzerdefinierten Video-Renderer, um eine Schwarz-Weiß-Version des Videos des OTPublisher-Objekts anzuzeigen.

Im Haupt-ViewController wird nach der Initialisierung des OTPublisher-Objekts die videoRender Eigenschaft des OTPublisher-Objekts auf eine Instanz von OTKBasicVideoRender gesetzt wird:

_publisher = [[OTPublisher alloc] initWithDelegate:self settings:settings];
_renderer = [[OTKBasicVideoRender alloc] init];
_publisher.videoRender = _renderer;

OTKBasicVideoRender ist eine benutzerdefinierte Klasse, die das OTVideoRender-Protokoll (definiert im OpenTok iOS SDK) implementiert. Mit diesem Protokoll können Sie einen benutzerdefinierten Video-Renderer definieren, der von einem OpenTok-Publisher oder -Subscriber verwendet wird.

Die [OTKBasicVideoRender init:] Methode setzt eine _renderView Eigenschaft auf ein UIView-Objekt. Dies ist das UIView-Objekt, das die (vom Herausgeber oder Abonnenten) zu rendernde Ansicht enthält. In diesem Beispiel wird das UIView-Objekt durch die benutzerdefinierte Klasse OTKCustomRenderView definiert, die UIView erweitert:

- (id)init
{
    self = [super init];
    if (self) {
        _renderView = [[OTKCustomRenderView alloc] initWithFrame:CGRectZero];
    }
    return self;
}

Die Klasse OTKCustomRenderView enthält Methoden (die später besprochen werden), die ein Videobild in eine Schwarz-Weiß-Darstellung umwandeln.

Die Methode [OTVideoRender renderVideoFrame:] wird aufgerufen, wenn der Publisher (oder Subscriber) ein Video-Frame an den Video-Renderer übergibt. Das Frame ist ein OTVideoFrame-Objekt (definiert durch das OpenTok iOS SDK). In der OTKCustomRenderView-Implementierung dieser Methode wird das Bild einfach entgegengenommen und an den [renderVideoFrame] Methode des OTKCustomRenderView-Objekts:

- (void)renderVideoFrame:(OTVideoFrame*) frame
{
    [(OTKCustomRenderView*)self.renderView renderVideoFrame:frame];
}

Die [OTKCustomRenderView renderVideoFrame] Methode durchläuft die Pixel in der Ebene, stellt jedes Pixel auf einen Schwarz-Weiß-Wert ein und fügt den Wert in einen Puffer ein. Anschließend schreibt sie den Puffer in eine CGImageRef, die das Bild der Ansicht darstellt, und ruft [self setNeedsDisplay] um die Bildansicht zu rendern:

- (void)renderVideoFrame:(OTVideoFrame *)frame
{
    __block OTVideoFrame *frameToRender = frame;
    dispatch_sync(self.renderQueue, ^{
        if (_img != NULL) {
            CGImageRelease(_img);
            _img = NULL;
        }

        size_t bufferSize = frameToRender.format.imageHeight
          * frameToRender.format.imageWidth * 3;
        uint8_t *buffer = malloc(bufferSize);

        uint8_t *yplane = [frameToRender.planes pointerAtIndex:0];

        for (int i = 0; i < frameToRender.format.imageHeight; i++) {
            for (int j = 0; j < frameToRender.format.imageWidth; j++) {
                int starting = (i * frameToRender.format.imageWidth * 3) + (j * 3);
                uint8_t yvalue = yplane[(i * frameToRender.format.imageWidth) + j];
                // If in a RGB image we copy the same Y value for R, G and B
                // we will obtain a Black & White image
                buffer[starting] = yvalue;
                buffer[starting+1] = yvalue;
                buffer[starting+2] = yvalue;
            }
        }

        CGDataProviderRef imgProvider = CGDataProviderCreateWithData(NULL,
                                                                     buffer,
                                                                     bufferSize,
                                                                     release_frame);

        _img = CGImageCreate(frameToRender.format.imageWidth,
                             frameToRender.format.imageHeight,
                             8,
                             24,
                             3 * frameToRender.format.imageWidth,
                             CGColorSpaceCreateDeviceRGB(),
                             kCGBitmapByteOrder32Big | kCGImageAlphaNone,
                             imgProvider,
                             NULL,
                             false,
                             kCGRenderingIntentDefault);


        CGDataProviderRelease(imgProvider);
        dispatch_async(dispatch_get_main_queue(), ^{
            [self setNeedsDisplay];
        });
    });
}

Herzlichen Glückwunsch! Du hast das Tutorial zum benutzerdefinierten Rendern von Videos für iOS abgeschlossen.
Du kannst den Code, den du hier entwickelt hast, weiter ausprobieren und anpassen oder dir die Nächste Schritte unten.

Nächste Schritte

Wenn Sie hier fertig sind, können Sie Ihre OpenTok-Application mit diesen hilfreichen Ressourcen weiter ausbauen und verbessern: