本文介绍如何通过 uni-app 拉流 SDK 实现 RTM 协议拉流、QUIC 协议拉流等进阶功能。

前提条件

• 已完成 SDK 的集成和初始化。详见集成 SDK 和初始化 SDK。
  如您需要接入 H.265 硬解或 H.265 软解功能，请获取并添加高级版或试用版 License（请勿使用试用版发布上线）。
• 已完成基础功能接入。详见基础功能。

注意事项

真机调试：由于 SDK 使用了大量的音视频方法，这些方法在仿真模拟器下可能会出现异常，推荐您使用真机进行代码调试。

RTM 协议拉流

uni-app 拉流 SDK 支持 RTM 协议拉流。该功能需要配合火山引擎视频直播服务使用。详细信息可参考超低延时直播介绍。

接入准备

使用视频直播控制台的地址生成器，生成 RTM 和 FLV 拉流地址。其中，FLV 地址可作为 RTM 拉流失败时的自动降级地址。

接入说明

配置 RTM 拉流地址和 FLV 拉流地址进行播放。代码示例如下所示。

// 配置 RTM 流地址。
const playStreamRTM = new VeLivePlayerStream();
playStreamRTM.url = 'https://pull.example.com/live/stream.sdp';
playStreamRTM.format = VeLivePlayerFormat.VeLivePlayerFormatRTM;
playStreamRTM.resolution = VeLivePlayerResolution.VeLivePlayerResolutionOrigin;
playStreamRTM.streamType = VeLivePlayerStreamType.VeLivePlayerStreamTypeMain;

// 配置 FLV 流地址。
const playStreamFLV = new VeLivePlayerStream();
playStreamFLV.url = 'https://pull.example.com/live/stream.flv';
playStreamFLV.format = VeLivePlayerFormat.VeLivePlayerFormatFLV;
playStreamFLV.resolution = VeLivePlayerResolution.VeLivePlayerResolutionOrigin;
playStreamFLV.streamType = VeLivePlayerStreamType.VeLivePlayerStreamTypeMain;

// 创建 VeLivePlayerStreamData 实例。
const streamData = new VeLivePlayerStreamData();
const mainStreamList = [];

// 将 RTM 流地址添加到主流地址列表中。
mainStreamList.push(playStreamRTM);

// 将 FLV 流地址添加到主流地址列表中。
mainStreamList.push(playStreamFLV);

// 配置主流地址列表。
streamData.mainStreamList = mainStreamList;

// 将默认的直播播放格式设置为 RTM，默认的直播播放传输协议设置为 TLS。
streamData.defaultFormat = VeLivePlayerFormat.VeLivePlayerFormatRTM;
streamData.defaultProtocol = VeLivePlayerProtocol.VeLivePlayerProtocolTLS;

// 配置播放源。
this.player?.setPlayStreamData(streamData);

// 开始播放。
this.player?.play();

QUIC 协议拉流

uni-app 拉流 SDK 支持 QUIC 协议拉流。该功能需要配合火山引擎视频直播服务使用。

接入准备

使用视频直播控制台的地址生成器，生成 FLV 拉流地址。

接入说明

配置 QUIC 拉流地址进行播放。代码示例如下所示。

// 配置 FLV 流地址。
const playStreamFLV = new VeLivePlayerStream();
playStreamFLV.url = 'https://pull.example.com/live/stream.flv';
playStreamFLV.format = VeLivePlayerFormat.VeLivePlayerFormatFLV;
playStreamFLV.resolution = VeLivePlayerResolution.VeLivePlayerResolutionOrigin;
playStreamFLV.streamType = VeLivePlayerStreamType.VeLivePlayerStreamTypeMain;

// 创建 VeLivePlayerStreamData 实例。
const streamData = new VeLivePlayerStreamData();
const mainStreamList = [];

// 将 FLV 流地址添加到主流地址列表中。
mainStreamList.push(playStreamFLV);

// 配置主流地址列表。
streamData.mainStreamList = mainStreamList;

