
Compartilhar:
Zach é um ex-membro da equipe da Vonage. Ele atuava como Promotor Sênior de Desenvolvimento Android na Vonage
O Vonage Video Media Processor já está disponível para iOS, Android e outras plataformas!
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.