跳到主要内容

音视频直播 Demo

融云低延迟直播 Demo 演示了融云产品低延迟直播在 Web 端的功能,以便开发者体验产品,快速集成,实现单群聊、音视频通话、语音聊天室、娱乐直播、教学课堂、多人会议等场景需求。

  • QuickDemo(GitHub · Gitee),本文以运行 QuickDemo 为例。

如果想要直接体验产品效果,欢迎前往融云官网查看各场景的演示应用

环境要求

所有支持浏览器请参见 Web 兼容性。推荐使用 Google Chrome 最新版体验 Demo。

前置条件

  • 创建融云开发者账号,获取 App Key。注册成功后,融云控制台会默认自动创建您的首个应用,默认生成在开发环境下的 App Key,使用国内数据中心。
  • 开通音视频通话服务,以及音视频直播服务。开发环境下可免费开通,每个应用均可享有 10000 分钟免费体验时长,免费体验时长用完即止。生产环境下需要先预存费用才可开通。服务开通后最长 30 分钟生效。详见开通音视频服务

获取 Token

应用客户端必须连接融云服务器才能使用融云即时通讯功能。连接时必须传入 Token 参数。Token 是与用户 ID 对应的身份验证令牌,是应用客户端用户在融云的唯一身份标识。

在实际业务运行过程中,应用客户端需要通过应用的服务端向融云服务端申请取得 Token,具体方法可参考 Server API 获取 Token

在本教程中,为了快速体验和测试 SDK,我们从融云控制台获取两个用户 Token,用于后续体验。

  1. 访问控制台「北极星」开发者工具箱的 IM Server API 调试 页面。

  2. 用户标签下,找到 用户服务 > 获取 Token 接口。

  3. 根据页面提示,填写 userId,并提交。

    在以下示例中,我们将获取到 userId 为 1 的用户的 Token。

    getToken

    提交后,可在左侧结果中取得 Token 字符串。记录下该 Token,用于体验时使用。

  4. 重复上一步,获取 userId 为 2 的用户的 Token。记录下该 Token,用于体验时使用。

运行 QuickDemo

在运行 QuickDemo 前请确保已完成上述步骤。以下是检查清单:

  • 已注册融云开发者账户
  • 已准备好 App Key
  • 已开通音视频服务免费体验,且已等待 30 分钟
  • 已获取用于体验的两个 Token

以下我们使用已获取的两个 Token,分别模拟主播端和观众端的使用行为。

  1. 克隆下载示例代码。

    git clone https://github.com/rongcloud/web-quickdemo-rtc-living.git

    下载后可看到两个页面:anchor.html 为主播端页面,audience.html 为观众端页面。

  2. 使用浏览器直接打开主播端页面 anchor.html。运行成功后,请按照提示点击,并输入以下值:

    • App Key
    • 主播 Token:userId 为 1 的用户的 Token
    • 房间 ID:房间号长度不能超过 64,可包含 A-Za-z0-9+=-_
  3. 主播端发布完资源后,页面将显示直播视频流地址(liveUrl)。

  4. 使用浏览器直接打开主播端页面 audience.html。运行成功后,请按照提示点击,并输入以下值:

    • App Key
    • 观众 Token:userId 为 2 的用户的 Token
    • 直播视频流地址:请从主播端的页面复制 liveUrl 地址,在观众端输入