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

Vonageビデオ・メディア・プロセッサ、iOS、Androidなどに対応!

最終更新日 August 28, 2023

所要時間:1 分

Video Media Processor API が、対応するすべてのネイティブ プラットフォーム(iOS、Android、Windows、macOS)で利用可能になり、公開動画にカスタム変換を追加できるようになりました。

過去に、JavaScript SDKのこの機能を使って、次のようなエフェクトを作成できることをお話ししました。 背景ぼかしや仮想背景の適用今回は、AndroidとiOSでカスタムトランスフォーマーを作成し、ビデオフィードにオーバーレイ画像を追加する方法を見てみましょう。

カスタム・トランスフォーマー

この機能のリリースと同時に、以下の新しいデベロッパーガイドも公開しました。 メディアプロセッサを使用して、背景ぼかしエフェクトやその他のカスタム変換を作成する方法を紹介する新しい開発者ガイドもあります。.ここでは、AndroidとiOSでカスタムエフェクトを作成する方法を見てみましょう。

アンドロイド

作業を始める前に、次のことを確認してください。 スタート・ガイドを参照し、Publisher オブジェクトが作成された基本的なビデオ・チャット・アプリケーションがセットアップされていることを確認してください。

を実装するクラスを作成します。 を実装するクラスを作成します。インタフェースを実装するクラスを作成します。メソッドを実装します。 PublisherKit.CustomVideoTransformer.onTransform​(BaseVideoRenderer.Frame frame)メソッドを実装します。この PublisherKit.CustomVideoTransformer.onTransform​(BaseVideoRenderer.Frame frame)メソッドは、各 Video フレームに対してトリガされます。メソッドの実装では、メソッドに渡されたフレーム オブジェクトに変換を適用します:

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

例えば、Videoの上に画像を追加して、ロゴや透かしとして機能させることもできる:

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

次に、PublisherKit.CustomVideoTransformer インタフェースを実装するオブジェクトを PublisherKit.setVideoTransformers()メソッドに渡します:

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

メソッドに渡される ArrayList に複数の PublisherKit.VideoTransformer オブジェクトを追加することで、Vonage Media ライブラリ トランスフォーマ(前のセクションを参照)とカスタム トランスフォーマを組み合わせたり、複数のカスタム トランスフォーマを適用したりできます。 PublisherKit.setVideoTransformers()メソッドに渡す ArrayList に複数の PublisherKit.VideoTransformer オブジェクトを追加します。

次に、PublisherKit.CustomAudioRransformerインターフェイスを実装したオブジェクトを PublisherKit.setAudioTransformers()メソッドに渡します:

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

メソッドに渡されるArrayListに複数のPublisherKit.AudioTransformerオブジェクトを追加することで、複数のカスタムトランスフォーマーを適用できます。 PublisherKit.setAudioTransformers()メソッドに渡されます。

iOS

作業を始める前に、次のことを確認してください。 スタートガイドに従い、OTPublisher オブジェクトを作成し、基本的なビデオ・チャット・アプリケーションをセットアップしていることを確認してください。

を実装するクラスを作成する。 OTCustomVideoTransformerプロトコルを実装するクラスを作成する。メソッドを実装する。 [OTCustomVideoTransformer transform:]メソッドを実装し、メソッドに渡された OTVideoFrame オブジェクトに変換を適用します。この [OTCustomVideoTransformer transform:]メソッドはビデオフレームごとにトリガされます:

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

例えば、Videoの上にロゴマークやウォーターマークのような画像を追加することもできる:

@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

次に OTPublisherKit.videoTransformersプロパティを、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];

プロパティに使用する ArrayList に複数の PublisherKit.VideoTransformer オブジェクトを追加することで、Vonage Media ライブラリ トランスフォーマ(前のセクションを参照)とカスタム トランスフォーマを組み合わせたり、複数のカスタム トランスフォーマを適用したりできます。 OTPublisherKit.videoTransformersプロパティに使用する ArrayList に複数の PublisherKit.VideoTransformer オブジェクトを追加します。

サンプルアプリ

より完全なサンプルをお探しですか?お任せください!メディアプロセッサーのサンプルアプリケーションは、以下のプラットフォームでご利用いただけます:

Vonage Video Media Processorで何を作っているかお知らせください。私たちの VonageコミュニティSlackまたは X(旧 Twitter.

シェア:

https://a.storyblok.com/f/270183/400x400/04765919bb/zachary-powell-1.png
Zachary Powellシニア・アンドロイド・デベロッパー・アドボケイト