关于音视频:音视频进阶教程实现直播间的自定义视频渲染

1 自定义视频渲染的性能简介

自定义视频渲染指的是 SDK 向内部提供本地预览及远端拉流的视频帧数据，供用户自行渲染。

当开发者业务中呈现以下状况时，举荐应用 即构实时音视频 SDK 的自定义视频渲染性能：

• App 应用了跨平台界面框架（例如 Qt 须要有简单层级关系的界面以实现高体验的交互）或游戏引擎（例如 Unity3D、Cocos2d-x 等）。
• App 须要获取 SDK 采集或拉流的视频帧数据进行非凡解决。

2 自定义视频渲染示例源码下载

请参考 下载示例源码 获取源码。

相干源码请查看“/ZegoExpressExample/AdvancedVideoProcessing/src/main/java/im/zego/customrender”目录下的文件。

3 自定义视频渲染前提条件

在实现自定义视频渲染性能之前，请确保：

• 已在我的项目中集成 ZEGO Express SDK，实现根本的实时音视频性能，详情请参考 疾速开始 – 集成 和 疾速开始 – 实现视频通话。
• 已在 ZEGO 控制台 创立我的项目，并申请无效的 AppID 和 AppSign，详情请参考 控制台 – 项目管理 中的“我的项目信息”。

4 自定义视频渲染应用步骤

自定义视频渲染的应用流程如下：

1. 设置自定义视频渲染配置。
2. 创立 ZegoExpressEngine 引擎。
3. 设置自定义视频渲染器对象并实现回调办法。
4. 登录房间后推 / 拉流，收到自定义视频渲染视频帧数据回调。

API 接口调用的时序图如下

4.1 设置自定义视频渲染配置

4.1.1 创立 ZegoCustomVideoRenderConfig 对象并配置参数

“bufferType”参数是枚举 ZegoVideoBufferType，可指定开发者须要的自定义视频渲染视频帧数据类型。

“frameFormatSeries”参数是枚举 ZegoVideoFrameFormatSeries，可指定开发者须要的自定义视频渲染视频帧数据格式，此参数只能指定 RGB 或 YUV 色彩空间大类，具体的数据格式不同平台间不统一，以回调中的参数为准。

“enableEngineRender”示意是否在要自定义视频渲染的同时，SDK 外部也渲染。设置为“false”时，引擎不会在预览接口 startPreview 和拉流接口 startPlayingStream 设置的 View 上渲染。

• 接口原型

  /**
   * 自定义视频渲染配置
   *
   * 当须要应用自定义渲染性能时须要将该类的实例作为参数设置给 [ZegoEngineConfig] 实例的对应参数。*/
  public class ZegoCustomVideoRenderConfig {
  
      /** 自定义视频渲染视频帧数据类型 */
      public ZegoVideoBufferType bufferType;
  
      /** 自定义视频渲染视频帧数据格式 */
      public ZegoVideoFrameFormatSeries frameFormatSeries;
  
      /** 是否在自定义视频渲染的同时，引擎也渲染 */
      public boolean enableEngineRender;
  
  }
  

• 调用示例

  ZegoCustomVideoRenderConfig videoRenderConfig = new ZegoCustomVideoRenderConfig();
  // 抉择 RAW_DATA 类型视频帧数据
  videoRenderConfig.bufferType = ZegoVideoBufferType.RAW_DATA;
  // 抉择 RGB 色系数据格式
  videoRenderConfig.frameFormatSeries = ZegoVideoFrameFormatSeries.RGB;
  // 指定在自定义视频渲染的同时引擎也渲染
  videoRenderConfig.enableEngineRender = true;

4.1.2 调用 enableCustomVideoRender 接口设置引擎进阶配置 videoRenderConfig

• 接口原型

  /**
   * 开始或进行自定义视频渲染
   *
   * 必须在引擎启动前设置，即在调用 [startPreview]、[startPublishing]、[startPlayingStream] 之前设置；且在引擎进行之后能力批改配置
   * 当开发者开启自定义渲染时，通过调用 [setCustomVideoRenderHandler] 可设置接管本地以及远端的视频帧数据以用于自定义渲染
   *
   * @param enable 是否开启
   * @param config 自定义渲染配置
   */
  public void enableCustomVideoRender(boolean enable, ZegoCustomVideoRenderConfig config);

• 调用示例

  ZegoCustomVideoRenderConfig videoRenderConfig = new ZegoCustomVideoRenderConfig();
  // 抉择 RAW_DATA 类型视频帧数据
  videoRenderConfig.bufferType = ZegoVideoBufferType.RAW_DATA;
  // 抉择 RGB 色系数据格式
  videoRenderConfig.frameFormatSeries = ZegoVideoFrameFormatSeries.RGB;
  // 指定在自定义视频渲染的同时引擎也渲染
  videoRenderConfig.enableEngineRender = true;
  engine.enableCustomVideoRender(true, videoRenderConfig);

4.2 设置自定义视频渲染器对象并实现回调办法

调用 setCustomVideoRenderHandler 接口设置自定义视频渲染回调。

