You need to enable JavaScript to run this app.
导航
企业直播
  • 文档首页
    • /企业直播/aPaaS SDK 参考/iframe 嵌入/控制台 iframe 嵌入
控制台 iframe 嵌入
最近更新时间：2025.01.07 19:35:38首次发布时间：2023.11.23 14:34:37
我的收藏

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

前提条件

示例页面

Image

功能列表

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

直播间管理

功能

页面截图

整页嵌入

支持嵌入直播间内除以下功能外的所有功能：

  • 直播控制页的网页直播、直播伴侣、云导播、数据大屏
  • 营销互动页签下的直播转推
  • 回放管理页的剪辑入口

Image

直播控制

Image

直播控制

聊天互动

Image

互动工具

Image

商品卡片

Image

观看页管理

基础信息

Image

外观设置

Image

直播助教

Image

观看限制

Image

安全管控

Image

直播敏感词

Image

菜单管理

聊天互动

Image

互动工具

Image

图文介绍

Image

商品卡片

Image

营销互动

直播报名

说明

  • 人工报名审核需在数据统计 > 报名数据页面完成。由于数据统计模块暂不支持单独嵌入，如需开启报名审核功能，建议实现直播间的整页嵌入。
  • 嵌入的直播报名页面中，暂不支持查看报名数据详情以及定制短信内容功能。

Image

直播分享

Image

表单问卷

Image

直播转推

Image

抽奖玩法

Image

礼物打赏

Image

营销广告

Image

回放管理

Image

数据统计

基础数据

Image

观众行为数据

Image

直播建站

功能

页面截图

整页嵌入

站点列表

Image

新建站点

Image

站点信息

Image

页面配置

Image

注意事项

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

嵌入说明

Image

嵌入链接

https://vlive.byteoc.com/livesaas/embeded/178179896233****?type=ImageTextIntro&bgColorPage=COLOR&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：直播控制 > 聊天互动、互动工具、商品卡片。
  • LiveControl：直播控制。
  • LivePageSettingInfo：观看页管理 > 基础信息。
  • LivePageSettingAppearance：观看页管理 > 外观设置。
  • LivePageSettingTeachingAssistant：观看页管理 > 直播助教。
  • WatchLimit：观看页管理 > 观看限制。
  • LivePageSettingSecurityControl：观看页管理 > 安全管控。
  • Antidirt：观看页管理 > 直播敏感词。
  • ChatInteraction：菜单管理 > 聊天互动。
  • CommentImageText：菜单管理 > 互动工具。
  • ImageTextIntro：菜单管理 > 图文介绍。
  • ProductCard：菜单管理 > 商品卡片。
  • Enroll：营销互动 > 直播报名。
  • SharePoster：营销互动 > 直播分享。
  • Questionnaire：营销互动 > 表单问卷。
  • BindUser：营销互动 > 直播转推。
  • LotteryGame：营销互动 > 抽奖玩法。
  • GiftReward：营销互动 > 礼物打赏。
  • MarketingAd：营销互动 > 营销广告。
  • ReplayManagement：回放管理。
  • StatisticsBasicData：数据统计 > 基础数据。
  • StatisticsUserBehaviourData：数据统计 > 观众行为数据。
  • LiveSite：直播建站。

如需隐藏嵌入页面中的指定功能，您可以在嵌入链接中拼接指定参数。详见隐藏嵌入页面中的指定功能。

bgColorPage

Query

嵌入页面的背景颜色。不传该参数，则默认使用您自有页面的背景颜色。
请完成以下步骤，获取参数值：

  1. 使用以下任一方式表示颜色值：
    • 颜色名称，例如 red、blue、green。
    • 十六进制颜色代码，例如 #FF0000、#0000FF、#00FF00。
    • RGB 颜色值，例如 rgb(255, 0, 0)、rgb(0, 0, 255)、rgb(0, 255, 0)。
  2. 按照 RFC3986 规范对颜色值进行 URL 编码。

例如，使用十六进制颜色代码将嵌入页面的背景颜色设置为蓝色，则需要按照 RFC3986 规范对 #0000FF 进行 URL 编码，即参数取值为 %230000FF。

