You need to enable JavaScript to run this app.
导航

体验 Demo

最近更新时间2024.02.23 15:32:53

首次发布时间2022.02.24 19:19:07

本文介绍了通过观播 SDK 搭建的直播间 Demo。

线上 Demo 调试

您可以使用 SDK demo playground 配置不同版本的 SDK 以及不同直播间,修改模板代码后实时预览效果,实现线上效果调试。详见企业直播 Web SDK demo playground
如需获取所有线上 Demo,请查看线上 Demo 汇总

直播间示例

标准直播间

对用户评论不做限制,用户输入昵称即可评论。集成方便,无需调用服务端 API。

终端

示例

Demo

移动端

图片

图片

PC 端

图片

Demo 地址

第三方用户态直播间

使用用户昵称和 ID 调用获取拉流 SDK 初始化 Token 接口获取用户 token 并初始化 SDK,集成您的自有账号体系。
您也可以选择让观众以游客身份进入直播间,使用公开权限 token(mode=1)初始化 SDK。具体流程见下图。
图片

终端

示例

Demo

PC 端(进入直播间前)

图片

Demo 地址

PC 端(以游客身份进入直播间单击评论区)

图片

纯净播放器直播间

单独集成播放器模块,适用于只集成播放器的场景。

终端

示例

Demo

移动端

图片

图片

PC 端

图片

Demo 地址

画中画直播间

PC 端支持以画中画模式播放直播画面,移动端支持以视频小窗模式播放直播画面。

终端

示例

Demo

移动端

图片

图片

PC 端

图片

Demo 地址

整页嵌入直播间

组装了播放器、多线路和菜单模块的移动端直播间。

终端

示例

Demo

移动端

图片

图片

整页嵌入竖屏直播间

组装了播放器、多线路和菜单模块的移动端竖屏直播间。

终端

示例

Demo

移动端

图片

图片

集成示例

您可以选择以下任一调试方法:

  • 线上调试:建议在 PC 上使用 SDK demo playground 进行线上效果调试。通过 SDK demo playground 配置不同版本的 SDK 以及不同直播间,修改模板代码后可实时预览效果。详见企业直播 Web SDK demo playground
  • 本地调试:在本地 localhost:8080 端口进行调试,但此种调试方法无法播放预告和回放。具体步骤如下:
    1. 下载压缩包 byte-live-sdk-demo-master.zip 并解压。
      byte-live-sdk-demo-master.zip
      2.96MB
    2. 打开终端并执行 cd 命令定位到解压好的文件夹目录下,例如 cd C:\Users\Admin\Downloads\byte-live-sdk-demo-master
    3. 执行 yarn 命令安装依赖。
    4. Mac 用户执行 yarn start 命令启动服务,Windows 用户执行 yarn start-win 命令启动服务。
    5. 打开 http://localhost:8080/demo/sdk/index.html 进行调试。

PC 端标准直播间示例代码

注意

请按需替换示例代码中的版本号。本文以 1.3.23 版本为例。如需获取最新版本号,详见集成 Web 观播 SDK

