https://d226lax1qjow5r.cloudfront.net/blog/blogposts/vonage-video-media-processor-released-for-ios-android-and-more/video-media-processor.png

Le processeur Video Media de Vonage est lancé pour iOS, Android et plus encore !

Publié le August 28, 2023

Temps de lecture : 2 minutes

L'API de traitement des médias Video est désormais disponible sur toutes les plateformes natives prises en charge (iOS, Android, Windows et macOS), ce qui vous permet d'ajouter des transformations personnalisées à votre vidéo publiée.

Par le passé, nous avons expliqué comment utiliser cette fonctionnalité du SDK JavaScript pour créer des effets tels que le flou d'arrière-plan et l'application d'un arrière-plan virtuel mais voyons maintenant comment nous pouvons créer un transformateur personnalisé dans Android et iOS pour ajouter une image superposée au flux vidéo.

Transformateurs sur mesure

Parallèlement à la sortie de cette fonctionnalité, nous proposons également un nouveau guide du développeur vous montrant comment utiliser le processeur multimédia pour créer un effet de flou d'arrière-plan ainsi que d'autres transformations personnalisées.. Voyons maintenant comment créer un effet personnalisé sur Android et iOS.

Android

Avant de commencer, assurez-vous d'avoir suivi les instructions suivantes guide de démarrage et que vous disposez d'une application de chat vidéo de base avec un objet Publisher créé.

Créer une classe qui implémente la classe PublisherKit.CustomVideoTransformer . Implémentez la méthode PublisherKit.CustomVideoTransformer.onTransform​(BaseVideoRenderer.Frame frame) méthode. La méthode PublisherKit.CustomVideoTransformer.onTransform​(BaseVideoRenderer.Frame frame) est déclenchée pour chaque image Video. Dans l'implémentation de la méthode, appliquez une transformation à l'objet image transmis à la méthode :

public class MyCustomTransformer implements PublisherKit.CustomVideoTransformer {
    @Override
    public void onTransform(BaseVideoRenderer.Frame frame) {
         // Your custom transformation
    }
}

Si nous voulions ajouter, par exemple, une image au-dessus de la Video pour servir de logo ou de filigrane, nous pourrions le faire :

public class MyCustomTransformer implements PublisherKit.CustomVideoTransformer {
        public Bitmap resizeImage(Bitmap image, int width, int height) {
            return Bitmap.createScaledBitmap(image, width, height, true);
        }

        @Override
        public void onTransform(BaseVideoRenderer.Frame frame){

            // Obtain the Y plane of the video frame
            ByteBuffer yPlane = frame.getYplane();

            // Get the dimensions of the video frame
            int videoWidth = frame.getWidth();
            int videoHeight = frame.getHeight();

            // Calculate the desired size of the image
            int desiredWidth = videoWidth / 8; // Adjust this value as needed
            int desiredHeight = (int) (image.getHeight() * ((float) desiredWidth / image.getWidth()));

            // Resize the image to the desired size
            image = resizeImage(image, desiredWidth, desiredHeight);

            int logoWidth = image.getWidth();
            int logoHeight = image.getHeight();

            // Location of the image (center of video)
            int logoPositionX = videoWidth * 1/2 - logoWidth; // Adjust this as needed for the desired position
            int logoPositionY = videoHeight * 1/2 - logoHeight; // Adjust this as needed for the desired position

            // Overlay the logo on the video frame
            for (int y = 0; y < logoHeight; y++) {
                for (int x = 0; x < logoWidth; x++) {
                    int frameOffset = (logoPositionY + y) * videoWidth + (logoPositionX + x);

                    // Get the logo pixel color
                    int logoPixel = image.getPixel(x, y);

                    // Extract the color channels (ARGB)
                    int logoAlpha = (logoPixel >> 24) & 0xFF;
                    int logoRed = (logoPixel >> 16) & 0xFF;

                    // Overlay the logo pixel on the video frame
                    int framePixel = yPlane.get(frameOffset) & 0xFF;

                    // Calculate the blended pixel value
                    int blendedPixel = ((logoAlpha * logoRed + (255 - logoAlpha) * framePixel) / 255) & 0xFF;

                    // Set the blended pixel value in the video frame
                    yPlane.put(frameOffset, (byte) blendedPixel);
                }
            }
        }
}

Passez ensuite l'objet qui implémente l'interface PublisherKit.CustomVideoTransformer dans la méthode PublisherKit.setVideoTransformers() dans la méthode

MyCustomTransformer transformer = new MyCustomTransformer();
ArrayList<PublisherKit.VideoTransformer> videoTransformers = new ArrayList<>();
videoTransformers.add(transformer);
mPublisher.setVideoTransformers(videoTransformers);

