本文介绍如何使用 Web 拉流 SDK（VePlayer）监听并处理视频流中的 SEI（Supplemental Enhancement Information，补充增强信息） 消息。SEI 消息是一种与视频帧同步的数据通道，常用于在特定时间点同步显示互动内容，如题目、弹幕、虚拟道具等，为观众带来更丰富的互动体验。

适用版本 #

本文档适用于最新版本的 Web 拉流 SDK，版本信息请参考发布历史，历史版本请参考历史文档。

SEI 消息数据结构 #

当播放器解析到视频流中的 SEI 消息时，监听函数将接收到一个包含以下属性的数据对象：

interface Data {
  originPts: number; // 原始 PTS。视频帧在实际推流中的显示时间戳 PTS
  pts: number; // 修正后的 PTS。在直播场景中，播放器会根据观众进入直播间时间，从 0 开始重新定义显示时间戳 PTS
  time: number; // 该 SEI 消息在当前直播视频中的时间点，单位为 s
  data: {
    payload: Uint8Array; // SEI 数据
    type: number; // SEI 类型
    size: number; // SEI 大小
    uuid: string; // SEI UUID，不存在则为空字符串
  }
}

前提条件 #

已完成 SDK 集成。

配置示例 #

在 VePlayer 实例创建完成后，您可以通过监听 VePlayer.live.Events.SEI 事件来接收视频流中的 SEI 消息。代码示例如下所示。

VePlayer.createLivePlayer({
  width: 640,
  height: 360,
  url: 'https://pull.example.com/live/stream1.flv',
  logger: {
    appId: '5****8',
  },
}).then(function (veplayer) {
  veplayer.on(VePlayer.live.Events.SEI, function (data) {
    console.info('SEI 信息', data);
  });
});        

import { createLivePlayer, register, live } from '@volcengine/veplayer';
import { flv } from '@volcengine/veplayer-plugin';
import '@volcengine/veplayer/style'

register([flv]);

createLivePlayer({
  width: 640,
  height: 360,
  url: 'https://pulldomain/appname/mystream.flv',
  logger: {
    appId: '2****4',
    userId: '1********6',
    deviceId: '3********7',
  },
}).then(function (veplayer) {
  veplayer.on(live.Events.SEI, function (data) {
    console.info('SEI 信息', data);
  });
});