本文介绍如何通过 iframe 嵌入的方式,将企业直播控制台的功能模块嵌入您的自有页面,从而在自有页面管理直播间、新建直播站点等。您可以通过 iframe 嵌入的方式,更便捷、快速地集成控制台功能,有效降低开发成本。
前提条件
- 您已开通定制版套餐。详见计费说明。
- 为保证嵌入的功能页面可以正常访问,请确保您的自有页面使用
https
域名。
示例页面
功能列表
目前,您可以通过 iframe 嵌入的方式,将以下功能模块嵌入您的自有页面。
模块 | 功能 | 页面截图 |
---|
直播间管理 | 直播控制 | 聊天互动 说明 嵌入的聊天互动菜单中,暂不支持聊天审核、导出聊天、机器人评论和 Echo 回声智能 AI 助手功能。 | |
互动工具 | |
商品卡片 | |
观看页管理 | 观看限制 | |
直播敏感词 | |
菜单管理 | 互动工具 | |
图文介绍 | |
商品卡片 | |
营销互动 | 直播报名 说明 - 人工报名审核需在数据统计 > 报名数据页面完成。由于数据统计模块暂不支持嵌入,如开启报名审核功能,您必须在企业直播控制台完成人工审核。
- 嵌入的直播报名页面中,暂不支持查看报名数据详情以及定制短信内容功能。
| |
表单问卷 | |
抽奖玩法 > 累计观看抽奖 | |
礼物打赏 | |
直播建站 | 整页嵌入 | 站点列表 | |
新建站点 | |
站点信息 | |
页面配置 | |
注意事项
- 弹窗仅支持在嵌入的功能页面居中显示,但无法在您的自有页面居中显示。
- 嵌入的功能页面版本与您使用 iframe 嵌入时的控制台版本一致。如需升级功能页面的版本,请联系企业直播技术支持。
嵌入说明
嵌入链接
https://vlive.byteoc.com/livesaas/embeded/178179896233****?type=ImageTextIntro&appid=APP_ID&AccessKeyId=ACESS_KEY_ID&SecretAccessKey=SECRET_ACCESS_KEY&SessionToken=TOKEN
链接/参数 | 位置 | 说明 |
---|
https://vlive.byteoc.com/livesaas/embeded | URL | 嵌入链接的公共路由。 |
178179896233**** | URL | 直播间 ID,仅需在嵌入直播间管理相关功能页面时配置。
您可通过调用 ListActivityAPI 接口获取直播间 ID。 |
type | Query | 功能页面。各功能页面的嵌入链接示例和最小宽高说明,详见功能嵌入。
例如参数值 ImageTextIntro 指菜单管理 > 图文介绍页面。
可选值: LiveControlMenu :直播控制 > 聊天互动、互动工具、商品卡片。WatchLimit :观看页管理 > 观看限制。Antidirt :观看页管理 > 直播敏感词。CommentImageText :菜单管理 > 互动工具。ImageTextIntro :菜单管理 > 图文介绍。ProductCard :菜单管理 > 商品卡片。Enroll :营销互动 > 直播报名。Questionnaire :营销互动 > 表单问卷。LotteryGame :营销互动 > 抽奖玩法 > 累计观看抽奖。GiftReward :营销互动 > 礼物打赏。LiveSite :直播建站。
|
appid | Query | 接入方的唯一标识。请联系企业直播技术支持获取。 |
AccessKeyId | Query | 临时凭证 AK。
您必须通过子账号调用 AssumeRole 接口,获取临时凭证 AK。 说明 为调用 AssumeRole 接口,您必须满足以下条件: - 使用添加了接口访问权限的子账号调用
AssumeRole 接口。有关如何添加子账号、为子账号添加 AssumeRole 接口的访问权限,以及获取子账号的 AccessKey ID(AK)和 Secret AccessKey(SK),详见配置子账号调用 AssumeRole 接口。 - 通过企业直播主账号新建角色,并按 AssumeRole 接口中规定的指定格式,将角色名称作为请求参数
RoleTrn 的参数值。有关如何新建角色,详见通过企业直播主账号新建角色。
|
SecretAccessKey | Query | 临时凭证 SK。
您必须通过子账号调用 AssumeRole 接口,获取临时凭证 SK。 说明 为调用 AssumeRole 接口,您必须满足以下条件: - 使用添加了接口访问权限的子账号调用
AssumeRole 接口。有关如何添加子账号、为子账号添加 AssumeRole 接口的访问权限,以及获取子账号的 AccessKey ID(AK)和 Secret AccessKey(SK),详见配置子账号调用 AssumeRole 接口。 - 通过企业直播主账号新建角色,并按 AssumeRole 接口中规定的指定格式,将角色名称作为请求参数
RoleTrn 的参数值。有关如何新建角色,详见通过企业直播主账号新建角色。
|
SessionToken | Query | 使用临时凭证时需要传递的 Token。
您必须通过子账号调用 AssumeRole 接口,获取 Token。 说明 为调用 AssumeRole 接口,您必须满足以下条件: - 使用添加了接口访问权限的子账号调用
AssumeRole 接口。有关如何添加子账号、为子账号添加 AssumeRole 接口的访问权限,以及获取子账号的 AccessKey ID(AK)和 Secret AccessKey(SK),详见配置子账号调用 AssumeRole 接口。 - 通过企业直播主账号新建角色,并按 AssumeRole 接口中规定的指定格式,将角色名称作为请求参数
RoleTrn 的参数值。有关如何新建角色,详见通过企业直播主账号新建角色。。
|
功能嵌入
模块 | 功能页面 | 示例 | 说明 |
---|
直播间管理 | 直播控制 | 聊天互动 | https://vlive.byteoc.com/livesaas/embeded/178179896233****?type=LiveControlMenu&appid=APP_ID&AccessKeyId=ACESS_KEY_ID&SecretAccessKey=SECRET_ACCESS_KEY&SessionToken=TOKEN
| 最小宽度:1100 px
最小高度:500 px |
互动工具 |
商品卡片 |
观看页管理 | 观看限制 | https://vlive.byteoc.com/livesaas/embeded/178179896233****?type=WatchLimit&appid=APP_ID&AccessKeyId=ACESS_KEY_ID&SecretAccessKey=SECRET_ACCESS_KEY&SessionToken=TOKEN
| 最小宽度:1000 px
最小高度:500 px |
直播敏感词 | https://vlive.byteoc.com/livesaas/embeded/178179896233****?type=Antidirt&appid=APP_ID&AccessKeyId=ACESS_KEY_ID&SecretAccessKey=SECRET_ACCESS_KEY&SessionToken=TOKEN
| 最小宽度:800 px
最小高度:500 px |
菜单管理 | 互动工具 | https://vlive.byteoc.com/livesaas/embeded/178179896233****?type=CommentImageText&appid=APP_ID&AccessKeyId=ACESS_KEY_ID&SecretAccessKey=SECRET_ACCESS_KEY&SessionToken=TOKEN
| 最小宽度:800 px
最小高度:500 px |
图文介绍 | https://vlive.byteoc.com/livesaas/embeded/178179896233****?type=ImageTextIntro&appid=APP_ID&AccessKeyId=ACESS_KEY_ID&SecretAccessKey=SECRET_ACCESS_KEY&SessionToken=TOKEN
| 最小宽度:800 px
最小高度:500 px |
商品卡片 | https://vlive.byteoc.com/livesaas/embeded/178179896233****?type=ProductCard&appid=APP_ID&AccessKeyId=ACESS_KEY_ID&SecretAccessKey=SECRET_ACCESS_KEY&SessionToken=TOKEN
| 最小宽度:800 px
最小高度:500 px |
营销互动 | 直播报名 | https://vlive.byteoc.com/livesaas/embeded/178179896233****?type=Enroll&appid=APP_ID&AccessKeyId=ACESS_KEY_ID&SecretAccessKey=SECRET_ACCESS_KEY&SessionToken=TOKEN
| 最小宽度:800 px
最小高度:500 px |
表单问卷 | https://vlive.byteoc.com/livesaas/embeded/178179896233****?type=Questionnaire&appid=APP_ID&AccessKeyId=ACESS_KEY_ID&SecretAccessKey=SECRET_ACCESS_KEY&SessionToken=TOKEN
| 最小宽度:1000 px
最小高度:500 px |
抽奖玩法 > 累计观看抽奖 | https://vlive.byteoc.com/livesaas/embeded/178179896233****?type=LotteryGame&appid=APP_ID&AccessKeyId=ACESS_KEY_ID&SecretAccessKey=SECRET_ACCESS_KEY&SessionToken=TOKEN
| 最小宽度:1000 px
最小高度:500 px |
礼物打赏 | https://vlive.byteoc.com/livesaas/embeded/178179896233****?type=GiftReward&appid=APP_ID&AccessKeyId=ACESS_KEY_ID&SecretAccessKey=SECRET_ACCESS_KEY&SessionToken=TOKEN
| 最小宽度:800 px
最小高度:500 px |
直播建站 | 整页嵌入 | 站点列表 | https://vlive.byteoc.com/livesaas/embeded?type=LiveSite&appid=APP_ID&AccessKeyId=ACESS_KEY_ID&SecretAccessKey=SECRET_ACCESS_KEY&SessionToken=TOKEN
| 最小宽度:1000 px
最小高度:500 px |
新建站点 |
站点信息 |
页面配置 |
示例代码
<html>
<header>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</header>
<body style='margin: 0; background-color: rgba(0,0,0,0.1);'>
<div id='root' style='height: 100%; width: 100%; display: flex;'>
</div>
<script>
async function initIframe() {
// 调用 AssumeRole 接口获取临时安全令牌
var sts = await fetchStsToken();
var activities = await listActivityAPI();
var activityId = activities[0].ID;
var params = {
AccessKeyId: sts.AccessKeyId,
SecretAccessKey : sts.SecretAccessKey,
SessionToken: sts.SessionToken,
Type: 'LiveControlMenu',
AppId: 'AppId', // 接入方的唯一标识。请联系企业直播技术支持获取
}
var iframeUrl = `https://vlive.byteoc.com/livesaas/embeded/${activityId}?${new URLSearchParams(params).toString()}`;
createIframe(iframeUrl);
}
function createIframe(url) {
var dom = document.createElement('iframe');
dom.setAttribute('width', '1000px');
dom.setAttribute('height', '800px');
dom.setAttribute('frameborder', 0);
dom.setAttribute('src', url);
dom.setAttribute('id', 'embededIframe');
document.getElementById('root').appendChild(dom);
}
</script>
</body>
</html>
附录
配置子账号调用 AssumeRole 接口
通过主账号登录企业直播控制台。
添加子账号。
- 在账户中心 > 权限管理 > 用户管理页面,单击添加用户。
- 在添加用户对话框中,单击添加用户,完成相关配置并单击确定。详见添加用户。
说明
如仅用于调用 AssumeRole
接口从而实现控制台 iframe 嵌入,无需选择所属角色和组织,默认该子账号角色为默认子账号且不属于任何组织。
为子账号添加 AssumeRole 接口的访问权限。
单击页面右上方的账号,选择访问控制,进入访问控制页面。
在身份管理 > 用户页面,单击子账号的用户名或操作列的管理。
在用户详情页面,单击权限页签。单击添加权限,添加 STSAssumeRoleAccess
权限。
在用户详情页面,单击密钥页签并单击新建密钥,获取子账号的 AK 和 SK。您也可以通过调用 CreateAccessKey 接口获取子账号的 AK 和 SK。
通过获取的子账号 AK 和 SK,调用 AssumeRole 接口。您也可以通过该子账号的 AK 和 SK,使用 SDK 调用 AssumeRole 接口。
通过企业直播主账号新建角色
- 通过主账号登录企业直播控制台。
- 单击页面右上方的账号,选择访问控制,进入访问控制页面。
- 在左侧导航栏,单击身份管理 > 角色。
- 单击新建角色,添加角色。
选择账号作为信任身份类型并单击下一步。
输入角色名称并单击下一步。此处以 UserRoleForLivesaas 为例。
单击跳过。
按接口中规定的指定格式,将该角色的角色名称作为请求参数 RoleTrn
的参数值,调用 AssumeRole 接口。