ApsaraVideo Live:SEIに基づいてレイアウトを切り替える

レイアウトがシングルストリーマストリーミングからコストリーミングに変更されると、ApsaraVideo Liveは自動的に補足拡張情報 (SEI) フレームをストリームに追加します。 SEIフレームは、ライブストリーム内のすべての参加者に関するレイアウト情報を含みます。 ビューアクライアントでSEIリスニングを有効にして、レイアウトの変更を検出できるようにすることができます。 これは、ストリームがコンテンツ配信ネットワーク (CDN) からプルされるときのレイテンシの問題に対処するのに役立ちます。 ApsaraVideo LiveコンソールでSEI設定を設定できます。

次の表に、SEIフレームの構造を示します。

単一のストリーマがストリーミングしている場合、視聴者が受信するSEIメッセージには1人の参加者に関する情報のみが含まれます。 コストリーミングまたはバトルが発生した場合、視聴者が受信するSEIメッセージには、複数の参加者に関する情報が含まれます。

たとえば、ユーザーIDが111のストリーマーがストリーミングの場合、次の形式のSEIフレームがビューア側に送信されます。

{"stream":[{"uid":"111","paneid":-1,"zorder":0,"x":0,"y":0,"w":0,"h":0,"type":0,"ms":0,"vol":0,"vad":0}]}

ユーザーIDが111のストリーマーがユーザーIDが222のコストリーマーとコストリーミングしている場合、次の形式のSEIフレームがビューアー側に送信されます。

{"stream":[{"uid":"111","paneid":0,"zorder":1,"x":0,"y":0.25,"w":0.5,"h":0.5,"type":0,"ms":0,"vol":1,"vad":119},{"uid":"222","paneid":1,"zorder":1,"x":0.5018382,"y":0.25,"w":0.5,"h":0.5,"type":0,"ms":0,"vol":60,"vad":123}]}

視聴者は、ストリーム配列の数に基づいてストリーミングレイアウトが変更されるかどうかを判断できます。 ストリーム配列が1つしか存在しない場合、1つのストリーマがストリーミングされる。 複数のストリーム配列が存在する場合、コストリーミングまたはバトルが発生します。 参加者のレイアウト情報は、混合ストリームにおける各参加者の位置を示します。

次のサンプルコードは、ApsaraVideo Playerを使用してSEIフレームを解析する方法の例を示しています。

Androidのサンプルコード:

mAliPlayer = AliPlayerFactory.createAliPlayer(mContext);

PlayerConfig playerConfig = mAliPlayer.getConfig();
// Configure SEI frame parsing for audio-only or video-only streams in the FLV format to reduce the startup time.
// Configure the start buffer time. A larger value indicates more stable startup. However, an excessively large value may affect the startup time. Specify this parameter based on your business requirements.
playerConfig.mStartBufferDuration = 1000;
// Configure the cache required for stuttering to recover. Specify a larger value in poor network conditions. We recommend that you set the value to 500 for an audio-only stream and 3000 for a video stream.
playerConfig.mHighBufferDuration = 500;
// Enable SEI listening.
playerConfig.mEnableSEI = true;
mAliPlayer.setConfig(playerConfig);

mAliPlayer.setAutoPlay(true);

mAliPlayer.setOnErrorListener(errorInfo -> {
    mAliPlayer.prepare();
});

mAliPlayer.setOnSeiDataListener(new IPlayer.OnSeiDataListener() {
    @Override
    public void onSeiData(int i, byte[] bytes) {

    }
});

iOSのサンプルコード:

self.cdnPlayer = [[AliPlayer alloc] init];
self.cdnPlayer.delegate = self;
AVPConfig *config = [self.cdnPlayer getConfig];
config.enableSEI = YES;
[self.cdnPlayer setConfig:config];

// Listen to SEI-related callbacks.
- (void)onSEIData:(AliPlayer*)player type:(int)type data:(NSData *)data {
    if (data.bytes){
        NSString *str = [NSString stringWithUTF8String:data.bytes];
        // Process the SEI message.
    }
}