本文介绍如何通过 iframe 将 AI 直播控制台的功能页面嵌入自有页面。在自有页面中提供 AI 直播间管理、模型训练、商品库、素材库、知识库等能力后，可以降低控制台集成和页面开发成本。

前提条件 #

• 为保证嵌入的功能页面可以正常访问，请确保自有页面使用 https 域名。
• 已通过火山引擎主账号或具备超级管理员权限的 IAM 用户调用 GetLoginLivesaasSts 接口，获取临时凭证和企业直播 Token。

功能列表 #

目前支持通过 iframe 嵌入以下 AI 直播功能页面。嵌入页面的最小宽度为 1000 px，最小高度为 500 px。

功能页面	type 取值	页面截图
AI 直播控制	AILiveStudio
AI 直播间列表	AILiveRoom
模型训练 > 形象	AILiveAvatarTraining
模型训练 > 音色	AILiveVoiceTraining
商品库	AILiveProducts
素材库	AILiveMaterials
知识库	AILiveKnowledgeBase
服务中心	AILiveServiceCenter

注意事项 #

• 此方法仅支持 PC 端页面，不适用于 H5 页面。
• 弹窗仅支持在嵌入的功能页面中居中显示，无法在自有页面中居中显示。

嵌入说明 #

操作流程 #

1. 添加具备超级管理员权限的 IAM 用户，或准备火山引擎主账号。
2. 获取 IAM 用户或火山引擎主账号的 AccessKey（AK）和 SecretKey（SK）。
3. 使用 AK/SK 调用 GetLoginLivesaasSts 接口，获取临时 AK、临时 SK、SessionToken 和企业直播 Token。
4. 根据需要嵌入的功能页面，使用临时凭证拼接 iframe 嵌入链接。

嵌入链接 #

以下为 iframe 嵌入链接的详细说明。

https://vlive.byteoc.com/livesaas/embeded/178179896233****?AppId=AILive&type=AILiveStudio&AccessKeyId=ACCESS_KEY_ID&SecretAccessKey=SECRET_ACCESS_KEY&SessionToken=SESSION_TOKEN&LoginLivesaasToken=LIVESAAS_TOKEN

页面嵌入示例 #

示例代码 #

该示例代码适用于 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 接口获取临时凭证和企业直播 Token。
        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,
          // 要嵌入的页面。可替换为 AILiveRoom、AILiveAvatarTraining、AILiveVoiceTraining、
          // AILiveProducts、AILiveMaterials、AILiveKnowledgeBase、AILiveServiceCenter 等。
          type: "AILiveStudio",
          AppId: "AILive",
        };
        // 注意：/${activityId} 仅适用于 AI 直播控制页面。嵌入其他页面时，请使用：
        // https://vlive.byteoc.com/livesaas/embeded/?${...}
        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>