跳到主要内容

音视频直播 Demo

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

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

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

环境要求​

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

前置条件​

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

获取 Token​

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

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

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

  1. 前往控制台的密钥管理页面。

  2. 在 管理测试用户 区域输入用户 ID 1,点击 获取 Token 生成该用户的 Token。

  3. 记录生成的 Token,用于体验时使用。

  4. 重复上一步,输入用户 ID 2 并生成第二个用户的 Token。记录下该 Token,用于体验时使用。

运行 QuickDemo​

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

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

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

  1. 克隆下载示例代码

    shell
    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-Z、a-z、0-9、+、=、-、_
  3. 主播端发布完资源后,页面将显示直播视频流地址(liveUrl)

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

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