Vous pouvez combiner le transformateur de la bibliothèque Vonage Media (voir la section précédente) avec des transformateurs personnalisés ou appliquer plusieurs transformateurs personnalisés en ajoutant plusieurs objets PublisherKit.VideoTransformer à la liste ArrayList transmise à la méthode PublisherKit.setVideoTransformers() à l'aide de la liste de tableaux.

Passez ensuite l'objet qui implémente l'interface PublisherKit.CustomAudioRransformer dans la méthode PublisherKit.setAudioTransformers() dans la méthode

MyCustomAudioTransformer transformer = new MyCustomAudioTransformer();
ArrayList<PublisherKit.VideoTransformer> audioTransformers = new ArrayList<>();
audioTransformers.add(transformer);
mPublisher.setAudioTransformers(audioTransformers);

Vous pouvez appliquer plusieurs transformateurs personnalisés en ajoutant plusieurs objets PublisherKit.AudioTransformer à la liste ArrayList passée dans la méthode PublisherKit.setAudioTransformers() dans la méthode

iOS

Avant de commencer, assurez-vous d'avoir suivi les instructions suivantes guide de démarrage et que vous disposez d'une application de chat vidéo de base avec un objet OTPublisher créé.

Créez une classe qui implémente la classe OTCustomVideoTransformer . Implémentez la méthode [OTCustomVideoTransformer transform:] en appliquant une transformation à l'objet OTVideoFrame transmis à la méthode. La méthode [OTCustomVideoTransformer transform:] est déclenchée pour chaque image vidéo :

@interface CustomTransformer : NSObject <OTCustomVideoTransformer>
@end
@implementation CustomTransformer
- (void)transform:(nonnull OTVideoFrame *)videoFrame {
    // Your custom transformation
}
@end

Si nous voulions ajouter, par exemple, une image en haut de la Video pour servir de logo ou de marque d'eau, nous pourrions le faire :

@interface CustomTransformer : NSObject <OTCustomVideoTransformer>
@end
@implementation CustomTransformer
- (void)transform:(nonnull OTVideoFrame *)videoFrame {
    
    UIImage* image = [UIImage imageNamed:@"Vonage_Logo.png"];

    uint32_t videoWidth = videoFrame.format.imageWidth;
    uint32_t videoHeight = videoFrame.format.imageHeight;

    // Calculate the desired size of the image
    CGFloat desiredWidth = videoWidth / 8;  // Adjust this value as needed
    CGFloat desiredHeight = image.size.height * (desiredWidth / image.size.width);

    // Resize the image to the desired size
    UIImage *resizedImage = [self resizeImage:image toSize:CGSizeMake(desiredWidth, desiredHeight)];

    // Get pointer to the Y plane
    uint8_t* yPlane = [videoFrame getPlaneBinaryData:0];
    
    // Create a CGContext from the Y plane
    CGContextRef context = CGBitmapContextCreate(yPlane, videoWidth, videoHeight, 8, videoWidth, CGColorSpaceCreateDeviceGray(), kCGImageAlphaNone);
    
    // Location of the image (in this case right bottom corner)
    CGFloat x = videoWidth * 4/5;
    CGFloat y = videoHeight * 1/5;
    
    // Draw the resized image on top of the Y plane
    CGRect rect = CGRectMake(x, y, desiredWidth, desiredHeight);
    CGContextDrawImage(context, rect, resizedImage.CGImage);
    
    CGContextRelease(context);
}
@end

Définissez ensuite la propriété OTPublisherKit.videoTransformers à un tableau comprenant l'objet qui implémente l'interface OTCustomVideoTransformer :

CustomTransformer* logoTransformer;
logoTransformer = [customTransformer alloc];
OTVideoTransformer *myCustomTransformer = [[OTVideoTransformer alloc] initWithName:@"logo" transformer:logoTransformer];

NSMutableArray * myVideoTransformers = [[NSMutableArray alloc] init];
[myVideoTransformers addObject:myCustomTransformer];

_publisher.videoTransformers = [[NSArray alloc] initWithArray:myVideoTransformers];

Vous pouvez combiner le transformateur de la bibliothèque Vonage Media (voir la section précédente) avec des transformateurs personnalisés ou appliquer plusieurs transformateurs personnalisés en ajoutant plusieurs objets PublisherKit.VideoTransformer à la liste de tableaux utilisée pour la propriété OTPublisherKit.videoTransformers propriété.

Exemples d'applications

Vous cherchez un échantillon plus complet à tester et à expérimenter ? Nous avons ce qu'il vous faut ! Des exemples d'Applications mettant en valeur le processeur média sont disponibles pour les plateformes suivantes :

Faites-nous savoir ce que vous construisez avec le Video Media Processor de Vonage. Discutez avec nous sur notre Communauté Vonage Slack ou envoyez-nous un message sur X, anciennement connu sous le nom de Twitter.

Partager:

https://a.storyblok.com/f/270183/400x400/04765919bb/zachary-powell-1.png
Zachary PowellDéveloppeur Android senior Advocate