全部產品
Search
文件中心

ApsaraVideo Live:基於SEI實現布局平滑切換

更新時間:Nov 20, 2024

本文介紹一般觀眾(CDN觀眾)如何感知主播視頻畫面從單主播切換成連麥布局。

當畫面從單主播畫面切換成混流畫面後,阿里雲媒體服務會在播放的視頻流中自動插入SEI幀,SEI幀中包含每個成員的布局資訊,使用者可以在一般觀眾播放端開啟SEI監聽,並根據布局資訊的變化來感知主播視頻畫面從單主播切換成連麥布局。由此可以解決一般觀眾播放CDN流有一定延時的問題。具體您可以登入ApsaraVideo for Live控制台,開啟SEI配置。

阿里雲媒體服務自動插入SEI框架格式如下:

資料類型

參數名稱

數值

視頻流資訊

stream

主播資訊:

uid:對應主播的使用者ID。

主播所在窗格地區的布局資訊,僅需關注以下參數:

  • paneid: 該地區在窗格編號,取值[0,8]。

  • zorder:該地區的疊放層級,取值範圍 [0,99]。

  • x:該地區在畫布中對應的 x 座標,歸一化百分比。

  • y:該地區在畫布中對應的 y 座標,歸一化百分比。

  • w:該地區的寬度,歸一化百分比。

  • h:該地區的高度,歸一化百分比。

  • vol : 主播的音量(分貝),取值 [0,255]

  • vad :語音檢測,取值 [0,150],150是有人聲,非150就是從有人聲到無聲的拖尾時間。

  • 如果只是單主播,觀眾端接收的SEI資訊裡stream集合只有一個成員資訊;

  • 如果是主播正在連麥或者PK,觀眾端接收的SEI資訊裡stream集合會有多個成員資訊。

例如:

  • 當主播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}]}

  • 當主播111和觀眾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}]}

判斷stream數組的個數可以知道當前直播布局是否發生切換,stream數組的個數為1時,則是單主播推流;stream數組的個數大於1,則主播在連麥或PK中。通過成員的布局資訊,知道每個成員在混流布局中的具體位置。

阿里雲播放器開啟解析SEI幀的範例程式碼如下。

  • Android範例程式碼:

    mAliPlayer = AliPlayerFactory.createAliPlayer(mContext);
    
    PlayerConfig playerConfig = mAliPlayer.getConfig();
    // 純音頻 或 純視頻 的flv 需要設定 以加快起播
    // 起播緩衝,越大起播越穩定,但會影響起播時間,可酌情設定
    playerConfig.mStartBufferDuration = 1000;
    // 卡頓恢複需要的緩衝,網路不好的情況可以設定大一些,當前純音頻設定500還好,視頻的話建議用預設值3000.
    playerConfig.mHighBufferDuration = 500;
    // 需要開啟SEI監聽
    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];
    
    //監聽SEI相關回調
    - (void)onSEIData:(AliPlayer*)player type:(int)type data:(NSData *)data {
        if (data.bytes){
            NSString *str = [NSString stringWithUTF8String:data.bytes];
            //處理SEI資訊
        }
    }