Personnalisation de l'interface utilisateur — iOS

Voici les réglages que vous pouvez effectuer pour personnaliser l'interface utilisateur des vidéos OpenTok :

Ajouter un nom à un flux publié

Pour spécifier la propriété du nom du flux publié, définissez la propriété name de l'objet OTPublisherSettings que vous utilisez lors de l'initialisation d'un éditeur :

OTPublisherSettings *_publisherSettings = [[OTPublisherSettings alloc] init];
_publisherSettings.name = @"Juan";
_publisher = [[OTPublisher alloc]
              initWithDelegate:self
              settings:_publisherSettings];

La classe OTStream possède une fonction name propriété. Lorsque vous s'abonner à un fluxvous pouvez afficher ce nom dans un élément de l'interface utilisateur. (Ce nom s'affiche également lorsque la vidéo se trouve dans une page web qui utilise la bibliothèque OpenTok.js).

Ne pas utiliser d'informations personnelles dans le champ "nom" de l'éditeur. — Le nom de l'éditeur peut être visible par les autres participants à la session et peut également apparaître dans l'outil « Inspector » ainsi que dans les journaux internes de Vonage ; par conséquent, vous ne devez en aucun cas utiliser d'informations sensibles ou personnelles non chiffrées dans le nom de l'éditeur. Consultez les bonnes pratiques en matière de sécurité.

Ajout d'un bouton de mise en sourdine pour un éditeur

Il n'y a pas d'élément d'interface utilisateur par défaut pour couper le microphone de l'éditeur. Cependant, vous pouvez ajouter un élément, tel qu'un bouton, qui active la fonction publishAudio de l'objet OTPublisher lorsque l'utilisateur clique dessus. Définir la propriété publishAudio à la propriété NO pour mettre l'éditeur en sourdine :

publisher.publishAudio = NO;

Régler le publishAudio à la propriété YES pour publier des documents audio.

publisher.publishAudio = YES;

À titre d'exemple, consultez l'exemple « Project 4: Overlay Graphics » dans le répertoire « samples » du SDK OpenTok pour iOS (ou à l'adresse opentok-ios-sdk-échantillons (référentiel sur GitHub).

Ajout d'un bouton de mise en sourdine pour un abonné

Il n'y a pas d'élément d'interface utilisateur par défaut pour couper le son de l'abonné. Toutefois, vous pouvez ajouter un élément, tel qu'un bouton, qui active la fonction subscribeToAudio de l'objet OTSubscriber lorsque l'utilisateur clique dessus. Définir l'objet subscribeToAudio à la propriété NO pour mettre l'abonné en sourdine

subscriber.subscribeToAudio = NO;

Régler le subscribeToAudio à la propriété YES pour s'abonner à l'audio (s'il y a un flux audio) :

subscriber.subscribeToAudio = YES;

À titre d'exemple, consultez l'exemple « Project 4: Overlay Graphics » dans le répertoire « samples » du SDK OpenTok pour iOS (ou à l'adresse opentok-ios-sdk-échantillons (référentiel sur GitHub).

Ajout d'un bouton permettant de basculer l'appareil photo de l'éditeur

Il n'y a pas d'élément d'interface utilisateur par défaut pour basculer la caméra utilisée par l'éditeur. Cependant, vous pouvez ajouter un élément, tel qu'un bouton, qui définit l'option cameraPosition de l'objet OTPublisher. Définissez la propriété à une valeur définie dans l'enum AVCaptureDevicePosition. Par exemple, le code suivant définit l'éditeur de manière à ce qu'il utilise la caméra arrière :

publisher.cameraPosition = AVCaptureDevicePositionBack;

Il convient de noter que le cameraPosition n'est pas disponible dans la classe OTPublisherKit. Si vous utilisez la classe OTPublisherKit pour mettre en œuvre un capteur vidéo personnalisévous pouvez définir la caméra utilisée dans le code de capture vidéo personnalisé.

À titre d'exemple, consultez l'exemple « Project 4: Overlay Graphics » dans le répertoire « samples » du SDK OpenTok pour iOS (ou à l'adresse opentok-ios-sdk-échantillons (référentiel sur GitHub).

Ajustement de l'interface utilisateur lorsque la vidéo est activée ou désactivée

Lorsque la vidéo d'un abonné est désactivée, l'application [OTSubscriberKitDelegate subscriberVideoDisabled:reason :] est envoyé. Dans ce cas, vous pouvez ajouter un élément d'interface utilisateur (tel qu'une icône) pour indiquer que la vidéo a été désactivée :

- (void)subscriberVideoDisabled:(OTSubscriberKit*)subscriber
                         reason:(OTSubscriberVideoEventReason)reason
{
    // Display the video disabled indicator
}

Lorsque la vidéo d'un abonné est réactivée, la fonction [OTSubscriberKitDelegate subscriberVideoEnabled:reason :] est envoyé. Dans ce cas, vous pouvez supprimer un élément de l'interface utilisateur (tel qu'une icône) qui indique que la vidéo est réactivée :

- (void)subscriberVideoEnabled:(OTSubscriberKit*)subscriber
                        reason:(OTSubscriberVideoEventReason)reason
{
    // Remove the video disabled indicator
}

Dans les sessions qui utilisent l'option Routeur multimédia OpenTok (sessions dont le mode média est réglé sur routé), les messages suivants peuvent également être envoyés :

Vous pouvez également afficher et supprimer une notification de l'interface utilisateur (telle qu'une icône) lorsque ces messages sont envoyés.

À titre d'exemple, consultez l'exemple « Project 4: Overlay Graphics » dans le répertoire « samples » du SDK OpenTok pour iOS (ou à l'adresse opentok-ios-sdk-échantillons (référentiel sur GitHub).

Notez que lorsque vous publiez un flux, vous activez ou désactivez la fonction de repli audio pour les éditeurs et les abonnés. La fonction de repli audio désactive la vidéo (chez les éditeurs et les abonnés) lorsque les conditions du réseau ou de la CPU ne permettent pas la diffusion vidéo. Voir Solution de secours audio (iOS).

Si vous activez la solution de secours audio de l'éditeur, le PublisherKitDelegate enverra les messages suivants concernant les événements liés au repli audio de l'éditeur :

  • [OTPublisherKitDelegate publisherVideoDisabled:reason:]
  • [OTPublisherKitDelegate publisherVideoEnabled:reason:]
  • [OTPublisherKitDelegate publisherVideoDisableWarning:]
  • [OTPublisherKitDelegate publisherVideoDisableWarningLifted:]

Vous pouvez afficher des indicateurs d'interface utilisateur en réponse à ces événements.

Affichage d'un élément indicateur lorsqu'une session est en cours d'archivage

Lorsqu'une archive d'une session commence à enregistrer (ou si vous vous connectez à une session en cours d'enregistrement), l'icône [OTSessionDelegate session:archiveStartedWithId:name:] est envoyé. Lorsque l'enregistrement s'arrête, le [OTSessionDelegate session:archiveStoppedWithId:] est envoyé. Vous pouvez ajouter un élément d'interface utilisateur, tel qu'une icône affichée dans une vue OTPublisher, pour indiquer qu'une vidéo est en cours d'enregistrement :

- (void)     session:(OTSession*)session
archiveStartedWithId:(NSString*)archiveId
                name:(NSString*)name
{
    // Display the archive indicator
}

- (void)     session:(OTSession*)session
archiveStoppedWithId:(NSString*)archiveId
{
    // Hide the archive indicator
}

À titre d'exemple, consultez l'exemple « Project 5: Multi-Party-Call » dans le répertoire « samples » du SDK OpenTok pour iOS (ou à l'adresse opentok-ios-sdk-échantillons (référentiel sur GitHub).

Obtenir une image instantanée d'une vidéo

Le code suivant capture et affiche une image statique de la vidéo de l'éditeur, l'ajoute à la vue principale et définit un objet UIImage pour l'image :

UIView* screenCapture = [publisher.view
    snapshotViewAfterScreenUpdates:YES];
[self.view addSubview:screenCapture];

UIGraphicsBeginImageContextWithOptions(publisher.view.bounds.size,
    NO, [UIScreen mainScreen].scale);
[view drawViewHierarchyInRect:publisher.view.bounds
    afterScreenUpdates:YES];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

Le code suivant capture et affiche une image statique de la vidéo de l'abonné, l'ajoute à la vue principale et définit un objet UIImage pour l'image :

UIView* screenCapture = [subscriber.view
    snapshotViewAfterScreenUpdates:YES];
[self.view addSubview:screenCapture];

UIGraphicsBeginImageContextWithOptions(subscriber.view.bounds.size,
    NO, [UIScreen mainScreen].scale);
[view drawViewHierarchyInRect:subscriber.view.bounds
    afterScreenUpdates:YES];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

Pour découvrir comment obtenir une image haute résolution d'un éditeur, consultez l'exemple « Live Photo Capture » dans le Dépôt de exemples OpenTok pour iOS. Cet exemple se trouve également dans le répertoire « samples » du SDK iOS d'OpenTok.

Ajustement de l'interface utilisateur en fonction des niveaux audio

Les [OTPublisherKitAudioLevelDelegate publisher:audioLevelUpdated:] et [OTSubscriberKitAudioLevelDelegate subscriber:audioLevelUpdated:] Les messages sont envoyés à intervalles réguliers avec le niveau audio de l'abonné et de l'éditeur. Vous pouvez utiliser la fonction audioLevel pour actualiser l'affichage d'un indicateur de niveau audio.

À titre d'exemple, consultez l'exemple « Project 6: Audio Levels » dans le répertoire « samples » du SDK OpenTok pour iOS (ou à l'adresse opentok-ios-sdk-échantillons (référentiel sur GitHub).

Remarque : Le niveau audio d'un éditeur n'est disponible qu'une fois que son flux a été publié dans une session. Pour prévisualiser l'audio avant que l'éditeur ne commence à diffuser son flux vers la session, utilisez un pilote audio personnalisé.

Par défaut, pour des raisons de confidentialité, lorsque tous les éditeurs sont en sourdine, la capture audio s'arrête et le microphone est relâché. Cela signifie qu'il n'y aura plus de mises à jour du niveau audio jusqu'à ce qu'une instance d'éditeur active à nouveau l'audio. À partir de la version 2.31.0, l'éditeur est doté d'une propriété permettant de poursuivre la capture audio lorsque le son est coupé.

Lors de l'instanciation d'une nouvelle instance d'éditeur, le développeur peut activer ce comportement :


	OTPublisherKitSettings* settings = [[OTPublisherKitSettings alloc] init];
    settings.allowAudioCaptureWhileMuted = true;
	_publisher = [[OTPublisherKit alloc] initWithDelegate:self settings:settings];

Note : En activant ce comportement, le microphone sera utilisé même si l'éditeur est en sourdine.

Utilisation d'un moteur de rendu vidéo personnalisé

Les classes OTPublisher et OTSubscriber fournissent une instance UIView par défaut qui affiche la vidéo de l'éditeur ou de l'abonné. Vous pouvez utiliser l'API de flux vidéo personnalisé pour définir un moteur de rendu vidéo personnalisé, à l'aide des classes OTPublisherKit, OTSubscriberKit et OTVideoRender. Pour un exemple, consultez l'exemple « Projet 2 : Créons OTPublisher » dans le répertoire samples du SDK OpenTok pour iOS (ou à l'adresse opentok-ios-sdk-échantillons (référentiel sur GitHub).

Vous pouvez également configurer un éditeur pour qu'il utilise un capteur vidéo personnalisé.