https://a.storyblok.com/f/270183/145794/333af21ca0/video-media-processor.png

O Vonage Video Media Processor já está disponível para iOS, Android e outras plataformas!

Publicado em August 28, 2023

Tempo de leitura: 2 minutos

A API do Video Media Processor já está disponível em todas as plataformas nativas compatíveis (iOS, Android, Windows e macOS), permitindo que você adicione transformações personalizadas ao seu vídeo publicado.

No passado, já falamos sobre como podemos usar essa funcionalidade no SDK do JavaScript para criar efeitos como desfoque de fundo e aplicar fundo virtual , mas vamos dar uma olhada em como agora podemos criar um transformador personalizado no Android e no iOS para adicionar uma imagem sobreposta ao feed de Video.

Transformadores personalizados

Juntamente com o lançamento desse recurso, também disponibilizamos um novo guia para desenvolvedores que mostra como usar o Media Processor para criar um efeito de desfoque de fundo, além de outras transformações personalizadas. No entanto, vamos dar uma olhada em como podemos criar um efeito personalizado no Android e no iOS.

Android

Antes de começar, certifique-se de ter seguido o guia de introdução e tenha uma configuração básica de aplicativo de videochamada com um objeto Publisher criado.

Crie uma classe que implemente o interface PublisherKit.CustomVideoTransformer . Implemente o PublisherKit.CustomVideoTransformer.onTransform​(BaseVideoRenderer.Frame frame) método. O PublisherKit.CustomVideoTransformer.onTransform​(BaseVideoRenderer.Frame frame) método é acionado para cada quadro de vídeo. Na implementação do método, aplique uma transformação ao objeto de quadro passado para o método:

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

Se quiséssemos adicionar, por exemplo, uma imagem sobre o Video para servir como logotipo ou marca d’água, poderíamos fazer o seguinte:

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

Em seguida, passe o objeto que implementa a interface PublisherKit.CustomVideoTransformer para o PublisherKit.setVideoTransformers() método:

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

É possível combinar o transformador da biblioteca de mídia da Vonage (consulte a seção anterior) com transformadores personalizados ou aplicar vários transformadores personalizados adicionando vários objetos PublisherKit.VideoTransformer à ArrayList passada para o PublisherKit.setVideoTransformers() método.

Em seguida, passe o objeto que implementa a interface PublisherKit.CustomAudioTransformer para o PublisherKit.setAudioTransformers() método:

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

É possível aplicar vários transformadores personalizados adicionando vários objetos PublisherKit.AudioTransformer à ArrayList passada para o PublisherKit.setAudioTransformers() método.

iOS

Antes de começar, certifique-se de ter seguido o guia de introdução e tenha uma configuração básica de aplicativo de videochamada com um objeto OTPublisher criado.

Crie uma classe que implemente o protocolo OTCustomVideoTransformer . Implemente o [OTCustomVideoTransformer transform:] método, aplicando uma transformação ao objeto OTVideoFrame passado para o método. O [OTCustomVideoTransformer transform:] método é acionado para cada quadro de vídeo:

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

Se quiséssemos adicionar, por exemplo, uma imagem sobre o Video para servir como logotipo ou marca d’água, poderíamos fazer o seguinte:

@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

Em seguida, defina a OTPublisherKit.videoTransformers propriedade para um array que inclua o objeto que implementa a 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];

É possível combinar o transformador da biblioteca de mídia da Vonage (consulte a seção anterior) com transformadores personalizados ou aplicar vários transformadores personalizados adicionando vários objetos PublisherKit.VideoTransformer à ArrayList usada para a OTPublisherKit.videoTransformers propriedade.

Aplicativos de exemplo

Está procurando um exemplo mais completo para testar e experimentar? Nós temos o que você precisa! Estão disponíveis exemplos de Applications que demonstram o processador de mídia para as seguintes plataformas:

Conte para a gente o que você está desenvolvendo com o Vonage Video Media Processor. Converse conosco no nosso Slack da Comunidade Vonage ou envie-nos uma mensagem no X, antes conhecido como Twitter.

Compartilhar:

https://a.storyblok.com/f/270183/400x400/04765919bb/zachary-powell-1.png
Zachary PowellEx-funcionários da Vonage

Zach é um ex-membro da equipe da Vonage. Ele atuava como Promotor Sênior de Desenvolvimento Android na Vonage