频道秒开

秒开是指在观众进入频道时，画面能够在最短的时间内加载并显示出来，没有明显的加载过程。秒开功能可以优化观看体验，让观众能够更快速地进入频道并即刻看到内容，提升观看的连贯性和流畅度。

点击如下视频体验频道秒开：

本文介绍如何在你的 App 中实现频道秒开的效果。参考本文完成集成后，在 Windows 和 macOS 端的 Chrome 浏览器上，首帧出图时间最低可至 300 毫秒以内。

实现原理Copy Anchor Link

下图是秒开最佳实践的原理图：

实现步骤Copy Anchor Link

按照以下流程实现秒开最佳实践：

1. 在频道列表页面Copy Anchor Link

在频道列表页面，对用户视野范围内的频道进行预加载，并按需使用通配 Token。

具体操作如下：

• 如果频道总数量不超过 10，通过 preload 方法对所有频道进行预加载。
• 如果频道总数量超过 10，通过 preload 方法对仅前 10 个进行频道预加载。如果用户滑动频道列表，那么当滑动停止时，再通过 preload 方法对视野范围内的频道进行预加载。
• preload 方法的 token 参数可以使用通配 Token，以加快后续加入频道的速度。

2. 与单个频道入口交互Copy Anchor Link

在频道列表页面，用户通过鼠标悬停在某个频道的入口。对于不同的鼠标交互动作，你需要为秒开做的具体操作如下：

2.1 进入频道前Copy Anchor Link

用户将鼠标悬停到某个频道的入口时，进入频道前，建议提前加入频道，订阅音视频流。

具体操作如下：

• 调用 join 加入频道，并订阅主播的音视频流。
• 可以在预览的小窗口提前渲染视频。
• join 方法的 token 参数可以使用通配 Token，以加快加入频道的速度。

2.2 进入频道Copy Anchor Link

用户进入频道时，为减少等待主播视频首帧渲染出图的时间，你可以开启用户进入频道即下发主播媒体流的功能：在调用 join 加入频道时，将 options 参数中的 autoSubscribe 设为 true，表示自动订阅主播的媒体流。

// 创建 client
const client = AgoraRTC.createClient({
  mode: "live",
  codec: "vp8",
  role: "host",
});
 
// client 加入频道，并且开启 预订阅
await client.join(APP_ID, CNAME, TOKEN, UID / null, {
  autoSubscribe: true,
});

下文对比开启下发媒体流功能前后，用户进入频道至渲染主播媒体流的步骤：

当用户触碰频道入口完成有效点击后，进入频道，那么建议操作如下：

• 当用户完成有效点击时，App 界面应该从“频道列表页面”切换到“单个频道页面”，建议你增加页面切换动画。
• 音视频分别调用 IRemoteAudioTrack.play 和 IRemoteVideoTrack.play 方法，注意视频需要传入指定的 DOM 元素。

2.3 不进入频道Copy Anchor Link

如果用户悬停频道入口后，移开鼠标，未完成有效点击，不进入频道，那么建议操作：调用 leave 离开频道。

注意事项Copy Anchor Link

• 通配 Token 可以加快加入频道的速度，但是可能会引起“炸房”风险，请结合具体需求决定是否使用通配 Token。
• 预先加入上述频道会增加额外的费用，请在使用时注意。详见基础服务。

相关文档Copy Anchor Link

当前秀场直播场景已实现秒开秒切功能，相关信息可参考实现秒开秒切。