• 接口原型

  /**
   * 设置内部渲染器对象, 用户传入本人结构的渲染器对象 IZegoCustomVideoRenderHandler
   *
   * @param handler 渲染器对象, 开发者须自行实现渲染器对象须实现的办法并自行渲染视频到 UI 上
   */
  public void setCustomVideoRenderHandler(IZegoCustomVideoRenderHandler handler)

  其中的自定义视频渲染回调接口 IZegoCustomVideoRenderHandler 定义如下：

  public abstract class IZegoCustomVideoRenderHandler {
  
      /**
      * 本地预览视频帧裸数据回调
      *
      * @param data 视频帧的裸数据（例：RGBA 只需思考 data[0]，I420 需思考 data[0,1,2]）* @param dataLength 数据的长度（例：RGBA 只需思考 dataLength[0]，I420 需思考 dataLength[0,1,2]）* @param param 视频帧参数
      * @param flipMode 视频帧翻转模式
      * @param channel 推流通道
      */
      public void onCapturedVideoFrameRawData(ByteBuffer[] data, int[] dataLength, ZegoVideoFrameParam param, ZegoVideoFlipMode flipMode, ZegoPublishChannel channel){ }
  
      /**
      * 远端拉流视频帧裸数据回调，通过 streamID 辨别不同的流
      *
      * @param data 视频帧的裸数据（例：RGBA 只需思考 data[0]，I420 需思考 data[0,1,2]）* @param dataLength 数据的长度（例：RGBA 只需思考 dataLength[0]，I420 需思考 dataLength[0,1,2]）* @param param 视频帧参数
      * @param streamID 拉流的流 ID
      */
      public void onRemoteVideoFrameRawData(ByteBuffer[] data, int[] dataLength, ZegoVideoFrameParam param, String streamID){}}

• 调用示例

  // 设置自定义视频渲染回调并实现抛出视频数据的办法
  
  engine.setCustomVideoRenderHandler(new IZegoCustomVideoRenderHandler(){public void onCapturedVideoFrameRawData(ByteBuffer[] data, int[] dataLength, ZegoVideoFrameParam param, ZegoVideoFlipMode flipMode, ZegoPublishChannel channel){
          // 在采集端的回调里通过 data, dataLength, param 等参数实现将本地采集的视频数据渲染到 View 的逻辑, 所抛出的数据格式参考 param.format
          ...;
      }
  
      public void onRemoteVideoFrameRawData(ByteBuffer[] data, int[] dataLength, ZegoVideoFrameParam param, String streamID){
          // 在拉流端的回调里通过 data, dataLength, param 等参数实现将所拉的流的视频数据渲染到 View 的逻辑, 所抛出的数据格式参考 param.format
          ...;
      }
  });

本地预览采集视频帧回调办法中的 flipMode 参数与镜像无关，告诉开发者是否须要自行将视频帧画面做翻转，以使画面合乎 setVideoMirrorMode 中设置的 ZegoVideoMirrorMode 枚举值的形容.

以上回调办法中的“param”参数（ZegoVideoFrameParam 对象）形容了该视频帧的一些参数，定义如下：

/**
 * 视频帧的参数对象
 *
 * 包含视频帧的格局、宽低等
 */
public class ZegoVideoFrameParam {

    /** 视频帧的格局 */
    public ZegoVideoFrameFormat format;

    /** 每个立体一行字节数（此参数为 int 数组，数组长度为 4，RGBA 只需思考 strides[0]，I420 需思考 strides[0,1,2]）*/
    final public int[] strides = new int[4];

    /** 视频帧的画面宽 */
    public int width;

    /** 视频帧的画面高 */
    public int height;

}

其中“format”标识了该视频帧的具体数据格式，“strides”为数组，形容每个立体一行字节数，“size”形容视频帧的画面尺寸。“strides”和图像之间的关系如图：

4.3 自定义视频渲染视频帧数据回调

4.3.1 推流预览渲染

推流方首先须要调用启动预览接口，能力收到自定义视频渲染视频帧数据回调，如果 ZegoCustomVideoRenderConfig 自定义视频渲染配置的“enableEngineRender”参数为“false”，启动预览的“canvas”参数能够传空，启动预览后即可开始推流。

// 如需在自定义视频渲染同时外部也渲染，可将 `ZegoCustomVideoRenderConfig` 的 `enableEngineRender` 参数设为 `true`，而后在预览时传入外部渲染的 View
ZegoCanvas previewCanvas = new ZegoCanvas(textureViewLocalPreview);// textureViewLocalPreview 为 UI 界面上的 TextureView 对象
ZegoExpressEngine.getEngine().startPreview(previewCanvas);

// 如仅需自定义视频渲染，可将 `ZegoCustomVideoRenderConfig` 的 `enableEngineRender` 参数设为 `false`，`canvas` 参数传空即可，但也必须调用此接口，否则自定义视频渲染将不会回调预览视频帧数据
ZegoExpressEngine.getEngine().startPreview(null);

// 开始预览后，此时将会收到自定义视频渲染预览视频帧数据回调

// 开始推流
ZegoExpressEngine.getEngine().startPublishingStream(streamid);// streamid 为开发者定义的流 id

4.3.2 视频拉流渲染

// 如需在自定义视频渲染同时外部也渲染，可将 `ZegoCustomVideoRenderConfig` 的 `enableEngineRender` 参数设为 `true`，而后在拉流时传入外部渲染的 View
ZegoCanvas playCanvas = new ZegoCanvas(textureViewLocalPreview);// textureViewLocalPreview 为 UI 界面上的 TextureView 对象
ZegoExpressEngine.getEngine().startPlayingStream(streamID, playCanvas);

// 如仅需自定义视频渲染，可将 `ZegoCustomVideoRenderConfig` 的 `enableEngineRender` 参数设为 `false`，`canvas` 参数传空即可
egoExpressEngine.getEngine().startPlayingStream(streamID, null);

// 开始拉流后，此时将会收到拉的这条流的自定义视频渲染视频帧数据回调 

至此，App 胜利取得 SDK 回调的视频帧数据，用于理论的渲染动作或者进行深加工操作。

5 获取 实时音视频 SDK- 自定义视频渲染 性能的更多帮忙

获取本文实时音视频 SDK- 自定义视频渲染的开发文档、技术支持，拜访即构文档核心开发文档页

近期有开发布局的开发者可上即构官网查看，恰逢即构七周年全线音视频产品 1 折的优惠，分割商务获取产品优惠；