本文介绍如何通过 iframe 嵌入的方式,将企业直播控制台的功能模块嵌入您的自有页面,从而在自有页面管理直播间、新建直播站点等。您可以通过 iframe 嵌入的方式,更便捷、快速地集成控制台功能,有效降低开发成本。
前提条件
示例页面
![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d31a5751712746a8b84c514448435cc0~tplv-goo7wpa0wc-image.image)
功能列表
目前,您可以通过 iframe 嵌入的方式,将以下功能模块嵌入您的自有页面。
模块 | 功能 | 页面截图 |
---|
直播间管理 | 直播控制 | 聊天互动 说明 嵌入的聊天互动菜单中,暂不支持聊天审核、导出聊天、机器人评论和 Echo 回声智能 AI 助手功能。 | ![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/c849be6f484a47d5a39d2c1ff09f1fa9~tplv-goo7wpa0wc-image.image)
|
互动工具 | ![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/3c62716f65664c039854518dce30ebb8~tplv-goo7wpa0wc-image.image)
|
商品卡片 | ![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/f26cb6f812574b719e879bd99c08a9c7~tplv-goo7wpa0wc-image.image)
|
观看页管理 | 观看限制 | ![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/8b4f56240fb94a3c950ca59ee01a77b2~tplv-goo7wpa0wc-image.image)
|
直播敏感词 | ![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/8436e217f5a9409886e27825efb46b99~tplv-goo7wpa0wc-image.image)
|
菜单管理 | 互动工具 | ![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/267ce4d445f54e33a08c9ea27a19489b~tplv-goo7wpa0wc-image.image)
|
图文介绍 | ![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/c76d0a6dc07b4a658ce9bf4137a01dde~tplv-goo7wpa0wc-image.image)
|
商品卡片 | ![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/1aff66771be04badaf1f1448cb629d00~tplv-goo7wpa0wc-image.image)
|
营销互动 | 直播报名 说明 - 人工报名审核需在数据统计 > 报名数据页面完成。由于数据统计模块暂不支持嵌入,如开启报名审核功能,您必须在企业直播控制台完成人工审核。
- 嵌入的直播报名页面中,暂不支持查看报名数据详情以及定制短信内容功能。
| ![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/67c99521c15d45a9a79a9173f00c8c62~tplv-goo7wpa0wc-image.image)
|
表单问卷 | ![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/da22d018142e4f6a8dc0384804289657~tplv-goo7wpa0wc-image.image)
|
抽奖玩法 > 累计观看抽奖 | ![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/71f34a8095bb4fdc96aa5c86e3e1b837~tplv-goo7wpa0wc-image.image)
|
礼物打赏 | ![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/618c162f07b84b40812aef83f4213b51~tplv-goo7wpa0wc-image.image)
|
直播建站 | 整页嵌入 | 站点列表 | ![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/1bf435c664424e42a5d2ec02e4c5bfc5~tplv-goo7wpa0wc-image.image)
|
新建站点 | ![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/fc788ec0834849daa3ae009d268c74ba~tplv-goo7wpa0wc-image.image)
|
站点信息 | ![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/b2a5a3e4220240ed83a56dba9ffcec22~tplv-goo7wpa0wc-image.image)
|
页面配置 | ![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/6f3ae4221bf14487af1bc6986e706c9e~tplv-goo7wpa0wc-image.image)
|
注意事项
- 弹窗仅支持在嵌入的功能页面居中显示,但无法在您的自有页面居中显示。
- 嵌入的功能页面版本与您使用 iframe 嵌入时的控制台版本一致。如需升级功能页面的版本,请联系企业直播技术支持。
嵌入说明
![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/41046f1e8f35432e820f895831f35133~tplv-goo7wpa0wc-image.image)
嵌入链接
https://vlive.byteoc.com/livesaas/embeded/178179896233****?type=ImageTextIntro&appid=APP_ID&AccessKeyId=ACESS_KEY_ID&SecretAccessKey=SECRET_ACCESS_KEY&SessionToken=SESSION_TOKEN&LoginLivesaasToken=LIVESAAS_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。可通过调用 GetLoginLivesaasSts 接口获取。 |
SecretAccessKey | Query | 临时凭证 SK。可通过调用 GetLoginLivesaasSts 接口获取。 |
SessionToken | Query | 使用临时凭证时需要传递的 Token。可通过调用 GetLoginLivesaasSts 接口获取。 |
LoginLivesaasToken | Query | 企业直播 Token。可通过调用 GetLoginLivesaasSts 接口获取。 |
功能嵌入
模块 | 功能页面 | 示例 | 说明 |
---|
直播间管理 | 直播控制 | 聊天互动 | https://vlive.byteoc.com/livesaas/embeded/178179896233****?type=LiveControlMenu&appid=APP_ID&AccessKeyId=ACESS_KEY_ID&SecretAccessKey=SECRET_ACCESS_KEY&SessionToken=SESSION_TOKEN&LoginLivesaasToken=LIVESAAS_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=SESSION_TOKEN&LoginLivesaasToken=LIVESAAS_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=SESSION_TOKEN&LoginLivesaasToken=LIVESAAS_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=SESSION_TOKEN&LoginLivesaasToken=LIVESAAS_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=SESSION_TOKEN&LoginLivesaasToken=LIVESAAS_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=SESSION_TOKEN&LoginLivesaasToken=LIVESAAS_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=SESSION_TOKEN&LoginLivesaasToken=LIVESAAS_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=SESSION_TOKEN&LoginLivesaasToken=LIVESAAS_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=SESSION_TOKEN&LoginLivesaasToken=LIVESAAS_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=SESSION_TOKEN&LoginLivesaasToken=LIVESAAS_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=SESSION_TOKEN&LoginLivesaasToken=LIVESAAS_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() {
// 调用 GetLoginLivesaasSts 接口获取 STS 签名。
var result = await GetLoginLivesaasSts();
var activities = await listActivityAPI();
var activityId = activities[0].ID;
var params = {
AccessKeyId: result.StsMsg.AccessKeyId,
SecretAccessKey : result.StsMsg.SecretAccessKey,
SessionToken: result.StsMsg.SessionToken,
Type: 'LiveControlMenu',
AppId: 'AppId', // 接入方的唯一标识。请联系企业直播技术支持获取。
LoginLivesaasToken: result.LoginLivesaasToken
}
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>
附录
配置子账号调用 GetLoginLivesaasSts 接口
- 通过主账号登录企业直播控制台。
- 添加子账号。详见子账号管理。
- 为子账号添加
LiveSaasSupervisor
权限。
单击页面右上方的账号,选择访问控制,进入访问控制页面。
![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/17a7e66337b1435e9af0c87473113f73~tplv-goo7wpa0wc-image.image)
在身份管理 > 用户页面,单击子账号的用户名或操作列的管理。
在用户详情页面,单击权限页签。单击添加权限,添加 LiveSaasSupervisor
权限。
![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/1b730b6a79d54fefb2a3e212e05dc6e8~tplv-goo7wpa0wc-image.image)
- 在用户详情页面,单击密钥页签并单击新建密钥,获取子账号的 AK 和 SK。
通过获取的子账号 AK 和 SK,调用 GetLoginLivesaasSts 接口。