Merge pull request #194 from AgoraIO/dev/add-vue-tutorial

Dev/add vue tutorial
AgoraIO · Jun 21, 2020 · 25895e9 · 25895e9
2 parents 0325ea1 + 929c5d0
commit 25895e9
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 23 deletions.
diff --git a/One-to-One-Video/Agora-Web-Tutorial-1to1-Vue/README.md b/One-to-One-Video/Agora-Web-Tutorial-1to1-Vue/README.md
@@ -1,3 +1,20 @@
+*English | [中文](README.zh.md)*
+
+This code example shows how to quickly integrate basic one-to-one/one-to-many video calls
+
+Functions include:
+1. Join the channel
+2. Leave the channel
+Among them, Appid, Channel must be filled, Token is optional
+Video supports one to one, one to many calls
+
+To build and run the sample application, get an App ID:
+1. Create a developer account at [agora.io](https://dashboard.agora.io/signin/). Once you finish the signup process, you will be redirected to the Dashboard.
+2. Navigate in the Dashboard tree on the left to **Projects** > **Project List**.
+3. Save the **App ID** from the Dashboard for later use.
+4. Generate a temp **Access Token** (valid for 24 hours) from dashboard page with given channel name, save for later use.
+
+Start project
 # basic-video-call
 
 ## Project setup

diff --git a/One-to-One-Video/Agora-Web-Tutorial-1to1-Vue/README.zh.md b/One-to-One-Video/Agora-Web-Tutorial-1to1-Vue/README.zh.md
@@ -0,0 +1,40 @@
+*[English](README.md) | 中文*
+
+本项目代码示例了如何快速集成 基础一对一/一对多 视频通话
+功能包含：
+1. 加入频道
+2. 离开频道
+其中，Appid, Channel 必填，Token 为可选
+视频支持一对一，一对多 通话
+
+如何获取appID ？
+1. 在[agora.io](https://dashboard.agora.io/signin/)创建一个开发者账号
+2. 前往后台页面，点击左部导航栏的 **项目 > 项目列表** 菜单
+3. 复制后台的 **App ID** 并备注，稍后启动应用时会用到它
+4. 在项目页面生成临时 **Access Token** (24小时内有效)并备注，注意生成的Token只能适用于对应的频道名。
+
+开始运行项目
+# basic-video-call
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run dev
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/One-to-One-Video/Agora-Web-Tutorial-1to1-Vue/src/agora-rtc-client.js b/One-to-One-Video/Agora-Web-Tutorial-1to1-Vue/src/agora-rtc-client.js
@@ -35,7 +35,7 @@ export default class RTCClient {
  console.error("client join failed", err)
  })
  }, (err) => {
- reject()
+ reject(err)
  console.error(err)
  })
  console.log("[agora-vue] appId", option.appid)
@@ -54,14 +54,14 @@ export default class RTCClient {
  // Initialize the local stream
  this.localStream.init(() => {
  console.log("init local stream success") 
- resolve()
+ resolve(this.localStream)
  // Publish the local stream
  this.client.publish(this.localStream, (err) => {
  console.log("publish failed")
  console.error(err)
  })
  }, (err) => {
- reject()
+ reject(err)
  console.error("init local stream failed ", err)
  })
  })
@@ -109,7 +109,7 @@ export default class RTCClient {
  resolve()
  console.log("client leaves channel success");
  }, (err) => {
- reject()
+ reject(err)
  console.log("channel leave failed");
  console.error(err);
  })

diff --git a/One-to-One-Video/Agora-Web-Tutorial-1to1-Vue/src/components/Home.vue b/One-to-One-Video/Agora-Web-Tutorial-1to1-Vue/src/components/Home.vue
@@ -5,22 +5,20 @@
  </div>
  <div class='agora-box'>
  <div class="agora-input">
- <div class="text-agora">* Appid</div>
- <el-input v-model="option.appid" placeholder="Appid" clearable style="width: 320px"></el-input>
+ <div class="agora-text">* Appid</div>
+ <el-input v-model="option.appid" placeholder="Appid" clearable></el-input>
  </div>
  <div class="agora-input">
- <div class="text-agora">Token</div>
- <el-input v-model="option.token" placeholder="Token" clearable style="width: 320px"></el-input>
+ <div class="agora-text">Token</div>
+ <el-input v-model="option.token" placeholder="Token" clearable></el-input>
  </div>
  <div class="agora-input">
- <div class="text-agora">* Channel Name</div>
- <el-input v-model="option.channel" placeholder="Channel Name" clearable style="width: 320px"></el-input>
+ <div class="agora-text">* Channel Name</div>
+ <el-input v-model="option.channel" placeholder="Channel Name" clearable></el-input>
  </div>
  <div class="agora-button">
- <el-row>
- <el-button type="primary" @click="joinEvent" :disabled='showJoin' style="width: 90px; margin: 10px">join</el-button>
- <el-button type="primary" @click='leaveEvent' plain :disabled='!showJoin' style="width: 90px; margin: 10px">leave</el-button>
- </el-row>
+ <el-button type="primary" @click="joinEvent" :disabled='disableJoin'>join</el-button>
+ <el-button type="primary" @click='leaveEvent' plain :disabled='!disableJoin'>leave</el-button>
  </div>
  </div> 
  <div class="agora-view">
@@ -51,7 +49,7 @@ export default {
  uid: null,
  channel: '',
  },
- showJoin: false,
+ disableJoin: false,
  localStream: null,
  remoteStreams: [],
  }
@@ -75,12 +73,12 @@ export default {
  message: 'Join Success',
  type: 'success'
  });
- this.rtc.publishStream().then(() => {
+ this.rtc.publishStream().then((stream) => {
  this.$message({
  message: 'Publish Success',
  type: 'success'
  });
- this.localStream = this.rtc.localStream
+ this.localStream = stream
  }).catch((err) => {
  this.$message.error('Publish Failure');
  log('publish local error', err)
@@ -89,10 +87,10 @@ export default {
  this.$message.error('Join Failure');
  log('join channel error', err)
  })
- this.showJoin = true
+ this.disableJoin = true
  },
  leaveEvent () {
- this.showJoin = false
+ this.disableJoin = false
  this.rtc.leaveChannel().then(() => {
  this.$message({
  message: 'Leave Success',
@@ -136,6 +134,15 @@ export default {
  log('[agora] [stream-removed] stream-removed', stream.getId())
  this.remoteStreams = this.remoteStreams.filter((it) => it.getId() !== stream.getId())
  }) 
+
+ rtc.on('peer-online', (evt) => {
+ this.$message(`Peer ${evt.uid} is online`)
+ }) 
+
+ rtc.on('peer-leave', (evt) => {
+ this.$message(`Peer ${evt.uid} already leave`)
+ this.remoteStreams = this.remoteStreams.filter((it) => it.getId() !== evt.uid)
+ }) 
  }
  }
 </script>
@@ -154,6 +161,7 @@ export default {
  }
  .agora-view {
  display: flex;
+ flex-wrap: wrap;
  }
  .agora-video {
  width: 320px;
@@ -162,20 +170,21 @@ export default {
  }
  .agora-input {
  margin: 20px;
+ width: 320px;
  }
  .agora-text {
  margin: 5px;
  font-size: 16px;
  font-weight: bold;
  }
  .agora-button {
- margin-left: 10px;
+ display: flex;
+ width: 160px;
+ justify-content: space-between;
+ margin: 20px;
  }
  .agora-video {
  width: 320px;
  height: 240px;
  }
- .text-agora {
- font-weight: bold;
- }
 </style>