appid

Query

接入方的唯一标识。请联系企业直播技术支持获取。

AccessKeyId

Query

临时凭证 AK。
通过调用 GetLoginLivesaasSts 接口获取，并按照 RFC3986 规范对取值进行 URL 编码。

SecretAccessKey

Query

临时凭证 SK。
通过调用 GetLoginLivesaasSts 接口获取，并按照 RFC3986 规范对取值进行 URL 编码。

SessionToken

Query

使用临时凭证时需要传递的 Token。
通过调用 GetLoginLivesaasSts 接口获取，并按照 RFC3986 规范对取值进行 URL 编码。

LoginLivesaasToken

Query

企业直播 Token。
通过调用 GetLoginLivesaasSts 接口获取。由于接口已经对取值进行了 URL 编码，因此无需再次编码。

功能嵌入

整页嵌入

  • 直播间

    示例

    说明

    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

    支持嵌入直播间页面除以下功能外的所有功能：

    • 直播控制页的网页直播、直播伴侣、云导播、数据大屏
    • 营销互动页签下的直播转推
    • 回放管理页的剪辑入口

    如需隐藏嵌入页面的左侧导航栏，您可以在嵌入链接中拼接 hideLiveManagementSideMenu=true。完整嵌入链接如下所示。

    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&hideLiveManagementSideMenu=true

  • 直播建站

    示例

    说明

    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

    支持嵌入站点列表、新建站点、站点信息、页面配置功能。
    如需隐藏嵌入页面的左侧导航栏，您可以在嵌入链接中拼接 hideLiveManagementSideMenu=true。完整嵌入链接如下所示。

    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&hideLiveManagementSideMenu=true

单模块嵌入

功能页面

示例

说明

直播控制

https://vlive.byteoc.com/livesaas/embeded/178179896233****?type=LiveControl&appid=APP_ID&AccessKeyId=ACESS_KEY_ID&SecretAccessKey=SECRET_ACCESS_KEY&SessionToken=SESSION_TOKEN&LoginLivesaasToken=LIVESAAS_TOKEN

最小宽度：950 px
最小高度：625 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=LivePageSettingInfo&appid=APP_ID&AccessKeyId=ACESS_KEY_ID&SecretAccessKey=SECRET_ACCESS_KEY&SessionToken=SESSION_TOKEN&LoginLivesaasToken=LIVESAAS_TOKEN

最小宽度：600 px
最小高度：650 px

外观设置

https://vlive.byteoc.com/livesaas/embeded/178179896233****?type=LivePageSettingAppearance&appid=APP_ID&AccessKeyId=ACESS_KEY_ID&SecretAccessKey=SECRET_ACCESS_KEY&SessionToken=SESSION_TOKEN&LoginLivesaasToken=LIVESAAS_TOKEN

最小宽度：600 px
最小高度：650 px

直播助教

https://vlive.byteoc.com/livesaas/embeded/178179896233****?type=LivePageSettingTeachingAssistant&appid=APP_ID&AccessKeyId=ACESS_KEY_ID&SecretAccessKey=SECRET_ACCESS_KEY&SessionToken=SESSION_TOKEN&LoginLivesaasToken=LIVESAAS_TOKEN

最小宽度：830 px
最小高度：650 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=LivePageSettingSecurityControl&appid=APP_ID&AccessKeyId=ACESS_KEY_ID&SecretAccessKey=SECRET_ACCESS_KEY&SessionToken=SESSION_TOKEN&LoginLivesaasToken=LIVESAAS_TOKEN

最小宽度：500 px
最小高度：650 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=ChatInteraction&appid=APP_ID&AccessKeyId=ACESS_KEY_ID&SecretAccessKey=SECRET_ACCESS_KEY&SessionToken=SESSION_TOKEN&LoginLivesaasToken=LIVESAAS_TOKEN