// 将默认的直播播放格式设置为 FLV，默认的直播播放传输协议设置为 QUIC。
streamData.defaultFormat = VeLivePlayerFormat.VeLivePlayerFormatFLV;
streamData.defaultProtocol = VeLivePlayerProtocol.VeLivePlayerProtocolQUIC; 

// 配置播放源。
this.player?.setPlayStreamData(streamData);

// 开始播放。
this.player?.play();

使用主备流

主备流主要用于直播间容灾，通过配置主备两路直播流地址，在推流和分发环节使用主备流进行直播。播放器在接入时配置主备两路拉流地址，当主流地址拉流失败或者播放出错时，播放器会自动切换到备流地址进行播放。同样地，当备流地址播放出错时，播放器会切换回主流地址进行播放。主备地址可以来自同一直播服务商，也可以来自不同的直播服务商。

接入准备

获取主流地址和备流地址，如果使用火山引擎视频直播服务，您可通过视频直播控制台的地址生成器，生成主备拉流地址。

接入说明

1. 配置主备流地址进行播放。代码示例如下所示。

   // 配置主流地址。
   const playStreamMain = new VeLivePlayerStream();
   playStreamMain.url = 'https://pull.example.com/live/主.flv';
   playStreamMain.format = VeLivePlayerFormat.VeLivePlayerFormatFLV;
   playStreamMain.resolution = VeLivePlayerResolution.VeLivePlayerResolutionOrigin;
   playStreamMain.streamType = VeLivePlayerStreamType.VeLivePlayerStreamTypeMain; 
   
   // 配置备流地址。
   const playStreamBackup = new VeLivePlayerStream();
   playStreamBackup.url = 'https://pull.example.com/live/备.flv';
   playStreamBackup.format = VeLivePlayerFormat.VeLivePlayerFormatFLV;
   playStreamBackup.resolution =
     VeLivePlayerResolution.VeLivePlayerResolutionOrigin;
   playStreamBackup.streamType =
     VeLivePlayerStreamType.VeLivePlayerStreamTypeBackup; 
     
   // 创建 VeLivePlayerStreamData 实例。
   const streamData = new VeLivePlayerStreamData();
   
   // 开启主备切换。
   streamData.enableMainBackupSwitch = true;
   
   // 添加主流。
   const mainStreamList = [];
   mainStreamList.push(playStreamMain);
   
   // 添加备流。
   const backupStreamList = [];
   backupStreamList.push(playStreamBackup);
   
   streamData.mainStreamList = mainStreamList;
   streamData.backupStreamList = backupStreamList;
   
   // 配置播放源。
   this.player?.setPlayStreamData(streamData);
   
   // 开始播放。
   this.player?.play();
   

2. 当播放器内部发生主备切换时，会通过 onMainBackupSwitch 回调进行通知。代码示例如下所示。

   this.player?.setObserver({ onMainBackupSwitch: (player, streamType) =>{}, });
   

多档位切换

播放器支持配置多档位的直播拉流地址，通过方法可以实现多档位直播流的切换。

接入准备

获取源流和各档位转码流拉流地址。如您使用了火山引擎视频直播服务，请先登录控制台完成转码配置，再获取拉流地址。获取地址方法如下所示。

• 功能调试阶段：可使用地址生成器获取拉流地址。
• 功能正式上线：需通过生成拉流地址的 API 或使用服务端 SDK 获取拉流地址。

本文的接入说明以下列拉流地址为例。

接入说明

