实时音视频

实时语音

超低延迟直播

即时通讯

互动核心产品

音视频通话 UIKit

互动直播 UIKit

语聊房 UIKit

IMKit

UIKits

超级白板

云端播放器

AI 美颜

云端录制

小游戏平台

本地服务端录制

星图

互动扩展服务

数字人 PaSS 服务

AIGC

数美内容审核

大饼 AI 变声

实时传译

云市场

产品

语聊房

秀场直播

在线 KTV

在线健身

互动播客

社交娱乐

小班课

大班课

在线音乐教学

在线美术教学

在线编程教学

在线教育

远程医疗

医疗健康

语音通话

视频通话

视频会议

协同办公

解决方案

控制台

安全合规

术语表

ZEGO 平台

通用文档

概述

功能地图

使用 Token 鉴权

使用 HTML 脚本

使用 NPM

使用 WordPress

快速开始

切换语言

实现纯语音互动

设置直播延迟模式

隐藏直播前检测功能

设置房间人数上限

实现分享邀请链接

设置用户头像

设置视频分辨率

设置进出房间回调

房间消息

观众连麦

启用视频混流

自定义文本消息 UI

屏幕共享

恢复直播

基础功能

互动直播 UIKit 提供默认行为和风格，但如果默认行为和样式不能完全满足您的需求，您也可以自定义 UIKit。

# 功能地图

互动直播 UIKit 提供默认行为和风格，但如果默认行为和样式不能完全满足您的需求，您也可以自定义 UIKit。

图中显示的数字与特定功能列表中的类别相对应。

<a id="t1" href="#顶部区域">1 通话前检测页面</a>

<Frame width="512" height="auto" caption=""><img src="https://storage.zego.im/sdk-doc/Pics/ZegoUIKit/Web/feature_map/Live_streaming_map_web_1.jpeg" /></Frame>

<a id="t2" href="#顶部区域">2 顶部区域</a>&nbsp;&nbsp;&nbsp;&nbsp;<a id="t3" href="#视频区域">3 视频区域</a>&nbsp;&nbsp;&nbsp;&nbsp;<a id="t4" href="#底部菜单栏">4 底部菜单栏</a>

<Frame width="512" height="auto" caption=""><img src="https://storage.zego.im/sdk-doc/Pics/ZegoUIKit/Web/feature_map/Live_streaming_map_web_2.jpeg" /></Frame>

<a id="t5" href="#房间详情侧边栏">5 房间详情侧边栏</a>

<Frame width="512" height="auto" caption=""><img src="https://storage.zego.im/sdk-doc/Pics/ZegoUIKit/Web/feature_map/Live_streaming_map_web_3.jpeg" /></Frame>

<a id="t6" href="#房间成员列表侧边栏">6 房间成员列表侧边栏</a>

<Frame width="512" height="auto" caption=""><img src="https://storage.zego.im/sdk-doc/Pics/ZegoUIKit/Web/feature_map/Live_streaming_map_web_4.jpeg" /></Frame>

<a id="t7" href="#房间信息侧边栏">7 房间信息侧边栏</a>

<Frame width="512" height="auto" caption=""><img src="https://storage.zego.im/sdk-doc/Pics/ZegoUIKit/Web/feature_map/Live_streaming_map_web_5.jpeg" /></Frame>

<a id="t8" href="#屏幕共享页面">8 屏幕共享页面</a>

<Frame width="512" height="auto" caption=""><img src="https://storage.zego.im/sdk-doc/Pics/ZegoUIKit/Web/feature_map/Live_streaming_map_web_6.jpeg" /></Frame>

<a id="t9" href="#离开房间弹窗">9 离开房间弹窗</a>

<Frame width="512" height="auto" caption=""><img src="https://storage.zego.im/sdk-doc/Pics/ZegoUIKit/Web/feature_map/Live_streaming_map_web_7.jpeg" /></Frame>

<a id="t10" href="#离开房间后页面">10 离开房间后页面</a>
<Frame width="512" height="auto" caption=""><img src="https://storage.zego.im/sdk-doc/Pics/ZegoUIKit/Web/feature_map/callkit_web_map_8.jpeg" /></Frame>

