将 RTC 控制台中的监控台快速嵌入你的控制台系统。

前提条件
开发步骤
第一步：登录和鉴权

用户访问控制台数据时，通过安全令牌服务登录，火山引擎鉴权通过后，才会返回相应数据。安全令牌服务可以生成免密码登录链接，因此，你需要在服务器上对用户进行鉴权，识别该用户对应火山控制台的角色和所需访问权限，用于获取相应的角色密钥。

  1. 匹配用户在 RTC 控制台上对应的子用户，获取该子用户的 AK、SK，生成签名。

AK 是 AccessKey 的缩写, SK 是 SecretAccessKey 的缩写。

  1. 调用 AssumeRole 传入用户对应的控制台角色，获取临时 AK、SK 和 SessionToken。

  2. 调用 getSigninTokenWithSTS 传入 AK、SK 和 SessionToken，获取 SigninToken。

  3. 调用 loginWithSigninToken 传入 SigninToken，获取免密码登录链接。

参考火山引擎提供的 OpenAPI SDK 实现上述步骤。

第二步：生成内嵌页 URL
监控台页面 URL

URL 的结构为: console.volc-embed.com/rtc/callQualityRTC/${pageName}?${query}

展示搜索结果

你可以将以下搜索条件拼接到 URL 中，向 RTC 控制台请求直接展示搜索结果页面。

Key描述
appID应用 ID
bid业务标签
roomId房间 ID，诊断工具和房间监控页面展示指定 roomId 数据

以用户诊断工具为例，拼接后的 URL 为：
console.volc-embed.com/rtc/callQualityRTC/diagnosis?bid=***&appId=***

定制化选项

设置左侧菜单栏是否展示。

KeyValue

hideMenu

true: 展示，默认展示
false: 隐藏

以用户反馈页面为例，拼接后的 URL 为：
console.volc-embed.com/rtc/callQualityRTC/feedback?hideMenu=true

第三步：内嵌页面

将上一步骤中拼接好的 URL 通过 iframe 标签插入到内部控制台系统页面中。

<iframe src='https://[console.volc-embed.com](http://console.volc-embed.com)/rtc/callQualityRTC'></iframe>

js
示例代码

以 node 为例

const {Service} = require('@volcengine/openapi');
const axios= require("axios");

class StsService extends Service {
    constructor(props) {
        super({
            ...props,
            defaultVersion: "2018-01-01",
            serviceName: "sts",
        });
    }
}

async function main() {
    const  stsService = new StsService()
    stsService.setAccessKeyId('xxx');
    stsService.setSecretKey('yy')
    stsService.setHost('volcengineapi.byted.org')

    // 调用 AssumeRole 获取 AK、SK 和 SessionToken
    const assumeRole = stsService.createAPI('AssumeRole', {
        method: 'GET',
    });

    const  token = await assumeRole({
        RoleTrn: 'trn:iam::${accountId}:role/${角色名}',
        RoleSessionName: 'tlsiframe'
    })

    const { AccessKeyId, SecretAccessKey, SessionToken } = token.Result.Credentials;


    // 根据临时安全令牌获取 SigninToken
    const  signinResp = await axios.post('https://console.volc-embed.com/api/passport/login/getSigninTokenWithSTS', {
        "accessKeyId": AccessKeyId,
        "secretAccessKey": SecretAccessKey,
        "sessionToken": SessionToken
    })

    const  signinToken = signinResp.data.Result.SigninToken;

    // 根据 SigninToken  生成免密登录连接，打开内嵌诊断工具页面
    const url = `https://console.volc-embed.com/api/passport/login/loginWithSigninToken?signinToken=${signinToken}&redirectURI=${encodeURIComponent('https://console.volc-embed.com/rtc/callQualityRTC')}`
    // 成功登录一次后可以在临时 Token 的有效期内通过 URL 访问内嵌控制台其他页面
    const diagnosisUrl = `https://[console.volc-embed.com](http://console.volc-embed.com)/rtc/callQualityRTC/diagnosis`
    console.log(url)
}
main();

js
常见问题

Q: 调用 AssumeRole 获取临时 AK、SK 和 SessionToken 时报错

A: 根据返回的错误提示解决。