文档中心

控制台 iframe 嵌入

最近更新时间：2024.03.15 17:42:16

首次发布时间：2023.11.23 14:34:37

本文介绍如何通过 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 接口

通过主账号登录企业直播控制台。
添加子账号。
1. 在账户中心 > 权限管理 > 用户管理页面，单击添加用户。
2. 在添加用户对话框中，单击添加用户，完成相关配置并单击确定。详见添加用户。
  说明
  如仅用于调用 AssumeRole 接口从而实现控制台 iframe 嵌入，无需选择所属角色和组织，默认该子账号角色为默认子账号且不属于任何组织。
为子账号添加 AssumeRole 接口的访问权限。
1. 单击页面右上方的账号，选择访问控制，进入访问控制页面。
2. 在身份管理 > 用户页面，单击子账号的用户名或操作列的管理。
3. 在用户详情页面，单击权限页签。单击添加权限，添加 STSAssumeRoleAccess 权限。
在用户详情页面，单击密钥页签并单击新建密钥，获取子账号的 AK 和 SK。您也可以通过调用 CreateAccessKey 接口获取子账号的 AK 和 SK。

通过获取的子账号 AK 和 SK，调用 AssumeRole 接口。您也可以通过该子账号的 AK 和 SK，使用 SDK 调用 AssumeRole 接口。

通过企业直播主账号新建角色

通过主账号登录企业直播控制台。
单击页面右上方的账号，选择访问控制，进入访问控制页面。
在左侧导航栏，单击身份管理 > 角色。
单击新建角色，添加角色。
1. 选择账号作为信任身份类型并单击下一步。
2. 输入角色名称并单击下一步。此处以 UserRoleForLivesaas 为例。
3. 单击跳过。

按接口中规定的指定格式，将该角色的角色名称作为请求参数 RoleTrn 的参数值，调用 AssumeRole 接口。