媒体补充增强信息（SEI）

功能简介

在音视频流媒体应用中，除了可以通过流媒体通道推拉音视频内容外，还可以使用流 SEI（Supplemental Enhancement Information，媒体补充增强信息）通过流媒体通道将文本信息与音视频内容打包在一起，从主播端（推流端）推出，并从观众端（拉流端）接收，以此实现文本数据与音视频内容的精准同步的目的。

一般可用于视频画面的精准布局、远端歌词同步、直播答题等应用场景。

前提条件

在实现 SEI 功能之前，请确保：

• 已在 ZEGO 控制台 创建项目，并申请有效的 AppID 和 Server 地址，详情请参考 控制台 - 项目信息。
• 已在项目中集成 ZEGO Express SDK，并实现了基本的音视频推拉流功能，详情请参考 快速开始 - 集成 和 快速开始 - 实现流程。

使用步骤

发送与接收 SEI 信息功能，需要在推流端发送 SEI 信息，在拉流端接收 SEI 信息，如下图所示：

推流端：

1. 调用 loginRoom 接口登录房间。
2. 调用 startPublishingStream 接口推流。
3. 在推流成功后，调用 sendSEI 接口发送 SEI 信息。

拉流端：

1. 调用 on 监听 playerRecvSEI 回调。
2. 调用 loginRoom 接口登录房间。
3. 调用 startPlayingStream 接口拉流。
4. 在拉流成功后，接收到推流端发送的 SEI 信息之后触发 playerRecvSEI 回调。

1 （可选）设置 SEI 额外信息

let appID = ; 
let server = "";

// 初始化
const zg = new ZegoExpressEngine(appID, server);

zg.setSEIConfig({
// 自定义的特定的字符串，以过滤出业务 SEI
    unregisterSEIFilter: "zegozegozegozego"
});

2 推流方

发送 SEI 信息的接口需要在推流成功之后调用。

let appID = ; 
let server = "";

// 初始化
const zg = new ZegoExpressEngine(appID, server);

// 用户 ID，自定义
let userID = "user_" + new Date().getTime();
// roomID，自定义
let roomID = "0001";
// 鉴权 token
let token = "";
// 推流 ID
let publishStreamID = "00001";

// 登录房间
zg.loginRoom(roomID, token, { userID, userName: userID }, { userUpdate: true }).then(result => {
     if (result == true) {
        console.log("login success")
     }
});

// 创建本地流预览
const localStream = await zg.createZegoStream();

zg.on("publisherStateUpdate", async result => {
    if (result.state === "PUBLISHING") {
        // 发送的 SEI 内容，示例如下：
        // 时间戳
        const ts = Math.ceil(new Date().getTime() / 1000);
        // 转换为 bytes
        const u = new Uint8Array(4);
        u[0] = (ts >> 24) & 0xff;
        u[1] = (ts >> 16) & 0xff;
        u[2] = (ts >> 8) & 0xff;
        u[3] = ts & 0xff;

        // 推流成功后，发送 SEI
        zg.sendSEI(streamID, u);
    } 

});

// 推流
zg.startPublishingStream(publishStreamID, localStream, {
  roomID,
  // 开启发送 SEI
  isSEIStart: true, 
  // 默认为0，代表 payload type = 243
  SEIType: 0 
});

3 拉流方

接收 SEI 信息的回调接口需要在拉流成功之后触发。

let appID = ; 
let server = "";

// 初始化
const zg = new ZegoExpressEngine(appID, server);

// 用户 ID，自定义
let userID = "user_" + new Date().getTime();
// roomID，自定义
let roomID = "0001";
// 鉴权 token
let token = "";
// 拉流 ID，一般通过 roomStreamUpdate 回调获取
let playStreamID = "00001";

// 监听 SEI 回调
zg.on("playerRecvSEI", (streamID, uintArray) => { 
    let offset = 0;
    // 接收到的 SEI 内容的前 4 bytes 代表发送的 SEI 类型， 将其转换为 number，
    // 1004 代表 payload type = 5， 1005 代表 payload type = 243
    let mediaSideInfoType = 0;
    mediaSideInfoType = uintArray[offset++] << 24;
    mediaSideInfoType |= uintArray[offset++] << 16;
    mediaSideInfoType |= uintArray[offset++] << 8;
    mediaSideInfoType |= uintArray[offset++];

    // 根据发送的 SEI， 解出 SEI 的内容，示例如下：
    const view = new DataView(uintArray.buffer);
    let i = 4;
    let ts = 0;
    ts = view.getUint8(i++) << 24;
    ts |= view.getUint8(i++) << 16;
    ts |= view.getUint8(i++) << 8;
    ts |= view.getUint8(i++);

    console.log("recv " + streamID + " " + mediaSideInfoType + " " + ts);
});

// 登录房间
zg.loginRoom(roomID, token, { userID, userName: userID }, { userUpdate: true }).then(result => {
     if (result == true) {
        console.log("login success")
     }
});

// 拉流
zg.startPlayingStream(playStreamID, {
    // 开启解析 SEI
    isSEIStart: true 
}).then(stream => {

}).catch(err => {

});

相关文档

如何理解和使用 SEI（媒体补充增强信息）？