1. 配置多档位流地址进行播放。代码示例如下所示。

   // 配置多档位流地址。
   const playStreamOrgin = new VeLivePlayerStream();
   playStreamOrgin.url = "https://pull.example.com/live/123456.flv";
   playStreamOrgin.format = VeLivePlayerFormat.VeLivePlayerFormatFLV;
   playStreamOrgin.resolution = VeLivePlayerResolution.VeLivePlayerResolutionOrigin; // 原始档位。
   playStreamOrgin.streamType = VeLivePlayerStreamType.VeLivePlayerStreamTypeMain;
   
   const playStreamUHD = new VeLivePlayerStream();
   playStreamUHD.url = "https://pull.example.com/live/123456_uhd.flv";
   playStreamUHD.format = VeLivePlayerFormat.VeLivePlayerFormatFLV;
   playStreamUHD.resolution = VeLivePlayerResolution.VeLivePlayerResolutionUHD; // 超清档位。
   playStreamUHD.streamType = VeLivePlayerStreamType.VeLivePlayerStreamTypeMain;
   
   const playStreamHD = new VeLivePlayerStream();
   playStreamHD.url = "https://pull.example.com/live/123456_hd.flv";
   playStreamHD.format = VeLivePlayerFormat.VeLivePlayerFormatFLV;
   playStreamHD.resolution = VeLivePlayerResolution.VeLivePlayerResolutionHD; // 高清档位。
   playStreamHD.streamType = VeLivePlayerStreamType.VeLivePlayerStreamTypeMain;
   
   const playStreamSD = new VeLivePlayerStream();
   playStreamSD.url = "https://pull.example.com/live/123456_sd.flv";
   playStreamSD.format = VeLivePlayerFormat.VeLivePlayerFormatFLV;
   playStreamSD.resolution = VeLivePlayerResolution.VeLivePlayerResolutionSD; // 标清档位。
   playStreamSD.streamType = VeLivePlayerStreamType.VeLivePlayerStreamTypeMain;
   
   const playStreamLD = new VeLivePlayerStream();
   playStreamLD.url = "https://pull.example.com/live/123456_ld.flv";
   playStreamLD.format = VeLivePlayerFormat.VeLivePlayerFormatFLV;
   playStreamLD.resolution = VeLivePlayerResolution.VeLivePlayerResolutionLD; // 低清档位。
   playStreamLD.streamType = VeLivePlayerStreamType.VeLivePlayerStreamTypeMain;
   
   // 创建 VeLivePlayerStreamData 实例。
   const streamData = new VeLivePlayerStreamData();
   
   // 添加多档位流到主流地址列表中。
   const mainStreamList = [];
   mainStreamList.push(playStreamOrgin);
   mainStreamList.push(playStreamUHD);
   mainStreamList.push(playStreamHD);
   mainStreamList.push(playStreamSD);
   mainStreamList.push(playStreamLD);
   
   streamData.mainStreamList = mainStreamList;
   
   // 配置默认启播档位。
   streamData.defaultResolution = VeLivePlayerResolution.VeLivePlayerResolutionOrigin;
   
   // 配置播放源。
   this.player?.setPlayStreamData(streamData);
   
   // 开始播放。
   this.player?.play();
   

2. 通过调用播放器的 switchResolution 方法可以实现多个档位之间的手动切换。代码示例如下所示。

   this.player?.switchResolution(VeLivePlayerResolution.VeLivePlayerResolutionUHD); // 切换到超清档位。
   

3. 当档位切换成功时，会通过 onResolutionSwitch 回调进行通知。代码示例如下所示。

   this.player?.setObserver({ onResolutionSwitch(_player, resolution){} });
   

自适应码率（ABR）拉流

自适应码率（Adaptive Bit-Rate，简称 ABR）是一种流媒体传输技术，通过一系列算法策略，动态切换不同档位媒体流，以达到适应网络带宽变化，防止观众在观看直播过程产生卡顿，提升播放质量和观看体验。

接入准备

获取源流和各档位转码流拉流地址。如您使用了火山引擎视频直播服务，请先登录控制台完成转码配置，再获取拉流地址。获取地址方法如下所示。

• 功能调试阶段：可使用地址生成器获取拉流地址。
• 功能正式上线：需通过生成拉流地址的 API 或使用服务端 SDK 获取拉流地址。

本文的接入说明以下列拉流地址为例。

接入说明

