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

Vonage Video Media Processor für iOS, Android und mehr freigegeben!

Zuletzt aktualisiert am August 28, 2023

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.

Teilen Sie:

https://a.storyblok.com/f/270183/400x400/04765919bb/zachary-powell-1.png
Zachary PowellSenior Android Entwickler Advocate