<!DOCTYPE html>
<html>
<head>
  <title>企业直播WEB SDK DEMO</title>
  <link rel="shortcut icon"
    href=//p1-live.byteimg.com/tos-cn-i-gjr78lqtd0/3f061494968a653d3409e0607259939e.png~tplv-gjr78lqtd0-image.image
    sizes="16x16">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet"
    href="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/pc/css/index.1.3.23.css">
    <style>
      .app {
        background-image: url(//p6-live.byteimg.com/tos-cn-i-gjr78lqtd0/faa3e534621e30f31b5fd87bcd31a11d.jpg~tplv-gjr78lqtd0-image.image);
        background-size: 100% auto;
        background-repeat: no-repeat;
        height: 100%;
        width: 100%;
      }
    
      .content {
        width: 90vw;
        min-width: 972px;
        max-width: 1612px;
        margin: 0 auto;
        padding-top: 150px;
        padding-bottom: 80px;
      }
    
      .menu-top {
        width: 100%;
        display: flex;
      }
    
      .player {
        width: calc(90vw - 332px);
        /*播放器的宽高比例建议为 16:9*/
        height: calc((90vw - 332px) / 16 * 9 + 55px);
        min-width: 640px;
        /*播放器最小宽度建议为 640 px*/
        max-width: 1280px;
        min-height: 415px;
        max-height: 775px;
      }
    
      .menu {
        /*菜单最小宽度建议为 320 px*/
        width: 320px;
        margin-left: 12px;
        height: calc((90vw - 332px) / 16 * 9 + 55px);
        max-height: 775px;
        min-height: 415px;
      }
    
      .menu-bottom {
        width: 100%;
        margin-top: 12px;
        height: calc(66vw + 100px);
        max-height: 1300px;
        min-height: 800px;
      }
    </style>
</head>

<body style="
  font-size: 10px;
  margin: 0;
  background-color: #080B12;
  height: 100vh;
">
  <div class='app'>
    <div class="content">
      <div class="menu-top">
        <div id="player" class="player"></div>
        <div id="menu" class="menu"></div>
      </div>
      <div id="menu2" class="menu-bottom"></div>
    </div>
  </div>
  <script src="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/pc/js/index.1.3.23.js"></script>
</body>
<script>
  var webSDK = new window.ByteLiveWebSDK({
    activityId: 1722918339941389,
    token: 'psNBho',
    service: 'liveDemo',
    mode: 1,
    modules: [
      {
        // 页面内的元素 ID,对应模块会嵌入到此元素内
        id: "player",
        mode: "player",
      },
      {
        id: "menu",
        mode: "menu",
        // 配置需要显示的菜单类型,如需全部显示则无需配置
        menu: ["comment", "imagetext", "cardlist"],
      },
      {
        id: "menu2",
        mode: "menu",
        menu: ["bandcontent"],
      },
    ],
    options: {
      backgroundTransparent: true,
      pcPlayerHeader: true,
    }
  })
</script>

</html>

移动端标准直播间示例代码

注意

请按需替换示例代码中的版本号。本文以 1.3.23 版本为例。如需获取最新版本号,详见集成 Web 观播 SDK

<!DOCTYPE html>
<html style="height: 100%">
  <head>
    <title>企业直播WEB SDK DEMO</title>
    <link rel="shortcut icon"
      href=//p1-live.byteimg.com/tos-cn-i-gjr78lqtd0/3f061494968a653d3409e0607259939e.png~tplv-gjr78lqtd0-image.image
      sizes="16x16">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,
          maximum-scale=1.0, user-scalable=no, shrink-to-fit=no, viewport-fit=cover">
    <link rel="stylesheet"
      href="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/mobile-all/css/index.1.3.23.css">
    <style>
      .app {
        display: flex;
        height: 100%;
        flex-direction: column;
      }

      .banner {
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        background-color: rgb(22, 30, 45);
        color: #fff;
      }

      .content {
        height: calc(100% - 60px);
      }
    </style>
    </head>

  <body style='
        font-size: 10px; margin: 0; overflow: hidden;
        height: 100%;'>
    <div class="app">
      <div class="banner">接入方自定义banner</div>
      <div id="content" class="content"></div>
    </div>
    <script src="https://lf-cdn-tos.bytescm.com/obj/static/livesaas-client/mobile-all/js/index.1.3.23.js"></script>
    </body>
    <script>
      var webSDK = new window.ByteLiveWebSDK({
        activityId: 1722918339941389,
        token: 'psNBho',
        service: 'liveDemo',
        mode: 1,
        modules: [
          {
            id: "content", // 页面内的元素 ID,移动端整页模块会嵌入到此元素内
            mode: "mobile",
          },
        ],
        options: {
          saveUserInfo: true,
        }
      })
    </script>

</html>