本文介绍如何通过 Web 观播 SDK 实现各种复杂功能，打造个性化直播间。

您已集成 Web 观播 SDK。详见集成 Web 观播 SDK。

本文介绍以下功能的实现方法。

• 第三方用户态登录
• 营销互动
  • 关注主播
  • 自定义跳转逻辑
  • 自定义直播预约逻辑
• 播放器
  • 画中画
  • 小窗模式
  • 多实例接入
• 样式定制
  • CSS 变量
  • 获取 class 和样式
  • 修改移动端竖屏直播间的背景色
  • 修改 PC 端封面图的展示样式
  • 修改移动端输入框位置
  • 自定义竖屏直播间图标的样式和背景颜色

第三方用户态登录

如果观众可以通过您的公司官网等自有账号系统完成登录，您可以选择第三方用户态登录方式，观众即可使用在您自有账号系统中的身份信息进入直播间。
您可以按需选择观众在您自有账号系统的登录时机。如需查看两种登录时机的实现效果，详见第三方用户态登录 Demo。

• 观众先完成登录，再进入直播间。
  
  在初始化 SDK 时，将 mode 的参数值设置为 2，并将 token 的参数值设置为 GetSDKTokenAPI 接口返回的授权 Token 即可。

  说明

  在观众登录您的自有账号系统后，将观众的昵称和 ID 传入 GetSDKTokenAPI 接口，可获取 mode=2 时的授权 Token。

  示例代码如下所示。

  var webSDK = new window.ByteLiveWebSDK({
      activityId: 172291833994****,
      token: 'ak3T%2FdaGJDL5zSFD7%2F1GPGP****',
      service: 'liveDemo',
      mode: 2, 
      ...
  

• 观众先进入直播间观看直播、查看评论等，在参与评论、互动等操作时触发自定义登录流程。
  
  具体实现流程如下所示：

  1. 在初始化 SDK 时，将 mode 的参数值设置为 1、禁用企业直播自带的登录体系，并监听 permission.need 事件。

     说明

     • 您可以通过以下方式获取 mode=1 时的授权 Token：
       • 在企业直播控制台直播间的观看页管理 > 页面嵌入 > Web SDK嵌入页签下获取 Token。
       • 调用 GetSDKTokenAPI 接口获取 Token。
     • 目前 permission.need 事件仅适用于该场景。
  2. 您需自行实现登录逻辑和获取 mode=2 时的授权 Token 逻辑。
  3. 在观众进行以下需要用户信息的操作时，SDK 会触发 permission.need 事件：
     • 点击评论输入框，包括聊天互动、私聊互动和互动问答菜单的评论输入框

       说明

       互动问答菜单仅 PC 端和移动端横屏模式支持。

     • 点赞评论
     • 打赏礼物
     • 签到
     • 抢红包
     • 答题
     • 投票
     • 抽奖
     • 实名问卷
     • 观众连麦
     • 分享二维码、链接或邀请海报（仅在直播分享开启强制登录时会触发 permission.need 事件）
     • 预约直播（仅在直播预约关闭短信提醒时会触发 permission.need 事件）
     • 点赞直播间（仅在必须登录才能点赞直播间时，即将 loginInToThumbUp 的参数值设置为 true 时，会触发 permission.need 事件）
  4. 您需在监听到 permission.need 事件后，触发自定义登录流程。
  5. 观众登录您的自有账号系统。
  6. 将观众的昵称和 ID 传入 GetSDKTokenAPI 接口，获取 mode=2 时的授权 Token。
  7. 调用 SDK 的 updateMode2Token 方法，将 mode=1 时的 Token 更新为 mode=2 时的 Token。

  示例代码如下所示。

  var webSDK = new window.ByteLiveWebSDK({
      activityId: 172291833994****,
      token: 'ps****',
      service: 'liveDemo',
      mode: 1,
      options: {
        saveUserInfo: true, // 可选，用于缓存 mode=1 时的用户信息。
        disabledLogin: true, // 禁用企业直播自带的登录体系。
      }
    })
    
      const login = () => {
      // 请自行实现登录逻辑。
      return {
        Nickname: '观众 A',
        UserIdStr: '57584'
      }
    }
  
    const getSDKToken = () => {
      // 请自行实现获取 mode=2 时的 Token 逻辑。
      return {
        Token: 'hdsh****'
      }
    }
    // 监听到 permission.need 事件后，执行 handleLogin 函数。
    const handleLogin = async () => {
        // 触发自定义登录流程，观众需登录您的自有账号系统。
        const userInfo = await login();
        // 使用登录用户的信息调用 GetSDKTokenAPI 接口，获取 mode=2 时的 Token。
        const res = getSDKToken(userInfo);
        // 调用 SDK 的 updateMode2Token 方法，将 mode=1 时的 Token 更新为 mode=2 时的 Token。
        webSDK.updateMode2Token(res.Token);
    }
    // 监听 permission.need 事件。
    webSDK.on('permission.need',  handleLogin);
  

关注主播

在企业直播控制台开启关注主播功能后，只有在 mode=2 时，观众才能在观看页关注主播。

您可以通过以下方式，实现关注主播功能。

• 观众先完成登录，再进入直播间。
  在初始化 SDK 时，将 mode 的参数值设置为 2，并将 token 的参数值设置为 GetSDKTokenAPI 接口返回的授权 Token 即可。

  说明

  在观众登录您的自有账号系统后，将观众的昵称和 ID 传入 GetSDKTokenAPI 接口，可获取 mode=2 时的授权 Token。

  示例代码如下所示。

  var webSDK = new window.ByteLiveWebSDK({
      activityId: 172291833994****,
      token: 'ak3T%2FdaGJDL5zSFD7%2F1GPGP****',
      service: 'liveDemo',
      mode: 2,
      ...
  

• 观众先进入直播间观看直播、查看评论等，在点击关注主播时触发自定义登录流程。
  具体实现流程如下所示：

  1. 在初始化 SDK 时，将 mode 的参数值设置为 1、禁用企业直播自带的登录体系，并监听 permissionMode2.need 事件。

     说明

     • 您可以通过以下方式获取 mode=1 时的授权 Token：
       • 在企业直播控制台直播间的观看页管理 > 页面嵌入 > Web SDK嵌入页签下获取 Token。
       • 调用 GetSDKTokenAPI 接口获取 Token。
     • 目前 permissionMode2.need 事件仅适用于该场景。
  2. 您需自行实现登录逻辑和获取 mode=2 时的授权 Token 逻辑。
  3. 在观众点击关注主播时，SDK 会触发 permissionMode2.need 事件。
  4. 您需在监听到 permissionMode2.need 事件后，触发自定义登录流程。
  5. 观众登录您的自有账号系统。
  6. 将观众的昵称和 ID 传入 GetSDKTokenAPI 接口，获取 mode=2 时的授权 Token。
  7. 调用 SDK 的 updateMode2Token 方法，将 mode=1 时的 Token 更新为 mode=2 时的 Token。

  示例代码如下所示。

  var webSDK = new window.ByteLiveWebSDK({
      activityId: 172291833994****,
      token: 'ps****',
      service: 'liveDemo',
      mode: 1,
      options: {
        saveUserInfo: true, // 可选，用于缓存 mode=1 时的用户信息。
        disabledLogin: true, // 禁用企业直播自带的登录体系。
      }
    })
    
      const login = () => {
      // 请自行实现登录逻辑。
      return {
        Nickname: '观众 A',
        UserIdStr: '57584'
      }
    }
  
    const getSDKToken = () => {
      // 请自行实现获取 mode=2 时的 Token 逻辑。
      return {
        Token: 'hdsh****'
      }
    }
    // 监听到 permissionMode2.need 事件后，执行 handleLogin 函数。
    const handleLogin = async () => {
        // 触发自定义登录流程，观众需登录您的自有账号系统。
        const userInfo = await login();
        // 使用登录用户的信息调用 GetSDKTokenAPI 接口，获取 mode=2 时的 Token。
        const res = getSDKToken(userInfo);
        // 调用 SDK 的 updateMode2Token 方法，将 mode=1 时的 Token 更新为 mode=2 时的 Token。
        webSDK.updateMode2Token(res.Token);
    }
  // 监听 permissionMode2.need 事件。
    webSDK.on('permissionMode2.need',  handleLogin);
  

自定义跳转逻辑

观众在点击菜单内商品卡片、浮窗商品卡片、页中广告、浮标广告、主播账号、奖券奖品领取链接时，默认会跳转至在企业直播控制台配置的页面。您可以通过禁用相关功能的点击跳转能力，并监听相关事件，在观众完成点击后，实现自定义跳转逻辑，从而能够根据特定场景或需求，定制页面的跳转行为，提升用户体验。

以下示例代码展示了菜单内商品卡片和浮窗商品卡片的自定义跳转逻辑。

var webSDK = new window.ByteLiveWebSDK({
    ... 
    options: {
      saveUserInfo: true, // 可选，用于缓存 mode=1 时的用户信息。
      disableCardRedirect: true, // 禁用商品卡片的点击跳转能力。
    }
  })
  
  // 监听菜单内的商品卡片点击事件。
  webSDK.on('card.click', data => {
    // 监听到点击事件后，执行菜单内商品卡片的自定义跳转逻辑。
    alert(`卡片标题为"${data.text}"，卡片跳转链接为${data.url}`);
  })
  // 监听浮窗商品卡片点击事件。
  webSDK.on('floatingCard.click', data => {
    // 监听到点击事件后，执行浮窗商品卡片的自定义跳转逻辑。
    alert(`卡片标题为"${data.text}"，卡片跳转链接为${data.url}`);
  })

目前 SDK 支持自定义跳转逻辑的功能以及相关参数、事件和观看页位置如下表所示。

自定义直播预约逻辑

观众在点击立即预约后，默认会弹出企业直播的预约直播弹窗。

您可以通过禁用企业直播的预约直播弹窗并监听 reservation.click 事件，在观众点击立即预约后，实现自定义的直播预约逻辑，从而按需展示个性化的预约直播弹窗等，提升用户体验。
在实现自定义的直播预约逻辑后，可以通过 isReserved 参数设置观众是否已完成预约，并调用 updateModulesConf 方法更新观众的直播预约状态。
示例代码如下所示。

const getReservationStatus = () => {
      // 请将 getReservationStatus 方法替换为您用来获取当前观众预约状态的方法。您可以通过接口或者本地存储（localstorage）获取预约状态。
      return false; // 观众未完成直播预约。
  }
  
  var webSDK = new window.ByteLiveWebSDK({
    ... 
    options: {
      disableReservationCell: true, // 禁用企业直播的预约直播弹窗。
      isReserved: getReservationStatus(), // 在初始化 SDK 时配置观众的预约状态。false 表示该观众未完成直播预约。
    }
  })
  
  // 监听 reservation.click 事件。
  webSDK.on('reservation.click', () => {
      // 监听到 reservation.click 事件后，需执行自定义直播预约逻辑。
      // 观众完成预约操作后，需调用 SDK 的 updateModulesConf 方法更新观众的预约状态。
      webSDK.updateModulesConf({
      options: {
        isReserved: true,
      }
    })
  })

画中画

开启画中画模式后，观众在离开观看页时，例如打开新页面或将观看页切换至后台时，可以通过画中画模式观看直播或点播内容。

webSDK.requestPip(true);

小窗模式

小窗模式与画中画模式不同，不支持跨页面展示，仅支持在当前观看页以小窗模式展示播放器画面。

webSDK.emit('player.pip', {
    ifShow: true,
})

// 请将 showPip 方法替换为您用来展示小窗模式的方法。
function showPip() {
    // 动态更新 SDK 部分配置。
    webSDK.updateModulesConf({
      options: {
        purePlayer: true, // 设置为纯净播放器，即播放器内无播放按钮等互动按钮。
      }
    })
    // 修改播放器容器的样式。
    playerDom.setAttribute('style', 'width: 72vw; height: 40.5vw; position: fixed; right: 0; top: 50%;');
}

多实例接入

您可以在集成 SDK 时，创建多个直播或点播播放器实例，从而在同一页面展示多个播放器，每个播放器实例可以独立进行初始化、播放、暂停和销毁等操作，互不干扰。
该功能适用于同时展示多个视频源的场景，包括但不限于：

• 监控墙：支持在同一页面展示多个监控画面。
• 直播赛事：支持在同一页面展示多个比赛画面或不同角度的同一比赛。
• 在线教育：支持在同一页面展示多个教学视频，供学生观看学习。

效果图如下所示。

以下示例代码在集成 SDK 时，同时创建了一个直播播放器实例和一个点播播放器实例。

var webSDK1 = new window.ByteLiveWebSDK({
  activityId: 169410856822****,
  token: 'JC****',
  service: 'Demo',
  mode: 1,
  modules: [
    {
      id: "player1",  // 确保不同实例有不同的取值。
      mode: "player", // 由于仅支持单独接入播放器模块，因此 mode 取值固定为 player。
    }
  options: {}
})

webSDK1.emit('player.pause'); // 触发事件。
webSDK1.on('player.pause', () => {}); // 监听事件。

var webSDK2 = new window.ByteLiveWebSDK({
  vodPlayerToken: 'ceed74dcb2ceaba3c92a91fc2ebd****',
  vid: 'v03a49g10000cojk12bc77ua72bm****',
  vodPlayerConfigId: 'vcid-179665696630****',
  service: 'Demo',
  modules: [
    {
      id: "player2", // 确保不同实例有不同的取值。
      mode: "player", // 取值固定为 player。
    }
  ],
  options: {}
})

webSDK2.emit('player.pause'); // 触发事件。
webSDK2.on('player.pause', () => {}); // 监听事件。

为方便样式覆盖，SDK 的 class 为固定值且不包含哈希值。DOM 结构仅在页面 UI 发生改变时可能发生变化，保证了样式覆盖的稳定性。

CSS 变量

为适配移动端的各个机型，SDK 引入了名为 --live-sdk-font-size 的 CSS 变量，其作用类似于 rem，用于设置各元素的位置或字体大小等。计算方式如下所示：

--live-sdk-font-size = window.screen.width/3.75
// 以 iPhone SE 为例，手机显示宽度为 375 px，则 --live-sdk-font-size = 100 px。

获取 class 和样式

您可以通过浏览器的调试模式，点击获取指定节点的 class 和样式。
以下示例代码获取了移动端竖屏直播间的主播账号位置并对位置进行了修改。

class="bytelive-PageLayout-topMenu"
// 主播账号距离直播间顶部的距离，此处以 iPhone SE 为例。
paddingTop = --live-sdk-font-size * 0.25 = 25px
// 主播账号距离直播间左侧的距离，此处以 iPhone SE 为例。
paddingLeft = --live-sdk-font-size * 0.1 = 10px
// 覆盖样式，此处将距离直播间顶部的距离修改为 10 px。
.bytelive-PageLayout-topMenu {
    padding-top: 10px !important;
}

常见功能样式覆盖

修改移动端竖屏直播间的背景色

示例代码如下所示。

.bytelive-PortraitPlayer-livePlayer {
    background: antiquewhite !important // 将背景色修改为奶黄色。
}

修改 PC 端封面图的展示样式

示例代码如下所示。

// 居中且全部展示。
.bytelive-PcNewPlayer-livePlayer {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

修改移动端输入框位置

示例代码如下所示。

.bytelive-InputBar-comment-input-wrapper.bytelive-InputBar-comment-input {
     margin-top: 0 !important; // 将输入框置顶
}

自定义竖屏直播间图标的样式和背景颜色

图标样式

您可以通过 portraitMenuExtends 参数，替换以下默认图标或插入新的图标。

示例代码如下所示。

var webSDK = new window.ByteLiveWebSDK({
    token: 'Ik****',
    activityId: 180812505419****,
    service: 'Demo',
    mode: 1,
    modules: [
      {
        id: 'content', // 页面内的元素 ID，移动端竖屏模式整页模块会嵌入到此元素内。
        mode: "mobile-portrait" 
      },
    ],
    options: {
      saveUserInfo: true,
      portraitMenuExtends: [
      // 此处以替换购物车图标为例，使用 Flexbox 布局，图片在容器内垂直和水平居中对齐。
        {
          render: '<div style="display: flex; align-items: center; justify-content: center;"><img src="https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_c2c33446dc439ef315c8dd302952e74b.png" /></div>', // 仅支持网络路径。
          key: 'CART'
        },
     // 此处以插入一个新的图标为例。   
        {
          render: '<div style="color: #fff">赞</div>', // 文本内容为“赞”，文本颜色为白色。
          key: '222', // 非默认图标的 Key，则插入新的图标。
          onClick: console.log, // 点击事件回调。
          index: 2, // 图标的显示顺序。数值越大，越靠左显示。值大于 70 会收纳在更多图标内。如果图标总数超过 4 个（包括直播间内的默认图标），超过部分的图标会收纳在更多图标内。
        },
      ],
    },
  });

效果图如下所示。

图标背景颜色

按照以上方式自定义图标样式后，新图标元素的 id 属性将采用 portrait-menu-icon-{key} 格式。例如，替换购物车图标后，新图标元素的 id 属性为 portrait-menu-icon-CART。您可以通过该 id 属性对元素进行 DOM 操作，例如修改背景颜色、图片大小等。
以下示例代码通过 id 属性 portrait-menu-icon-CART，将新图标的背景颜色修改为红色。

document.querySelector('#portrait-menu-icon-CART').style.background = 'red'

效果图如下所示。