<table>
  <tbody>
    <tr>
      <th>类别</th>
      <th>功能</th>
      <th>描述</th>
    </tr>
    <tr id="通话前检测页面">
      <th><a href="#t1">1 通话前检测页面</a></th>
      <td>自定义通话前检测页面</td>
      <td>
        支持：
        <ul>
          <li><a href="Custom%20prebuilt%20features/Set%20a%20direct%20join%20session.mdx" target="_blank">隐藏通话前检测功能</a></li>
          <li><a href="Custom%20prebuilt%20features/Limit%20the%20number%20of%20participants.mdx" target="_blank">设置房间人数上限</a></li>
          <li><a href="Custom%20prebuilt%20features/Invite%20via%20a%20shared%20link.mdx" target="_blank">生成分享邀请链接</a></li>
        </ul>
      </td>
    </tr>
    <tr id="顶部区域">
      <th><a href="#t2">2 顶部区域</a></th>
      <td>自定义顶部区域</td>
      <td>
        支持：
        <ul>
          <li>显示计时器，查看通话时长。</li>
          <li>设置顶部区域 Logo 图片。</li>
        </ul>
      </td>
    </tr>
    <tr id="视频区域">
      <th rowspan="4"><a href="#t3">3 视频区域</a></th>
      <td><a href="Custom%20prebuilt%20features/Set%20user%20avatar.mdx" target="_blank">自定义用户头像</a></td>
      <td>支持使用您的图片资源作为用户头像。</td>
    </tr>
    <tr>
      <td><a href="Custom%20prebuilt%20features/Set%20video%20resolution.mdx" target="_blank">设置视频分辨率</a></td>
      <td>支持调整视频分辨率。</td>
    </tr>
    <tr>
      <td>调整布局</td>
      <td>提供 <code>sidebar</code> 和 <code>grid</code> 两种视图布局。</td>
    </tr>
    <tr>
      <td>显示或隐藏按钮</td>
      <td>
        支持的按钮如下：
        <ul>
          <li>关闭远端摄像头按钮。</li>
          <li>关闭远端麦克风按钮。</li>
          <li>移出用户按钮。</li>
          <li>置顶用户按钮。</li>
        </ul>
      </td>
    </tr>
    <tr id="底部菜单栏">
      <th><a href="#t4">4 底部菜单栏</a></th>
      <td>自定义菜单栏</td>
      <td>
        支持隐藏或显示如下按钮：
        <ul>
          <li>摄像头按钮</li>
          <li>麦克风按钮</li>
          <li>屏幕共享按钮</li>
          <li>音视频设置按钮</li>
          <li>布局切换按钮</li>
          <li>房间详情按钮</li>
          <li>成员列表按钮</li>
          <li>聊天按钮</li>
        </ul>
      </td>
    </tr>
    <tr id="房间详情侧边栏">
      <th><a href="#t5">5 房间详情侧边栏</a></th>
      <td><a href="Custom%20prebuilt%20features/Invite%20via%20a%20shared%20link.mdx" target="_blank">生成分享邀请链接</a></td>
      <td>用户可在此侧边栏获取加入通话链接，分享给其他用户。</td>
    </tr>
    <tr id="房间成员列表侧边栏">
      <th><a href="#t6">6 房间成员列表侧边栏</a></th>
      <td>自定义列表</td>
      <td>
        支持：
        <ul>
          <li>是否展示没开启摄像头的用户。</li>
          <li>是否展示没开启麦克风的用户。</li>
          <li>是否提供搜索功能。</li>
        </ul>
      </td>
    </tr>
    <tr id="房间消息侧边栏">
      <th><a href="#t7">7 房间消息侧边栏</a></th>
      <td>设置聊天消息参数</td>
      <td>支持设置聊天消息额外配置参数。</td>
    </tr>
    <tr id="屏幕共享页面">
      <th><a href="#t8">8 屏幕共享页面</a></th>
      <td><a href="Custom%20prebuilt%20features/Screen%20sharing.mdx" target="_blank">设置屏幕共享</a></td>
      <td>
        支持：
        <ul>
          <li>禁用屏幕共享。</li>
          <li>设置屏幕共享的分辨率。</li>
        </ul>
      </td>
    </tr>
    <tr id="离开房间弹窗">
      <th><a href="#t9">9 离开房间弹窗</a></th>
      <td>自定义离开房间弹窗</td>
      <td>支持显示或隐藏离开房间弹框。</td>
    </tr>
    <tr id="离开房间页面">
      <th><a href="#t10">10 离开房间后页面</a></th>
      <td>自定义离开房间后页面</td>
      <td>用户离开房间后，是否显示 ZEGO 提供的离开房间页面。</td>
    </tr>
    <tr>
      <th>其他</th>
      <td><a href="Custom%20prebuilt%20features/Custom%20message%20UI.mdx" target="_blank">自定义文本消息的 UI</a></td>
      <td>支持自定义文本消息的显示样式。</td>
    </tr>
    <tr>
      <th rowspan="12">回调</th>
      <td><a href="Custom%20prebuilt%20features/Callback%20on%20room%20joining%20or%20leaving.mdx" target="_blank">用户进入房间</a></td>
      <td rowspan="12">-</td>
    </tr>
    <tr>
      <td><a href="Custom%20prebuilt%20features/Callback%20on%20room%20joining%20or%20leaving.mdx" target="_blank">用户离开房间</a></td>
    </tr>
    <tr>
      <td><a href="Custom%20prebuilt%20features/In-room%20messages.mdx" target="_blank">其他用户进入房间</a></td>
    </tr>
    <tr>
      <td><a href="Custom%20prebuilt%20features/In-room%20messages.mdx" target="_blank">其他用户离开房间</a></td>
    </tr>
    <tr>
      <td>通话开始</td>
    </tr>
    <tr>
      <td>通话结束</td>
    </tr>
    <tr>
      <td>当前用户被移出房间</td>
    </tr>
    <tr>
      <td><a href="Custom%20prebuilt%20features/In-room%20messages.mdx" target="_blank">收到房间聊天消息</a></td>
    </tr>
    <tr>
      <td>收到房间自定义消息</td>
    </tr>
    <tr>
      <td>收到 ZIM 房间文本消息</td>
    </tr>
    <tr>
      <td><a href="Custom%20prebuilt%20features/In-room%20messages.mdx" target="_blank">收到 ZIM 房间自定义消息</a></td>
    </tr>
    <tr>
      <td>在 ZEGO 提供的离开房间后页面上点击返回首页按钮</td>
    </tr>
  </tbody>
