Web页面主播端集成

第一步：构建一个Web应用

• 您可以使用任意适合您业务的框架、技术栈来构建一个Web应用。

• 您的Web应用可以使用任意一种Ajax请求工具（原生xhr、axios、fetch Api等）请求到您的服务端接口。

第二步：请求服务端接口，获取所需的信息

您的服务端可以集成的直播场景中的部分接口如下：

1. 创建直播

   调用CreateLiveRoom - 创建直播接口，创建一个未开播的新直播，获取直播ID（LiveId）等信息。

2. 获取直播详情

   调用GetLiveRoom - 获取直播详情接口，可以使用直播ID获取该场直播的详细信息。

3. 获取直播列表

   调用ListLiveRooms - 批量查询直播信息接口或ListLiveRoomsById - 批量查询直播信息接口，可以获取到您的应用下对应的直播列表，可以用来构建您Web页面上的直播列表。

4. 获取跳转链接

   调用GetStandardRoomJumpUrl接口，BizType选择live，即互动直播场景，BizId填写创建直播、直播详情或直播列表接口中获取的直播ID。如果回调正常，返回参数中StandardRoomJumpUrl所包含的内容即跳转链接。如：

   aliyunclient://*.*.*.*:8080/entry/standard_live?nick=***&liveId=bb3fa7**-d0c6-43d2-891a-****&userAuthSession=****-***-43d0-a4b2-f496f70d0e94

   重要

   为了跳转链接的安全，跳转链接只能使用一次，再次点击会提示"当前会话已过期"。如果您在直播或上课过程中，客户端意外退出，需要再次调用GetStandardRoomJumpUrl，使用相同的BizId获取一个新链接。

其他直播相关的服务端接口可以参阅：直播API列表。

第三步：根据您的业务需求，开发Web页面

• 您可以将您的Web页面构建成主播开播界面，使用创建直播接口创建一场直播，也可以编辑直播的详细信息。

• 您可以使用通过获取直播详情接口和获取直播列表接口获取的信息，在您的Web页面中展示直播列表与直播详情。这里可以做成直播管理页，也可以做成对客户的页面。

• 您可以使用获取跳转链接接口获取到Windows端推流工具的跳转链接，将此链接放置到Web端的按钮或链接中，以打开PC端推流工具开始直播。安装Windows端推流工具的方法请参见附录：下载安装Windows端推流工具。下面是代码实例：

  <!-- 您可以使用a标签，将跳转链接放入href属性中 -->
  <a href="aliyunclient://*.*.*.*:8080/entry/standard_live?nick=***&liveId=bb3fa7**-d0c6-43d2-891a-****&userAuthSession=****-***-43d0-a4b2-f496f70d0e94">
      打开客户端软件
  </a>
  
  <!-- 您也可以使用任意Dom元素，绑定触发事件，在事件中调用window.open -->
  <button id="btn">打开客户端软件</button>
  <script>
  var dom = document.querySelector('#btn');
  dom.addEventListener('click', function() {
    window.open('aliyunclient://*.*.*.*:8080/entry/standard_live?nick=***&liveId=bb3fa7**-d0c6-43d2-891a-****&userAuthSession=****-***-43d0-a4b2-f496f70d0e94')
  })
  </script>

附录：下载安装Windows端推流工具

登录低代码音视频工厂控制台，在应用管理 > SDK下载下载最新版本的PC端推流工具。

直播推流与互动课堂为同一个安装程序。程序安装完成后会在注册表注册aliyunclient的协议，您可以在您的Web页面上点击aliyunClient协议头的跳转链接唤起PC客户端，PC客户端有推流与弹幕互动能力。