You need to enable JavaScript to run this app.
导航

控制台 iframe 嵌入

最近更新时间2023.11.23 15:13:06

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

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

前提条件

  • 您已开通定制版套餐。详见计费说明
  • 为保证嵌入的功能页面可以正常访问,请确保您的自有页面使用 https 域名。
  • 获取子账号的 AccessKey ID(AK)和 Secret AccessKey(SK),用于获取嵌入链接中的临时 AK、SK 和 Token。详见获取子账号 AK 和 SK

示例页面

图片

功能列表

目前,您可以通过 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。可通过获取的子账号 AK 和 SK,调用 AssumeRole 接口或使用 SDK 获取临时凭证 AK。有关如何获取子账号 AK 和 SK,详见获取子账号 AK 和 SK

SecretAccessKey

Query

临时凭证 SK。可通过获取的子账号 AK 和 SK,调用 AssumeRole 接口或使用 SDK 获取临时凭证 SK。有关如何获取子账号 AK 和 SK,详见获取子账号 AK 和 SK

SessionToken

Query

使用临时凭证时需要传递的 Token。可通过获取的子账号 AK 和 SK,调用 AssumeRole 接口或使用 SDK 获取 Token。有关如何获取子账号 AK 和 SK,详见获取子账号 AK 和 SK

功能嵌入

模块

功能页面

示例

说明

直播间管理

直播控制

聊天互动

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>

获取子账号 AK 和 SK

  1. 通过主账号登录企业直播控制台
  2. 账户中心 > 权限管理 > 用户管理页面,添加子账号。具体步骤,详见添加用户
    图片
  3. 单击页面右上方的账号,选择访问控制,进入访问控制页面。
    图片
  4. 在左侧导航栏,单击身份管理 > 角色
  5. 单击新建角色,添加 UserRoleForLivesaas 角色。
    1. 选择账号作为信任身份类型并单击下一步
      图片
    2. 输入 UserRoleForLivesaas 作为角色名并单击下一步
      图片
    3. 单击跳过
      图片
  6. 身份管理 > 用户页面,单击用户名或操作列的管理
    图片
  7. 用户详情页面,单击权限页签。单击添加权限,添加 STSAssumeRoleAccess 权限。
    图片
  8. 用户详情页面,单击密钥页签并单击新建密钥,获取子账号的 AK 和 SK。您也可以通过调用 CreateAccessKey 接口获取子账号的 AK 和 SK。
    图片