</table>


类别	功能	描述
1 通话前检测页面	自定义通话前检测页面	支持：隐藏通话前检测功能设置房间人数上限生成分享邀请链接
2 顶部区域	自定义顶部区域	支持：显示计时器，查看通话时长。设置顶部区域 Logo 图片。
3 视频区域	自定义用户头像	支持使用您的图片资源作为用户头像。
	设置视频分辨率	支持调整视频分辨率。
	调整布局	提供 `sidebar` 和 `grid` 两种视图布局。
	显示或隐藏按钮	支持的按钮如下：关闭远端摄像头按钮。关闭远端麦克风按钮。移出用户按钮。置顶用户按钮。
4 底部菜单栏	自定义菜单栏	支持隐藏或显示如下按钮：摄像头按钮麦克风按钮屏幕共享按钮音视频设置按钮布局切换按钮房间详情按钮成员列表按钮聊天按钮
5 房间详情侧边栏	生成分享邀请链接	用户可在此侧边栏获取加入通话链接，分享给其他用户。
6 房间成员列表侧边栏	自定义列表	支持：是否展示没开启摄像头的用户。是否展示没开启麦克风的用户。是否提供搜索功能。
7 房间消息侧边栏	设置聊天消息参数	支持设置聊天消息额外配置参数。
8 屏幕共享页面	设置屏幕共享	支持：禁用屏幕共享。设置屏幕共享的分辨率。
9 离开房间弹窗	自定义离开房间弹窗	支持显示或隐藏离开房间弹框。
10 离开房间后页面	自定义离开房间后页面	用户离开房间后，是否显示 ZEGO 提供的离开房间页面。
其他	自定义文本消息的 UI	支持自定义文本消息的显示样式。
回调	用户进入房间	-
	用户离开房间
	其他用户进入房间
	其他用户离开房间
	通话开始
	通话结束
	当前用户被移出房间
	收到房间聊天消息
	收到房间自定义消息
	收到 ZIM 房间文本消息
	收到 ZIM 房间自定义消息
	在 ZEGO 提供的离开房间后页面上点击返回首页按钮