
Vonage Video Media Processor für iOS, Android und mehr freigegeben!
Lesedauer: 2 Minuten
Die Video Video Media Processor API ist jetzt auf allen unterstützten nativen Plattformen (iOS, Android, Windows und macOS) verfügbar und ermöglicht es Ihnen, benutzerdefinierte Transformationen zu Ihrem veröffentlichten Video hinzuzufügen.
In der Vergangenheit haben wir darüber gesprochen, wie wir diese Funktionalität im JavaScript SDK nutzen können, um Effekte wie Hintergrundunschärfe und virtueller Hintergrund Jetzt wollen wir uns ansehen, wie wir einen benutzerdefinierten Transformator in Android und iOS erstellen können, um ein Overlay-Bild zum Video-Feed hinzuzufügen.
Kundenspezifische Transformatoren
Zusammen mit der Veröffentlichung dieser Funktion haben wir auch eine neue Anleitung für Entwickler, die Ihnen zeigt, wie Sie den Medienprozessor nutzen können, um einen Hintergrundunschärfe-Effekt sowie andere benutzerdefinierte Transformationen zu erstellen. Schauen wir uns jedoch erst einmal an, wie wir einen benutzerdefinierten Effekt in Android und iOS erstellen können.
Android
Bevor Sie beginnen, vergewissern Sie sich, dass Sie die Anleitung für die ersten Schritte befolgt haben und eine einfache Video-Chat-Anwendung mit einem erstellten Publisher-Objekt eingerichtet haben.
Erstellen Sie eine Klasse, die die PublisherKit.CustomVideoTransformer Schnittstelle implementiert. Implementieren Sie die PublisherKit.CustomVideoTransformer.onTransform(BaseVideoRenderer.Frame frame) Methode. Die Methode PublisherKit.CustomVideoTransformer.onTransform(BaseVideoRenderer.Frame frame) Methode wird für jedes Video-Bild ausgelöst. Wenden Sie bei der Implementierung der Methode eine Transformation auf das an die Methode übergebene Frame-Objekt an:
public class MyCustomTransformer implements PublisherKit.CustomVideoTransformer {
@Override
public void onTransform(BaseVideoRenderer.Frame frame) {
// Your custom transformation
}
}Wenn wir z. B. ein Bild als Logo oder Wasserzeichen über das Video legen wollen, können wir das tun:
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);
}
}
}
}
Dann übergeben Sie das Objekt, das die PublisherKit.CustomVideoTransformer-Schnittstelle implementiert, an die PublisherKit.setVideoTransformers() Methode:
MyCustomTransformer transformer = new MyCustomTransformer();
ArrayList<PublisherKit.VideoTransformer> videoTransformers = new ArrayList<>();
videoTransformers.add(transformer);
mPublisher.setVideoTransformers(videoTransformers);
Sie können den Transformator der Vonage-Medienbibliothek (siehe vorheriger Abschnitt) mit benutzerdefinierten Transformatoren kombinieren oder mehrere benutzerdefinierte Transformatoren anwenden, indem Sie mehrere PublisherKit.VideoTransformer-Objekte zu der ArrayList hinzufügen, die an die PublisherKit.setVideoTransformers() Methode übergeben wird.
Dann übergeben Sie das Objekt, das die Schnittstelle PublisherKit.CustomAudioRransformer implementiert, an die PublisherKit.setAudioTransformers() Methode:
MyCustomAudioTransformer transformer = new MyCustomAudioTransformer();
ArrayList<PublisherKit.VideoTransformer> audioTransformers = new ArrayList<>();
audioTransformers.add(transformer);
mPublisher.setAudioTransformers(audioTransformers);
Sie können mehrere benutzerdefinierte Transformatoren anwenden, indem Sie mehrere PublisherKit.AudioTransformer-Objekte zu der ArrayList hinzufügen, die an die PublisherKit.setAudioTransformers() Methode übergeben wird.
iOS
Bevor Sie beginnen, vergewissern Sie sich, dass Sie die Anleitung für die ersten Schritte befolgt haben und eine einfache Video-Chat-Anwendung mit einem erstellten OTPublisher-Objekt eingerichtet haben.
Erstellen Sie eine Klasse, die die OTCustomVideoTransformer Protokoll implementiert. Implementieren Sie die [OTCustomVideoTransformer transform:] Methode und wenden Sie eine Transformation auf das OTVideoFrame-Objekt an, das an die Methode übergeben wird. Die Methode [OTCustomVideoTransformer transform:] Methode wird für jedes Video-Bild ausgelöst:
@interface CustomTransformer : NSObject <OTCustomVideoTransformer>
@end
@implementation CustomTransformer
- (void)transform:(nonnull OTVideoFrame *)videoFrame {
// Your custom transformation
}
@end
Wenn wir z. B. ein Bild über dem Video als Logo oder Wasserzeichen hinzufügen wollten, könnten wir das tun:
@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
Setzen Sie dann die Eigenschaft OTPublisherKit.videoTransformers Eigenschaft auf ein Array, das das Objekt enthält, das die Schnittstelle OTCustomVideoTransformer implementiert:
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];Sie können den Transformator der Vonage-Medienbibliothek (siehe vorherigen Abschnitt) mit benutzerdefinierten Transformatoren kombinieren oder mehrere benutzerdefinierte Transformatoren anwenden, indem Sie mehrere PublisherKit.VideoTransformer-Objekte zur ArrayList hinzufügen, die für die OTPublisherKit.videoTransformers Eigenschaft verwendet wird.
Beispiel-Apps
Sie suchen nach einem umfassenderen Muster zum Ausprobieren und Experimentieren? Wir haben das Richtige für Sie! Beispielanwendungen, die den Medienprozessor vorstellen, sind für die folgenden Plattformen verfügbar:
Lassen Sie uns wissen, was Sie mit dem Vonage Video Media Processor entwickeln. Chatten Sie mit uns auf unserem Vonage Gemeinschaft Slack oder senden Sie uns eine Nachricht auf X, früher bekannt als Twitter.