最近更新时间:2024.03.28 12:03:25
首次发布时间:2024.01.16 10:33:32
本文介绍如何通过 Web 观播 SDK 实现各种复杂功能,打造个性化直播间。
说明
目前仅支持同时进入一个直播间。
您已集成 Web 观播 SDK。详见集成 Web 观播 SDK。
本文介绍以下功能的实现方法。
如果观众可以通过您的公司官网等自有账号系统完成登录,您可以选择第三方用户态登录方式,观众即可使用在您自有账号系统中的身份信息进入直播间。
您可以按需选择观众在您自有账号系统的登录时机。如需查看两种登录时机的实现效果,详见第三方用户态登录 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, ...
观众先进入直播间观看直播、查看评论等,在参与评论、互动等操作时触发自定义登录流程。
具体实现流程如下所示:
mode
的参数值设置为 1
、禁用企业直播自带的登录体系,并监听 permission.need
事件。说明
mode
=1
时的授权 Token:
permission.need
事件仅适用于该场景。mode
=2
时的授权 Token 逻辑。permission.need
事件:
说明
互动问答菜单仅 PC 端和移动端横屏模式支持。
permission.need
事件)permission.need
事件)loginInToThumbUp
的参数值设置为 true
时,会触发 permission.need
事件)permission.need
事件后,触发自定义登录流程。mode
=2
时的授权 Token。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, ...
观众先进入直播间观看直播、查看评论等,在点击关注主播时触发自定义登录流程。
具体实现流程如下所示:
mode
的参数值设置为 1
、禁用企业直播自带的登录体系,并监听 permissionMode2.need
事件。说明
mode
=1
时的授权 Token:
permissionMode2.need
事件仅适用于该场景。mode
=2
时的授权 Token 逻辑。permissionMode2.need
事件。permissionMode2.need
事件后,触发自定义登录流程。mode
=2
时的授权 Token。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 支持自定义跳转逻辑的功能以及相关参数、事件和观看页位置如下表所示。
说明
本文仅以移动端竖屏模式的观看页位置为例,如需查看 PC 端或移动端横屏模式的观看页位置,可查看对应的功能配置文档。
功能 | 参数 | 事件 | 观看页位置 |
---|---|---|---|
菜单内商品卡片 |
|
| |
浮窗商品卡片 |
|
| |
页中广告 |
|
| |
浮标广告 |
|
| |
主播账号 |
|
| |
奖券奖品领取链接 |
|
|
|
观众在点击立即预约后,默认会弹出企业直播的预约直播弹窗。
您可以通过禁用企业直播的预约直播弹窗并监听 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, } }) })
开启画中画模式后,观众在离开观看页时,例如打开新页面或将观看页切换至后台时,可以通过画中画模式观看直播或点播内容。
您可以通过调用 SDK 的 requestPip
方法开启 PC 端的画中画模式。观众可以在观看页拖动画中画窗口。
注意
确保浏览器支持画中画模式。
示例代码如下所示。
webSDK.requestPip(true);
小窗模式与画中画模式不同,不支持跨页面展示,仅支持在当前观看页以小窗模式展示播放器画面。
您可以通过触发 player.pip
事件,开启 PC 端的小窗模式。
说明
观众可以在观看页拖动该小窗。
示例代码如下所示。
webSDK.emit('player.pip', { ifShow: true, })
为方便样式覆盖,SDK 的 class
为固定值且不包含哈希值。DOM 结构仅在页面 UI 发生改变时可能发生变化,保证了样式覆盖的稳定性。
为适配移动端的各个机型,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; // 将输入框置顶 }