控制台 iframe 嵌入--企业直播-火山引擎

文档中心

立即注册

导航

控制台 iframe 嵌入

最近更新时间：2024.11.04 16:03:00首次发布时间：2023.11.23 14:34:37

本文介绍如何通过 iframe 嵌入的方式，将企业直播控制台的功能模块嵌入您的自有页面，从而在自有页面管理直播间、新建直播站点等。您可以通过 iframe 嵌入的方式，更便捷、快速地集成控制台功能，有效降低开发成本。

前提条件

您已开通定制版套餐。详见计费说明。
为保证嵌入的功能页面可以正常访问，请确保您的自有页面使用 https 域名。
您已通过火山引擎主账号或子账号调用 GetLoginLivesaasSts 接口。如需通过子账号调用该接口，确保已对子账号完成相关配置，详见配置子账号调用 GetLoginLivesaasSts 接口。

示例页面

功能列表

目前，您可以通过 iframe 嵌入的方式，将以下功能模块嵌入您的自有页面。

模块	功能
直播间管理	整页嵌入	支持嵌入直播间内除以下功能外的所有功能：直播控制页的网页直播、直播伴侣、云导播、数据大屏营销互动页签下的直播转推回放管理页的剪辑入口
	直播控制	聊天互动
		互动工具
		商品卡片
	观看页管理	观看限制
	观看页管理	直播敏感词
	菜单管理	互动工具
		图文介绍
		商品卡片
	营销互动	直播报名说明人工报名审核需在数据统计 > 报名数据页面完成。由于数据统计模块暂不支持单独嵌入，如需开启报名审核功能，建议实现直播间的整页嵌入。嵌入的直播报名页面中，暂不支持查看报名数据详情以及定制短信内容功能。
		表单问卷
		抽奖玩法 > 累计观看抽奖
		礼物打赏
直播建站	整页嵌入	站点列表
		新建站点
		站点信息
		页面配置

注意事项

弹窗仅支持在嵌入的功能页面居中显示，但无法在您的自有页面居中显示。
嵌入的功能页面版本与您使用 iframe 嵌入时的控制台版本一致。如需升级功能页面的版本，请联系企业直播技术支持。

嵌入说明

嵌入链接

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/liveManagement/178179896233****?appid=APP_ID&AccessKeyId=ACESS_KEY_ID&SecretAccessKey=SECRET_ACCESS_KEY&SessionToken=SESSION_TOKEN&LoginLivesaasToken=LIVESAAS_TOKEN`	最小宽度：1350 px 最小高度：900 px
	直播控制	聊天互动	`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 权限。
1. 单击页面右上方的账号，选择访问控制，进入访问控制页面。
2. 在身份管理 > 用户页面，单击子账号的用户名或操作列的管理。
3. 在用户详情页面，单击权限页签。单击添加权限，添加 LiveSaasSupervisor 权限。
在用户详情页面，单击密钥页签并单击新建密钥，获取子账号的 AK 和 SK。

通过获取的子账号 AK 和 SK，调用 GetLoginLivesaasSts 接口。