将 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: 'embedrtcconsole'
    })

    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: 根据返回的错误提示解决。

You have no permission for this action.
Root user is forbidden to assume role.

确保使用子用户的 AK、SK 调用本接口。