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
index 2a38dadf..7728a5b4 100644
--- 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
new file mode 100644
index 00000000..6d7976a8
--- /dev/null
+++ 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
index 44141fcd..7d5bcb8c 100644
--- 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
index ccd2c9ae..2b940283 100644
--- 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 @@
-
- join
- leave
-
+ join
+ leave
@@ -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)
+ })
}
}
@@ -154,6 +161,7 @@ export default {
}
.agora-view {
display: flex;
+ flex-wrap: wrap;
}
.agora-video {
width: 320px;
@@ -162,6 +170,7 @@ export default {
}
.agora-input {
margin: 20px;
+ width: 320px;
}
.agora-text {
margin: 5px;
@@ -169,13 +178,13 @@ export default {
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;
- }