<!--
|
* @Description: 指引组件
|
* @Date: 2022-03-14 16:56:36
|
* @LastEditTime: 2022-03-29 15:27:22
|
-->
|
<template>
|
<div class="guidance-container">
|
<el-collapse v-model="activeNames">
|
<el-collapse-item name="1">
|
<template slot="title">
|
<span v-if="isEnLang" class="collapse-title">Step 1 : Check Current Environment</span>
|
<span v-if="isZhLang" class="collapse-title">步骤 1 : 判断当前环境是否满足条件</span>
|
</template>
|
<ul class="collapse-content">
|
<li v-if="isEnLang">Determine if the current browser environment is suitable for using TRTC，You can visit <a
|
target="_blank" href="https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html">TRTC Detect Page</a></li>
|
<li v-if="isZhLang">判断当前浏览器环境是否满足使用 TRTC，您可以访问 <a
|
target="_blank" href="https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html">TRTC 检测页面</a></li>
|
</ul>
|
</el-collapse-item>
|
<el-collapse-item name="2">
|
<template slot="title">
|
<span v-if="isEnLang" class="collapse-title">Step 2 : Create New Application</span>
|
<span v-if="isZhLang" class="collapse-title">步骤 2 : 创建新的应用</span>
|
</template>
|
<ul v-if="isEnLang" class="collapse-content">
|
<li>Login <a target="_blank" href="https://console.cloud.tencent.com/trtc">TRTC Console</a>, choose Development Assistance > <a
|
target="_blank" href="https://console.cloud.tencent.com/trtc/quickstart">Demo Quick Run</a></li>
|
<li>Click New, enter a name for the application, such as TestTRTC.
|
If you have already created an application, click Existing.</li>
|
<li>Add or edit tags according to actual needs, click Create.</li>
|
<img src="@/assets/image/step1-en.png" alt="Create App" style="width: 400px"/>
|
</ul>
|
<ul v-if="isZhLang" class="collapse-content">
|
<li>登录<a target="_blank" href="https://console.cloud.tencent.com/trtc">实时音视频控制台</a>，选择【开发辅助】 > 【<a
|
target="_blank" href="https://console.cloud.tencent.com/trtc/quickstart">快速跑通Demo</a>】</li>
|
<li>单击【新建应用】输入应用名称，例如 TestTRTC；若您已创建应用可单击选择已有应用。</li>
|
<li>根据实际业务需求添加或编辑标签，单击【创建】。</li>
|
<img src="@/assets/image/step1.png" alt="创建应用" style="width: 400px"/>
|
</ul>
|
</el-collapse-item>
|
<el-collapse-item name="3">
|
<template slot="title">
|
<span v-if="isEnLang" class="collapse-title">Step 3 : Get SDKAppID and SecretKey</span>
|
<span v-if="isZhLang" class="collapse-title">步骤 3 : 获取 SDKAppID 和 密钥 SecretKey</span>
|
</template>
|
<ul v-if="isEnLang" class="collapse-content">
|
<li>Copy the SDKAppId and SecretKey into the input box</li>
|
<img src="@/assets/image/step2-en.png" alt="SDKAppId" style="width: 400px"/>
|
</ul>
|
<ul v-if="isZhLang" class="collapse-content">
|
<li>复制 SDKAppId 和密钥（secretKey）填入输入框</li>
|
<img src="@/assets/image/step2.png" alt="SDKAppId" style="width: 400px"/>
|
</ul>
|
</el-collapse-item>
|
<el-collapse-item name="4">
|
<template slot="title">
|
<span v-if="isEnLang" class="collapse-title">Step 4 : Start Video Call</span>
|
<span v-if="isZhLang" class="collapse-title">步骤 4 : 开始视频通话</span>
|
</template>
|
<ul v-if="isEnLang" class="collapse-content">
|
<li>Input userId and roomId</li>
|
<li>Click Join Room to enter the room</li>
|
<li>Click Publish to publish LocalStream</li>
|
<li>Click Unpublish to unpublish LocalStream</li>
|
<li>Click Leave Room to leave the room</li>
|
<li>Click Start Share Screen to publish screen stream</li>
|
<li>Click Stop Share Screen to unpublish screen stream</li>
|
</ul>
|
<ul v-if="isZhLang" class="collapse-content">
|
<li>输入 userId 和 roomId</li>
|
<li>点击【进入房间】按钮进入房间</li>
|
<li>点击【发布流】按钮发布音视频</li>
|
<li>点击【取消发布流】按钮取消发布音视频</li>
|
<li>点击【离开房间】按钮离开房间</li>
|
<li>点击【开始共享屏幕】按钮布屏幕分享</li>
|
<li>点击【停止共享屏幕】按钮取消发布屏幕分享</li>
|
</ul>
|
</el-collapse-item>
|
</el-collapse>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'compGuidance',
|
data() {
|
return {
|
activeNames: ['1', '4'],
|
};
|
},
|
computed: {
|
isEnLang() {
|
return this.$i18n.locale === 'en';
|
},
|
isZhLang() {
|
return this.$i18n.locale === 'zh';
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.guidance-container {
|
width: 100%;
|
border: 1px solid #DDDDDD;
|
border-radius: 4px;
|
padding: 0 10px;
|
margin-top: 20px;
|
text-align: left;
|
.collapse-title {
|
font-size: 16px;
|
font-weight: bold;
|
line-height: 18px;
|
}
|
.collapse-content {
|
font-size: 14px;
|
padding-left: 20px;
|
font-weight: 400;
|
margin-top: 10px;
|
}
|
}
|
</style>
|