最小宽度：600 px
最小高度：650 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=SharePoster&appid=APP_ID&AccessKeyId=ACESS_KEY_ID&SecretAccessKey=SECRET_ACCESS_KEY&SessionToken=SESSION_TOKEN&LoginLivesaasToken=LIVESAAS_TOKEN

最小宽度：500 px
最小高度：650 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=9896233****?type=BindUser&appid=APP_ID&AccessKeyId=ACESS_KEY_ID&SecretAccessKey=SECRET_ACCESS_KEY&SessionToken=SESSION_TOKEN&LoginLivesaasToken=LIVESAAS_TOKEN

最小宽度：880 px
最小高度：650 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

最小宽度：500 px
最小高度：650 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/178179896233****?type=MarketingAd&appid=APP_ID&AccessKeyId=ACESS_KEY_ID&SecretAccessKey=SECRET_ACCESS_KEY&SessionToken=SESSION_TOKEN&LoginLivesaasToken=LIVESAAS_TOKEN

最小宽度：400 px
最小高度：650 px

回放管理

https://vlive.byteoc.com/livesaas/embeded/178179896233****?type=ReplayManagement&appid=APP_ID&AccessKeyId=ACESS_KEY_ID&SecretAccessKey=SECRET_ACCESS_KEY&SessionToken=SESSION_TOKEN&LoginLivesaasToken=LIVESAAS_TOKEN

最小宽度：1400 px
最小高度：650 px

数据统计

基础数据

https://vlive.byteoc.com/livesaas/embeded/178179896233****?type=StatisticsBasicData&appid=APP_ID&AccessKeyId=ACESS_KEY_ID&SecretAccessKey=SECRET_ACCESS_KEY&SessionToken=SESSION_TOKEN&LoginLivesaasToken=LIVESAAS_TOKEN

最小宽度：1120 px
最小高度：650 px

观众行为数据

https://vlive.byteoc.com/livesaas/embeded/178179896233****?type=StatisticsUserBehaviourData&appid=APP_ID&AccessKeyId=ACESS_KEY_ID&SecretAccessKey=SECRET_ACCESS_KEY&SessionToken=SESSION_TOKEN&LoginLivesaasToken=LIVESAAS_TOKEN

最小宽度：1300 px
最小高度：650 px

隐藏嵌入页面中的指定功能

如需隐藏嵌入页面的左侧导航栏，您可以在嵌入链接中拼接 hideLiveManagementSideMenu=true。完整嵌入链接如下所示。

https://vlive.byteoc.com/livesaas/embeded/178179896233****?type=Type&appid=APP_ID&AccessKeyId=ACESS_KEY_ID&SecretAccessKey=SECRET_ACCESS_KEY&SessionToken=SESSION_TOKEN&LoginLivesaasToken=LIVESAAS_TOKEN&hideLiveManagementSideMenu=true

如需隐藏嵌入页面中的指定功能，您可以在嵌入链接中拼接指定参数。例如在嵌入直播控制页面后，如需隐藏播放器，则可在嵌入链接中添加 hideLiveControlPlayer=true。完整嵌入链接如下所示。

https://vlive.byteoc.com/livesaas/embeded/178179896233****?type=LiveControl&appid=APP_ID&AccessKeyId=ACESS_KEY_ID&SecretAccessKey=SECRET_ACCESS_KEY&SessionToken=SESSION_TOKEN&LoginLivesaasToken=LIVESAAS_TOKEN&hideLiveControlPlayer=true

目前支持隐藏的功能及其参数如下表所示。

嵌入页面

参数

功能

页面截图

直播控制（type=LiveControl）

hideLiveControlPlayer=true

播放器

Image

hidePlayerPopularity=true

人气值

Image

hidePlayerLikes=true

直播间点赞数

Image

hideAudienceList=true

观众列表

Image

hideLiveControlChat=true

菜单

Image

hideLiveControlTab=true

播放器下方区域

Image

hideMobileBroadcast=true

手机开播

Image

hideWebPush=true

网页直播

Image

hideLivePartner=true

直播伴侣

Image

hidePullStream=true

拉流直播

Image

hideLoopVideo=true

视频轮播

Image

hideCloudCast=true

