# 视频渲染 (/zh-CN/api-reference/rtc/react-native/video/video-rendering)

> For AI agents: see the complete documentation index at [llms.txt](/llms.txt).

<a id="toc_video_rendering"></a>

<a id="api_irtcengine_enableinstantmediarendering"></a>

<a id="ariaid-title2"></a>

## enableInstantMediaRendering [#enableinstantmediarendering]

开启音视频帧加速渲染。

<a id="api_irtcengine_enableinstantmediarendering__prototype"></a>

```ts
abstract enableInstantMediaRendering(): number;
```

<a id="api_irtcengine_enableinstantmediarendering__detailed_desc"></a>

成功调用该方法后，SDK 会开启加速出图和出声模式，可加快用户加入频道后的首帧出图与出声速度。

:::note
注： 主播端和观众端都需调用该方法开启音视频帧加速渲染才可体验该功能。
一旦成功调用该方法，只能通过调用 [release](/zh-CN/api-reference/rtc/react-native/initialize#api_irtcengine_release) 方法销毁 [IRtcEngine](/zh-CN/api-reference/rtc/react-native/rtc-interface-class#class_irtcengine) 对象来取消加速渲染。
:::

<a id="api_irtcengine_enableinstantmediarendering__scenario"></a>

### 适用场景 [#适用场景]

声网推荐在直播场景下，对观众开启该模式。

<a id="api_irtcengine_enableinstantmediarendering__timing"></a>

### 调用时机 [#调用时机]

该方法需要在加入频道前调用。

<a id="api_irtcengine_enableinstantmediarendering__return_values"></a>

### 返回值 [#返回值]

- 0: 方法调用成功。
- &lt; 0: 方法调用失败。详见[错误码](/zh-CN/api-reference/rtc/error-code)了解详情和解决建议。

  - -7: [IRtcEngine](/zh-CN/api-reference/rtc/react-native/rtc-interface-class#class_irtcengine) 尚未初始化就调用方法。

### 所属接口类 [#所属接口类]

- [IRtcEngine](/zh-CN/api-reference/rtc/react-native/rtc-interface-class#class_irtcengine)

<a id="api_irtcengine_setlocalrendermode2"></a>

<a id="ariaid-title3"></a>

## setLocalRenderMode [#setlocalrendermode]

更新本地视图显示模式。

<a id="api_irtcengine_setlocalrendermode2__prototype"></a>

```ts
abstract setLocalRenderMode(
    renderMode: RenderModeType,
    mirrorMode?: VideoMirrorModeType
  ): number;
```

<a id="api_irtcengine_setlocalrendermode2__detailed_desc"></a>

初始化本地用户视图后，你可以调用该方法更新本地用户视图的渲染和镜像模式。该方法只影响本地用户看到的视频画面，不影响本地视频的发布。

<a id="api_irtcengine_setlocalrendermode2__timing"></a>

### 调用时机 [#调用时机-1]

- 你可以在通话中多次调用该方法，多次更新本地用户视图的显示模式。

<a id="api_irtcengine_setlocalrendermode2__parameters"></a>

### 参数 [#参数]

<ParameterList>
<a id="rendermode"></a>
<Parameter name="renderMode">

本地视图显示模式。详见 [RenderModeType](/zh-CN/api-reference/rtc/react-native/enum-rendermodetype)。

</Parameter>
<a id="mirrormode"></a>
<Parameter name="mirrorMode">

本地视图的镜像模式，详见 [VideoMirrorModeType](/zh-CN/api-reference/rtc/react-native/enum-videomirrormodetype)。

:::note
注： 如果你使用前置摄像头，默认启动本地用户视图镜像模式；如果你使用后置摄像头，默认关闭本地视图镜像模式。
:::

</Parameter>
</ParameterList>

<a id="api_irtcengine_setlocalrendermode2__return_values"></a>

### 返回值 [#返回值-1]

- 0: 方法调用成功。
- &lt; 0: 方法调用失败。详见[错误码](/zh-CN/api-reference/rtc/error-code)了解详情和解决建议。

### 所属接口类 [#所属接口类-1]

- [IRtcEngine](/zh-CN/api-reference/rtc/react-native/rtc-interface-class#class_irtcengine)

<a id="api_irtcengine_setlocalrendertargetfps"></a>

<a id="ariaid-title4"></a>

## setLocalRenderTargetFps [#setlocalrendertargetfps]

设置本地视频渲染的最大帧率。

<a id="api_irtcengine_setlocalrendertargetfps__prototype"></a>

```ts
abstract setLocalRenderTargetFps(
    sourceType: VideoSourceType,
    targetFps: number
  ): number;
```

<a id="api_irtcengine_setlocalrendertargetfps__detailed_desc"></a>

<a id="api_irtcengine_setlocalrendertargetfps__scenario"></a>

### 适用场景 [#适用场景-1]

在对视频渲染帧率要求不高的场景（例如：屏幕共享、在线教育）下，你可以调用该方法设置本地视频渲染的最大帧率，SDK 进行本地渲染的实际帧率会尽量接近该值，从而减小 CPU 消耗、提升系统性能。

<a id="api_irtcengine_setlocalrendertargetfps__timing"></a>

### 调用时机 [#调用时机-2]

该方法在加入频道前后均可调用。

<a id="api_irtcengine_setlocalrendertargetfps__parameters"></a>

### 参数 [#参数-1]

<ParameterList>
<a id="sourcetype"></a>
<Parameter name="sourceType">

视频源的类型，详见 [VideoSourceType](/zh-CN/api-reference/rtc/react-native/enum-videosourcetype)。

</Parameter>
<a id="targetfps"></a>
<Parameter name="targetFps">

最大渲染帧率 (fps)。支持的参数值为：1、7、10、15、24、30、60。

:::note
注： 请将此参数设置为低于视频实际帧率的渲染帧率，否则设置将不会生效。
:::

</Parameter>
</ParameterList>

<a id="api_irtcengine_setlocalrendertargetfps__return_values"></a>

### 返回值 [#返回值-2]

- 0: 方法调用成功。
- &lt; 0: 方法调用失败。详见[错误码](/zh-CN/api-reference/rtc/error-code)了解详情和解决建议。

### 所属接口类 [#所属接口类-2]

- [IRtcEngine](/zh-CN/api-reference/rtc/react-native/rtc-interface-class#class_irtcengine)

<a id="api_irtcengine_setlocalvideomirrormode"></a>

<a id="ariaid-title5"></a>

## setLocalVideoMirrorMode [#setlocalvideomirrormode]

设置本地视频镜像。

<a id="api_irtcengine_setlocalvideomirrormode__prototype"></a>

```ts
abstract setLocalVideoMirrorMode(mirrorMode: VideoMirrorModeType): number;
```

<a id="api_irtcengine_setlocalvideomirrormode__detailed_desc"></a>

<a id="废弃"></a>

:::error[废弃]
弃用: 该方法已废弃。
:::

<a id="api_irtcengine_setlocalvideomirrormode__parameters"></a>

### 参数 [#参数-2]

<ParameterList>
<a id="mirrormode-1"></a>
<Parameter name="mirrorMode">

本地视频镜像模式。详见 [VideoMirrorModeType](/zh-CN/api-reference/rtc/react-native/enum-videomirrormodetype)。

</Parameter>
</ParameterList>

<a id="api_irtcengine_setlocalvideomirrormode__return_values"></a>

### 返回值 [#返回值-3]

- 0: 方法调用成功。
- &lt; 0: 方法调用失败。详见[错误码](/zh-CN/api-reference/rtc/error-code)了解详情和解决建议。

### 所属接口类 [#所属接口类-3]

- [IRtcEngine](/zh-CN/api-reference/rtc/react-native/rtc-interface-class#class_irtcengine)

<a id="api_irtcengine_setremoterendermode2"></a>

<a id="ariaid-title6"></a>

## setRemoteRenderMode [#setremoterendermode]

更新远端视图显示模式。

<a id="api_irtcengine_setremoterendermode2__prototype"></a>

```ts
abstract setRemoteRenderMode(
    uid: number,
    renderMode: RenderModeType,
    mirrorMode: VideoMirrorModeType
  ): number;
```

<a id="api_irtcengine_setremoterendermode2__detailed_desc"></a>

初始化远端用户视图后，你可以调用该方法更新远端用户视图在本地显示时的渲染和镜像模式。该方法只影响本地用户看到的视频画面。

:::note
注：

- 你可以在通话中多次调用该方法，多次更新远端用户视图的显示模式。
:::

<a id="api_irtcengine_setremoterendermode2__parameters"></a>

### 参数 [#参数-3]

<ParameterList>
<a id="uid"></a>
<Parameter name="uid">

远端用户 ID。

</Parameter>
<a id="rendermode-1"></a>
<Parameter name="renderMode">

远端用户视图的渲染模式，详见 [RenderModeType](/zh-CN/api-reference/rtc/react-native/enum-rendermodetype)。

</Parameter>
<a id="mirrormode-2"></a>
<Parameter name="mirrorMode">

远端用户视图的镜像模式，详见 [VideoMirrorModeType](/zh-CN/api-reference/rtc/react-native/enum-videomirrormodetype)。

</Parameter>
</ParameterList>

<a id="api_irtcengine_setremoterendermode2__return_values"></a>

### 返回值 [#返回值-4]

- 0：方法调用成功。
- &lt; 0：方法调用失败。详见[错误码](/zh-CN/api-reference/rtc/error-code)了解详情和解决建议。

### 所属接口类 [#所属接口类-4]

- [IRtcEngine](/zh-CN/api-reference/rtc/react-native/rtc-interface-class#class_irtcengine)

<a id="api_irtcengineex_setremoterendermodeex"></a>

<a id="ariaid-title7"></a>

## setRemoteRenderModeEx [#setremoterendermodeex]

设置远端视图显示模式。

<a id="api_irtcengineex_setremoterendermodeex__prototype"></a>

```ts
abstract setRemoteRenderModeEx(
    uid: number,
    renderMode: RenderModeType,
    mirrorMode: VideoMirrorModeType,
    connection: RtcConnection
  ): number;
```

<a id="api_irtcengineex_setremoterendermodeex__detailed_desc"></a>

初始化远端用户视图后，你可以调用该方法更新远端用户视图在本地显示时的渲染和镜像模式。该方法只影响本地用户看到的视频画面。

<a id="api_irtcengineex_setremoterendermodeex__parameters"></a>

### 参数 [#参数-4]

<ParameterList>
<a id="uid-1"></a>
<Parameter name="uid">

远端用户 ID。

</Parameter>
<a id="rendermode-2"></a>
<Parameter name="renderMode">

远端视图显示模式，详见 [RenderModeType](/zh-CN/api-reference/rtc/react-native/enum-rendermodetype)。

</Parameter>
<a id="mirrormode-3"></a>
<Parameter name="mirrorMode">

远端用户视图的镜像模式，详见 [VideoMirrorModeType](/zh-CN/api-reference/rtc/react-native/enum-videomirrormodetype)。

</Parameter>
<a id="connection"></a>
<Parameter name="connection">

Connection 信息。详见 [RtcConnection](/zh-CN/api-reference/rtc/react-native/class-rtcconnection)。

</Parameter>
</ParameterList>

<a id="api_irtcengineex_setremoterendermodeex__return_values"></a>

### 返回值 [#返回值-5]

- 0：方法调用成功。
- &lt; 0：方法调用失败。详见[错误码](/zh-CN/api-reference/rtc/error-code)了解详情和解决建议。

### 所属接口类 [#所属接口类-5]

- [IRtcEngineEx](/zh-CN/api-reference/rtc/react-native/rtc-interface-class#class_irtcengineex)

<a id="api_irtcengine_setremoterendertargetfps"></a>

<a id="ariaid-title8"></a>

## setRemoteRenderTargetFps [#setremoterendertargetfps]

设置视频在远端渲染的最大帧率。

<a id="api_irtcengine_setremoterendertargetfps__prototype"></a>

```ts
abstract setRemoteRenderTargetFps(targetFps: number): number;
```

<a id="api_irtcengine_setremoterendertargetfps__detailed_desc"></a>

<a id="api_irtcengine_setremoterendertargetfps__scenario"></a>

### 适用场景 [#适用场景-2]

在对视频渲染帧率要求不高的场景（例如：屏幕共享、在线教育）或者远端使用中低端设备的场景下，你可以调用该方法设置视频在远端渲染的最大帧率，SDK 进行远端视频渲染的实际帧率会尽量接近该值，从而减小 CPU 消耗、提升系统性能。

<a id="api_irtcengine_setremoterendertargetfps__timing"></a>

### 调用时机 [#调用时机-3]

该方法在加入频道前后均可调用。

<a id="api_irtcengine_setremoterendertargetfps__parameters"></a>

### 参数 [#参数-5]

<ParameterList>
<a id="targetfps-1"></a>
<Parameter name="targetFps">

最大渲染帧率 (fps)。支持的参数值为：1、7、10、15、24、30、60。

:::note
注： 请将此参数设置为低于视频实际帧率的渲染帧率，否则设置将不会生效。
:::

</Parameter>
</ParameterList>

<a id="api_irtcengine_setremoterendertargetfps__return_values"></a>

### 返回值 [#返回值-6]

- 0: 方法调用成功。
- &lt; 0: 方法调用失败。详见[错误码](/zh-CN/api-reference/rtc/error-code)了解详情和解决建议。

### 所属接口类 [#所属接口类-6]

- [IRtcEngine](/zh-CN/api-reference/rtc/react-native/rtc-interface-class#class_irtcengine)

<a id="api_imediaplayer_setrendermode"></a>

<a id="ariaid-title9"></a>

## setRenderMode [#setrendermode]

设置播放器视图的渲染模式。

<a id="api_imediaplayer_setrendermode__prototype"></a>

```ts
abstract setRenderMode(renderMode: RenderModeType): number;
```

<a id="api_imediaplayer_setrendermode__detailed_desc"></a>

<a id="api_imediaplayer_setrendermode__parameters"></a>

### 参数 [#参数-6]

<ParameterList>
<a id="rendermode-3"></a>
<Parameter name="renderMode">

播放器视图的渲染模式。详见 [RenderModeType](/zh-CN/api-reference/rtc/react-native/enum-rendermodetype)。

</Parameter>
</ParameterList>

<a id="api_imediaplayer_setrendermode__return_values"></a>

### 返回值 [#返回值-7]

- 0: 方法调用成功。
- &lt; 0: 方法调用失败。详见[错误码](/zh-CN/api-reference/rtc/error-code)了解详情和解决建议。

### 所属接口类 [#所属接口类-7]

- [IMediaPlayer](/zh-CN/api-reference/rtc/react-native/rtc-interface-class#class_imediaplayer)

<a id="api_irtcengine_startmediarenderingtracing"></a>

<a id="ariaid-title10"></a>

## startMediaRenderingTracing [#startmediarenderingtracing]

开启视频帧渲染数据打点。

<a id="api_irtcengine_startmediarenderingtracing__prototype"></a>

```ts
abstract startMediaRenderingTracing(): number;
```

<a id="api_irtcengine_startmediarenderingtracing__detailed_desc"></a>

成功调用该方法后，SDK 会以调用该方法的时刻作为起点，并通过 [onVideoRenderingTracingResult](/zh-CN/api-reference/rtc/react-native/video/video-rendering#callback_irtcengineeventhandler_onvideorenderingtracingresult) 回调报告视频帧渲染的相关信息。

:::note
注：

- 如果你未调用该方法，SDK 默认以调用 [joinChannel](/zh-CN/api-reference/rtc/react-native/channel#api_irtcengine_joinchannel2) 加入频道的时刻为起始点开始打点，自动开始跟踪视频的渲染事件。你可以根据实际业务场景，在合适的时机调用该方法，进行自定义打点。
- 离开当前频道后，SDK 会自动重置该时间点为下一次加入频道的时刻。
:::

<a id="api_irtcengine_startmediarenderingtracing__scenario"></a>

### 适用场景 [#适用场景-3]

声网推荐你将该方法和 App 中的 UI 设置（按钮、滑动条等）结合使用，用于获取符合终端用户实际体验的首帧出图耗时的场景。例如：在终端用户在点击 加入频道 按钮的时刻调用该方法进行打点，然后通过 `onVideoRenderingTracingResult` 回调获取视频帧渲染过程中的各阶段耗时，从而针对各阶段耗时进行专项优化。

<a id="api_irtcengine_startmediarenderingtracing__return_values"></a>

### 返回值 [#返回值-8]

- 0: 方法调用成功。
- &lt; 0: 方法调用失败。详见[错误码](/zh-CN/api-reference/rtc/error-code)了解详情和解决建议。

  - -7: [IRtcEngine](/zh-CN/api-reference/rtc/react-native/rtc-interface-class#class_irtcengine) 尚未初始化就调用方法。

### 所属接口类 [#所属接口类-8]

- [IRtcEngine](/zh-CN/api-reference/rtc/react-native/rtc-interface-class#class_irtcengine)

<a id="api_irtcengineex_startmediarenderingtracingex"></a>

<a id="ariaid-title11"></a>

## startMediaRenderingTracingEx [#startmediarenderingtracingex]

开启视频帧渲染数据打点。

<a id="api_irtcengineex_startmediarenderingtracingex__prototype"></a>

```ts
abstract startMediaRenderingTracingEx(connection: RtcConnection): number;
```

<a id="api_irtcengineex_startmediarenderingtracingex__detailed_desc"></a>

成功调用该方法后，SDK 会以调用该方法的时刻作为起点，并通过 [onVideoRenderingTracingResult](/zh-CN/api-reference/rtc/react-native/video/video-rendering#callback_irtcengineeventhandler_onvideorenderingtracingresult) 回调报告视频帧渲染的相关信息。

:::note
注：

- 如果你未调用该方法，SDK 默认以调用 [joinChannel](/zh-CN/api-reference/rtc/react-native/channel#api_irtcengine_joinchannel2) 加入频道的时刻为起始点开始打点，自动开始跟踪视频的渲染事件。你可以根据实际业务场景，在合适的时机调用该方法，进行自定义打点。
- 离开当前频道后，SDK 会自动重置该时间点为下一次加入频道的时刻。
:::

<a id="api_irtcengineex_startmediarenderingtracingex__scenario"></a>

### 适用场景 [#适用场景-4]

声网推荐你将该方法和 App 中的 UI 设置（按钮、滑动条等）结合使用，用于获取符合终端用户实际体验的首帧出图耗时的场景。例如：在终端用户在点击 加入频道 按钮的时刻调用该方法进行打点，然后通过 `onVideoRenderingTracingResult` 回调获取视频帧渲染过程中的各阶段耗时，从而针对各阶段耗时进行专项优化。

<a id="api_irtcengineex_startmediarenderingtracingex__parameters"></a>

### 参数 [#参数-7]

<ParameterList>
<a id="connection-1"></a>
<Parameter name="connection">

Connection 信息。详见 [RtcConnection](/zh-CN/api-reference/rtc/react-native/class-rtcconnection)。

</Parameter>
</ParameterList>

<a id="api_irtcengineex_startmediarenderingtracingex__return_values"></a>

### 返回值 [#返回值-9]

- 0: 方法调用成功。
- &lt; 0: 方法调用失败。详见[错误码](/zh-CN/api-reference/rtc/error-code)了解详情和解决建议。

### 所属接口类 [#所属接口类-9]

- [IRtcEngineEx](/zh-CN/api-reference/rtc/react-native/rtc-interface-class#class_irtcengineex)

<a id="callback_irtcengineeventhandler_ontranscodedstreamlayoutinfo"></a>

<a id="ariaid-title12"></a>

## onTranscodedStreamLayoutInfo [#ontranscodedstreamlayoutinfo]

已接收携带布局信息的合图视频流回调。

<a id="callback_irtcengineeventhandler_ontranscodedstreamlayoutinfo__prototype"></a>

```ts
onTranscodedStreamLayoutInfo?(
    connection: RtcConnection,
    uid: number,
    width: number,
    height: number,
    layoutCount: number,
    layoutlist: VideoLayout[]
  ): void;
```

<a id="callback_irtcengineeventhandler_ontranscodedstreamlayoutinfo__detailed_desc"></a>

当本地第一次接收到合图服务器发送的合图视频流，或者合图流的布局信息有变化时，SDK 会触发该回调，报告合图视频流中每一路子视频流的布局信息。

<a id="callback_irtcengineeventhandler_ontranscodedstreamlayoutinfo__parameters"></a>

### 参数 [#参数-8]

<ParameterList>
<a id="connection-2"></a>
<Parameter name="connection">

Connection 信息。详见 [RtcConnection](/zh-CN/api-reference/rtc/react-native/class-rtcconnection)。

</Parameter>
<a id="uid-2"></a>
<Parameter name="uid">

发布合图视频流的用户 ID。

</Parameter>
<a id="width"></a>
<Parameter name="width">

合图视频流的宽度 (px)。

</Parameter>
<a id="height"></a>
<Parameter name="height">

合图视频流的高度 (px)。

</Parameter>
<a id="layoutcount"></a>
<Parameter name="layoutCount">

合图视频流中布局信息的数量。

</Parameter>
<a id="layoutlist"></a>
<Parameter name="layoutlist">

某一路合图视频流的详细布局信息。详见 [VideoLayout](/zh-CN/api-reference/rtc/react-native/class-videolayout)。

</Parameter>
</ParameterList>

### 所属接口类 [#所属接口类-10]

- [IRtcEngineEventHandler](/zh-CN/api-reference/rtc/react-native/rtc-interface-class#class_irtcengineeventhandler)

<a id="callback_irtcengineeventhandler_onvideorenderingtracingresult"></a>

<a id="ariaid-title13"></a>

## onVideoRenderingTracingResult [#onvideorenderingtracingresult]

视频帧渲染事件回调。

<a id="callback_irtcengineeventhandler_onvideorenderingtracingresult__prototype"></a>

```ts
onVideoRenderingTracingResult?(
    connection: RtcConnection,
    uid: number,
    currentEvent: MediaTraceEvent,
    tracingInfo: VideoRenderingTracingInfo
  ): void;
```

<a id="callback_irtcengineeventhandler_onvideorenderingtracingresult__detailed_desc"></a>

调用 [startMediaRenderingTracing](/zh-CN/api-reference/rtc/react-native/video/video-rendering#api_irtcengine_startmediarenderingtracing) 方法或加入频道后，SDK 会触发该回调，报告视频帧渲染的事件和渲染过程中的指标。开发者可以针对指标进行专项优化，以提高出图效率。

<a id="callback_irtcengineeventhandler_onvideorenderingtracingresult__parameters"></a>

### 参数 [#参数-9]

<ParameterList>
<a id="connection-3"></a>
<Parameter name="connection">

Connection 信息。详见 [RtcConnection](/zh-CN/api-reference/rtc/react-native/class-rtcconnection)。

</Parameter>
<a id="uid-3"></a>
<Parameter name="uid">

用户 ID。

</Parameter>
<a id="currentevent"></a>
<Parameter name="currentEvent">

当前视频帧渲染事件。详见 [MediaTraceEvent](/zh-CN/api-reference/rtc/react-native/enum-mediatraceevent)。

</Parameter>
<a id="tracinginfo"></a>
<Parameter name="tracingInfo">

视频帧渲染过程中的指标。开发者需要尽可能降低指标值，以提高出图效率。详见 [VideoRenderingTracingInfo](/zh-CN/api-reference/rtc/react-native/class-videorenderingtracinginfo)。

</Parameter>
</ParameterList>

### 所属接口类 [#所属接口类-11]

- [IRtcEngineEventHandler](/zh-CN/api-reference/rtc/react-native/rtc-interface-class#class_irtcengineeventhandler)