1. 配置多档位流地址进行播放。代码示例如下所示。

   // 配置多档位流地址。
   const playStreamOrgin = new VeLivePlayerStream();
   playStreamOrgin.url = 'https://pull.example.com/live/123456.flv';
   playStreamOrgin.format = VeLivePlayerFormat.VeLivePlayerFormatFLV;
   playStreamOrgin.resolution =
     VeLivePlayerResolution.VeLivePlayerResolutionOrigin; // 原始档位。
   playStreamOrgin.streamType = VeLivePlayerStreamType.VeLivePlayerStreamTypeMain;
   playStreamOrgin.bitrate = 2500;
   
   const playStreamUHD = new VeLivePlayerStream();
   playStreamUHD.url = 'https://pull.example.com/live/123456_uhd.flv';
   playStreamUHD.format = VeLivePlayerFormat.VeLivePlayerFormatFLV;
   playStreamUHD.resolution = VeLivePlayerResolution.VeLivePlayerResolutionUHD; // 超清档位。
   playStreamUHD.streamType = VeLivePlayerStreamType.VeLivePlayerStreamTypeMain;
   playStreamUHD.bitrate = 2500;
   
   const playStreamHD = new VeLivePlayerStream();
   playStreamHD.url = 'https://pull.example.com/live/123456_hd.flv';
   playStreamHD.format = VeLivePlayerFormat.VeLivePlayerFormatFLV;
   playStreamHD.resolution = VeLivePlayerResolution.VeLivePlayerResolutionHD; // 高清档位。
   playStreamHD.streamType = VeLivePlayerStreamType.VeLivePlayerStreamTypeMain;
   playStreamHD.bitrate = 1000;
   
   const playStreamSD = new VeLivePlayerStream();
   playStreamSD.url = 'https://pull.example.com/live/123456_sd.flv';
   playStreamSD.format = VeLivePlayerFormat.VeLivePlayerFormatFLV;
   playStreamSD.resolution = VeLivePlayerResolution.VeLivePlayerResolutionSD; // 标清档位。
   playStreamSD.streamType = VeLivePlayerStreamType.VeLivePlayerStreamTypeMain;
   playStreamSD.bitrate = 800;
   
   const playStreamLD = new VeLivePlayerStream();
   playStreamLD.url = 'https://pull.example.com/live/123456_ld.flv';
   playStreamLD.format = VeLivePlayerFormat.VeLivePlayerFormatFLV;
   playStreamLD.resolution = VeLivePlayerResolution.VeLivePlayerResolutionLD; // 低清档位。
   playStreamLD.streamType = VeLivePlayerStreamType.VeLivePlayerStreamTypeMain;
   playStreamLD.bitrate = 500;
   
   // 创建 VeLivePlayerStreamData 实例。
   const streamData = new VeLivePlayerStreamData();
   
   // 添加多档位流到主流地址列表中。
   const mainStreamList = [];
   mainStreamList.push(playStreamOrgin);
   mainStreamList.push(playStreamUHD);
   mainStreamList.push(playStreamHD);
   mainStreamList.push(playStreamSD);
   mainStreamList.push(playStreamLD);
   streamData.mainStreamList = mainStreamList;
   
   // 配置默认启播档位。
   streamData.defaultResolution =
     VeLivePlayerResolution.VeLivePlayerResolutionOrigin;
   
   // 开启 ABR 功能。
   streamData.enableABR = true;
   
   // 配置播放源。
   this.player?.setPlayStreamData(streamData);
   
   // 开始播放。
   this.player?.play();
   

2. ABR 档位自动切换时，会通过 onResolutionSwitch 回调进行通知。代码示例如下所示。

   this.player?.setObserver({ onResolutionSwitch(_player, resolution) {}});
   

SEI

SEI（Supplemental Enhancement Information）是直播流中的附加信息，可以用于传递自定义的数据或元数据。

接入说明

1. 在创建播放器时，或调用 play 方法前，您可以通过配置播放器的 enableSei 参数来开启 SEI 信息的接收功能。代码示例如下所示。

   // 在创建播放器时开启 SEI 信息的接收功能。
   this.player = await initPlayer({
     enableSei: true, // 
     ...
   })
   // 也可在创建播放器后，调用 play 方法前开启 SEI 信息的接收功能。
   this.player.setConfig({
     enableSei: true, 
     ...
   })
   

2. 当直播流中有 SEI 信息时，播放器会通过 onReceiveSeiMessage 回调进行通知，并将接收到的 SEI 信息传递给回调方法。代码示例如下所示。

   this.player?.setObserver({ 
       onReceiveSeiMessage(seiMessage) {
         // 处理接收到的 SEI 信息。
       }
   });