云导播

Image

hidePushStream=true

推流直播

Image

hidePopularity=true

互动人气

Image

hideBasicAiSubtitle=true

直播字幕

Image

hideDiligentDetect=true

认真度检测

Image

hideLiveScreenData=true

数据大屏

Image

hideVideoEdit=true

直播剪辑

Image

观看页管理 > 基础信息（type=LivePageSettingInfo）

hideSettingBasic=true

基础设置

Image

hideSettingAdvanced=true

高级功能

Image

观看页管理 > 外观设置（type=LivePageSettingAppearance）

hideAppearanceLivePage=true

直播间

Image

hideAppearanceLoginPage=true

登录页

Image

观看页管理 > 安全管控（type=LivePageSettingSecurityControl）

hideSecurityControlBasic=true

基础配置

Image

hideSecurityControlWatermark=true

全屏水印

Image

hideSecurityControlCarousel=true

跑马灯

Image

菜单管理 > 聊天互动（type=ChatInteraction）

hideChatBasicConfig=true

基础配置

Image

hideChatCustomEmoji=true

自定义表情

Image

营销互动 > 抽奖玩法（type=LotteryGame）

hideRealtimeLottery=true

实时抽奖

Image

hideTaskAward=true

累计观看抽奖

Image

hideLotteryLib=true

奖品库

Image

营销互动 > 营销广告（type=MarketingAd）

hideAdBrand=true

主播/品牌方

Image

hideGuide=true

引导页

Image

hidePageHeadAd=true

页头广告

Image

hidePageMiddleAd=true

页中广告

Image

hideFloatAd=true

浮标广告

Image

回放管理（type=ReplayManagement）

hideReplayConfig=true

回放设置

Image

hideUploadVideoBtn=true

上传视频

Image

hideImportFromVideoLib=true

从视频库中选择

Image

  • 观看页管理 > 基础信息（type=LivePageSettingInfo）
  • 观看页管理 > 外观设置（type=LivePageSettingAppearance）
  • 观看页管理 > 直播助教（type=LivePageSettingTeachingAssistant）
  • 观看页管理 > 安全管控（type=LivePageSettingSecurityControl）
  • 观看页管理 > 直播敏感词（type=Antidirt）
  • 菜单管理 > 聊天互动（type=ChatInteraction）
  • 菜单管理 > 互动工具（type=CommentImageText）
  • 菜单管理 > 图文介绍（type=ImageTextIntro）
  • 菜单管理 > 商品卡片（type=ProductCard）
  • 营销互动 > 直播报名（type=Enroll）
  • 营销互动 > 直播分享（type=SharePoster）
  • 营销互动 > 表单问卷（type=Questionnaire）
  • 营销互动 > 直播转推（type=BindUser）
  • 营销互动 > 抽奖玩法（type=LotteryGame）
  • 营销互动 > 礼物打赏（type=GiftReward）
  • 营销互动 > 营销广告（type=MarketingAd）

hideLayout.LivecontrolMobilepreview=true

配置效果预览

Image

示例代码

该示例代码适用于 JavaScript 语言。如果您选择通过其他语言生成嵌入链接，请根据对应语言的规范进行改写。

<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', // 接入方的唯一标识。请联系企业直播技术支持获取。
        }
        var iframeUrl = `https://vlive.byteoc.com/livesaas/embeded/${activityId}?${new URLSearchParams(params).toString()}&LoginLivesaasToken=${result.LoginLivesaasToken}`;
        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 接口

  1. 通过主账号登录企业直播控制台。
  2. 添加子账号。详见子账号管理。
  3. 为子账号添加 LiveSaasSupervisor 权限。

    1. 单击页面右上方的账号，选择访问控制，进入访问控制页面。
      Image

    2. 在身份管理 > 用户页面，单击子账号的用户名或操作列的管理。

    3. 在用户详情页面，单击权限页签。单击添加权限，添加 LiveSaasSupervisor 权限。
      Image

  4. 在用户详情页面，单击密钥页签并单击新建密钥，获取子账号的 AK 和 SK。

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