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

Dev/add vue tutorial

Author: plutoless

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

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/).

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);
       })

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>