Rendu vidéo personnalisé (iOS)

Vue d'ensemble

Ce tutoriel vous guide à travers les étapes nécessaires pour apporter des modifications mineures au moteur de rendu vidéo utilisé par un objet OTPublisher. Vous pouvez également utiliser ces mêmes techniques pour modifier le moteur de rendu vidéo utilisé par un objet OTSubscriber (bien que cet exemple ne présente qu'un moteur de rendu personnalisé pour un éditeur).

Configuration de votre projet

Le code de cette section se trouve dans la section Renderer vidéo de base projet de la dépôt « opentok-ios-sdk-samples »Si vous ne l'avez pas encore fait, vous devrez donc cloner le repo dans un répertoire local - Ceci peut être fait en utilisant la ligne de commande:

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

Changez de répertoire pour accéder au projet Basic Video Renderer :

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

Installez ensuite la dépendance OpenTok :

pod install

Ouvrez le projet dans Xcode pour le suivre.

Découverte du code

Dans cet exemple, l'application utilise un moteur de rendu vidéo personnalisé pour afficher une version en noir et blanc de la vidéo de l'objet OTPublisher.

Dans le ViewController principal, après avoir initialisé l'objet OTPublisher, la fonction videoRender de l'objet OTPublisher est définie comme une instance d'OTKBasicVideoRender :

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

OTKBasicVideoRender est une classe personnalisée qui implémente le protocole OTVideoRender (défini dans le SDK OpenTok pour iOS). Ce protocole vous permet de définir un moteur de rendu vidéo personnalisé destiné à être utilisé par un éditeur ou un abonné OpenTok.

Les [OTKBasicVideoRender init:] définit un _renderView à un objet UIView. Il s'agit de l'objet UIView qui contiendra la vue à rendre (par l'éditeur ou l'abonné). Dans cet exemple, l'objet UIView est défini par la classe OTKCustomRenderView, qui étend UIView :

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

La classe OTKCustomRenderView comprend des méthodes (présentées plus loin) qui convertissent une image vidéo en une représentation en noir et blanc.

La méthode [OTVideoRender renderVideoFrame:] est appelée lorsque l'éditeur (ou l'abonné) transmet une image vidéo au moteur de rendu vidéo. L'image est un objet OTVideoFrame (défini par le SDK OpenTok pour iOS). Dans l’implémentation de cette méthode par OTKCustomRenderView, celle-ci se contente de récupérer l’image et de la transmettre au [renderVideoFrame] de l'objet OTKCustomRenderView :

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

Les [OTKCustomRenderView renderVideoFrame] parcourt les pixels du plan, ajuste chaque pixel à une valeur en noir et blanc, ajoute la valeur à un tampon. Elle écrit ensuite le tampon dans un CGImageRef représentant l'image de la vue, et appelle [self setNeedsDisplay] pour rendre la vue de l'image :

- (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];
        });
    });
}

Félicitations ! Vous venez de terminer le tutoriel sur le rendu vidéo personnalisé pour iOS.
Vous pouvez continuer à tester et à modifier le code que vous avez développé ici, ou consulter le Prochaines étapes ci-dessous.

Prochaines étapes

Une fois que vous aurez terminé cette étape, poursuivez le développement et l'amélioration de votre application OpenTok à l'aide des ressources utiles suivantes :