Rendu vidéo personnalisé

Vue d'ensemble

L'API Video de Vonage permet d'apporter des modifications au moteur de rendu vidéo afin de l'utiliser dans les applications Android et iOS.

Ce mode d'emploi aborde les points suivants :

• Apportez des modifications au moteur de rendu vidéo dans votre application Android Vonage Video.
• Apportez des modifications au moteur de rendu vidéo dans votre application iOS Vonage Video.

Android

Avant de commencer

Ce mode d'emploi montre le code nécessaire pour apporter des modifications mineures au moteur de rendu vidéo utilisé par une application Subscriber objet.

Vous pouvez également utiliser les mêmes techniques pour modifier le moteur de rendu vidéo utilisé par un fichier Publisher (bien que cet exemple n'illustre qu'un moteur de rendu personnalisé pour un abonné).

Le code de cette section est disponible dans le projet Basic-Video-Renderer-Java du projet opentok-android-sdk-samples repo. Si vous ne l'avez pas encore fait, vous devrez cloner le repo dans un répertoire local. Sur la ligne de commande, exécutez :

Ouvrir le Basic-Video-Renderer-Java dans Android Studio.

Explorer le code

Dans cet exemple, l'application utilise un moteur de rendu vidéo personnalisé pour afficher une version en couleurs inversées de la vidéo.

InvertedColorsVideoRenderer est une classe personnalisée qui étend la classe BaseVideoRenderer (définie dans le SDK Android). La classe BaseVideoRenderer vous permet de définir un moteur de rendu vidéo personnalisé qui sera utilisé par un éditeur ou un abonné Vonage Video :

Les InvertedColorsVideoRenderer() définit un renderer à une propriété GLSurfaceView objet. L'application utilise cet objet pour afficher la vidéo à l'aide d'OpenGL ES 2.0. Le moteur de rendu de cet objet GLSurfaceView est défini comme étant un MyRenderer objet. MyRenderer est une classe personnalisée qui étend GLSurfaceView.Rendereret il est utilisé pour rendre la vidéo à l'écran. GLSurfaceView objet :

Les onFrame() du moteur de rendu vidéo est héritée de la méthode BaseVideoRenderer classe. Les BaseVideoRenderer.onFrame() est appelée lorsque l'éditeur (ou l'abonné) rend une image vidéo au moteur de rendu vidéo.

Les InvertedColorsVideoRenderer de cette méthode, elle prend le tampon d'image de la trame (YUV de la représentation du cadre), la transmet à la fonction displayFrame de la méthode MyRenderer et appelle l'objet requestRender() de la méthode GLSurfaceView objet :

Pour effectuer le rendu des images vidéo, la classe de rendu utilise des shaders OpenGL. Dans cet exemple, le shader produit l'effet de couleur inversée, plus précisément par cette ligne qui se trouve à l'intérieur de la section fragmentShaderCode chaîne de caractères :

iOS

Avant de commencer

Ce mode d'emploi montre le code nécessaire pour apporter des modifications mineures au moteur de rendu vidéo utilisé par une application OTPublisher objet.

Vous pouvez également utiliser les mêmes techniques pour modifier le moteur de rendu vidéo utilisé par un fichier OTSubscriber (bien que cet exemple n'illustre qu'un moteur de rendu personnalisé pour un éditeur).

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

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

Installez ensuite la dépendance vidéo de Vonage :

Ouvrez le projet dans Xcode pour le suivre.

Explorer le 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 :

OTKBasicVideoRender est une classe personnalisée qui met en œuvre le protocole OTVideoRender (défini dans le SDK iOS). Ce protocole vous permet de définir un moteur de rendu vidéo personnalisé qui sera utilisé par un éditeur ou un abonné Vonage Video.

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 :

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.

Les [OTVideoRender renderVideoFrame:] est appelée lorsque l'éditeur (ou l'abonné) rend une image vidéo au moteur de rendu vidéo. Le cadre est un objet OTVideoFrame (défini par le SDK iOS). Dans l'implémentation OTKCustomRenderView de cette méthode, elle prend la trame et la transmet à l'objet [renderVideoFrame] de l'objet OTKCustomRenderView :

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 :

Voir aussi

• Référence de l'API Video de Vonage pour le SDK Android
• Référence du SDK iOS de l'API Video de Vonage