-
Notifications
You must be signed in to change notification settings - Fork 3
/
quickstart.html
300 lines (286 loc) · 14.2 KB
/
quickstart.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video测试页面</title>
</head>
<body style="background:#333;color:#fff;text-align: center;">
<div id="current-invite" hidden="" style="z-index: 999; position:absolute;border: 1px solid;border-radius: 5px; width:320px;height:160px;left:50%;margin-left:-160px;background-color: white;margin-top: 200px; ">
<div id="invitInfo" style="width:300px;height:60px;color:black;padding-top:40px;">
</div>
<button style="height:30px;border: 1px solid;border-radius:3px;width:100px;cursor:pointer;" onclick="accept()">
接受
</button>
<button style="height:30px;border: 1px solid;border-radius:3px;width:100px;margin-left:20px;cursor:pointer;" onclick="reject()">
拒绝
</button>
</div>
<div id="invite_busy" hidden="" style="z-index: 999; position:absolute;border: 1px solid;border-radius: 5px; width:320px;height:160px;left:50%;margin-left:-160px;background-color: white;margin-top: 200px;">
<div id="busyInfo" style="width:300px;height:60px;color:black;padding-top:40px;">
您邀请的用户正在通话中，请稍候再拨！
</div>
<button style="height:30px;border: 1px solid;border-radius:3px;width:100px;cursor:pointer;" onclick="javascript:document.getElementById('invite_busy').hidden = true">
确定
</button>
</div>
<div id="timeout_busy" hidden="" style="z-index: 999; position:absolute;border: 1px solid;border-radius: 5px; width:320px;height:160px;left:50%;margin-left:-160px;background-color: white;margin-top: 200px;">
<div id="timeoutInfo" style="width:300px;height:60px;color:black;padding-top:40px;">
您邀请的用户未接受邀请，请稍候再拨！
</div>
<button style="height:30px;border: 1px solid;border-radius:3px;width:100px;cursor:pointer;" onclick="javascript:document.getElementById('timeout_busy').hidden = true">
确定
</button>
</div>
<div style="text-align:center;font-size:50px;margin-top:50px;">video conversation demo</div>
<div id="getAppid-div" style="text-align:center;margin-top:150px;">
<input id="videoAppid" type="" style="width:250px;height:35px;" name="" placeholder='请输入video appID'>
<input id="syncAppid" type="" style="width:250px;height:35px;" name="" placeholder='请输入sync appID'>
<button id="login" onclick="login()" style="height:35px;border: 1px solid;border-radius: 3px;cursor:pointer">匿名登录</button>
</div>
<div id="videos" style="text-align:center;margin:0px auto;margin-top:80px;" hidden="">
<video id="local" style="border:1px solid;width:480px;height:360px;" muted="" autoplay="" controls></video>
<video id="remote" style="border:1px solid;width:480px;height:360px;margin-left:50px;" autoplay="" controls></video>
</div>
<div id="appid-text" style="margin-top:20px;"></div>
<div id="hangup" style="height:50px;text-align:center;margin-top:20px;" hidden="">
<button style="height:35px;border: 1px solid;border-radius: 3px;width:200px;cursor:pointer; " onclick="disconnect()">挂断</button>
</div>
<div id="users" style="margin:0 auto;margin-top:40px;width:300px;" hidden="">
<div style="margin:0 auto;text-align:center;font-size:20px;margin-bottom:30px;">可邀请的在线用户列表</div>
<div id="user-list" style="border:1px solid;float:left;width:100%;min-height:200px;">
<div id="user-model" style="background-color:white; color: black; width:280px;height:30px;border:1px solid;margin:10px;float:left;" hidden="">
<span class="remoteuid"></span>
<button style="margin-top: 3px;border: 1px solid;border-radius: 3px;cursor:pointer " onclick="invite(this.parentElement.id)">邀请</button>
</div>
</div>
</div>
<script type="text/javascript" src='https://cdn.wilddog.com/sdk/js/2.5.5/wilddog.js'></script>
<script type="text/javascript" src='https://cdn.wilddog.com/sdk/js/2.4.6/wilddog-video-call.js'></script>
<script type="text/javascript">
var localEl = document.getElementById('local');
var remoteEl = document.getElementById('remote');
var videoAppidEl = document.getElementById('videoAppid');
var syncAppidEl = document.getElementById('syncAppid');
var userModel = document.getElementById('user-model');
var userDiv = document.getElementById('users');
var userList = document.getElementById('user-list');
var videoList = document.getElementById('videos');
var hangupEl = document.getElementById('hangup');
var loginBtn = document.getElementById('login');
var appidText = document.getElementById('appid-text');
var invitInfo = document.getElementById('invitInfo');
var inviteEl = document.getElementById('current-invite');
var loginDiv = document.getElementById('getAppid-div');
var inviteBusyEl = document.getElementById('invite_busy');
var inviteTimeoutEl = document.getElementById('timeout_busy');
var currentConversation = null; //保存建立通话成功后的当前Conversation对象
var incomingConversation = null;//保存被叫方监听到邀请未接受时获取到的Conversation对象
var outgoingConversation = null;//保存主叫方发起邀请未被接受时获取到的Conversation对象
var usersref = null;
var currentUser = null;
var remoteStream = null;
var localStream = null;
var status = 'new';//表示当前Conversation状态 new, outgoingInvite, incomingInvite, accepted, closed
var onInviteCb = function(conversation) {
//被叫方监听到邀请 还未接受邀请时 获取到Converstaion对象
incomingConversation = conversation;
inviteEl.hidden = false;
invitInfo.textContent = conversation.remoteUid + '向你发出会话邀请';
status = 'incomingInvite';
//监听被叫方的事件
// 长时间没有接受主叫方邀请 触发on('error')事件，此时会话没有建立成功,status = 'incomingInvite';
incomingConversation.on('error', function (error) {
if(status == 'incomingInvite'){
//或视频通话成功后由于网络或其他原因发生的错误
console.log('被叫方监听到邀请事件，未接受。存在未处理的请求，主叫方id为：' + incomingConversation.remoteUid);
console.log(error);
inviteEl.hidden = true;
}
});
//主叫方主动取消通话，调用conversation.close()事件，被叫方监听到‘closed’事件
incomingConversation.on('closed',function () {
if(status == 'incomingInvite'){
console.log('主叫方主动取消通话邀请');
inviteEl.hidden = true;
}
})
};
var onParticipantDisconnectedCb = function() {
if(remoteStream){
remoteStream.detach(remoteEl);
console.log('participant_disconnected');
currentConversation.close();
currentConversation = null;
hangupEl.hidden = true;
userDiv.hidden = false;
usersref.child('users/' + currentUser.uid).set(true);
}
};
var loginCb = function(user) {
//页面操作，无关sdk
appidText.textContent = '你的Wilddog ID：' + user.uid;
loginDiv.hidden = true;
videoList.hidden = false;
userDiv.hidden = false;
loginBtn.disabled = true;
currentUser = user;
usersref.child('users/' + user.uid).set(true);
usersref.child('users/' + user.uid).onDisconnect().remove();//监听在线用户列表，并展示除自己之外的用户
usersref.child('users').on('child_added', function(snap) {
if (snap.key() != user.uid) {
var newUser = userModel.cloneNode(true);
newUser.id = snap.key();
newUser.children[0].textContent = snap.key();
newUser.hidden = false;
userList.appendChild(newUser);
}
});
//有用户离开，在 'user-list' 元素中取消该用户
usersref.child('users').on('child_removed', function(snap) {
if (snap.key() != user.uid) {
var removeEl = document.getElementById(snap.key());
userList.removeChild(removeEl);
}
});
}
</script>
<script type="text/javascript">
//登录
//注：()=>{} ES6语法的匿名函数定义，其变化为：如果函数内部出现this，指代全局的this，而不再是函数的调用者
var login = function() {
//初始化野狗
var config = {
authDomain: videoAppidEl.value + '.wilddog.com',
syncURL: "https://" + syncAppidEl.value + ".wilddogio.com"
};
wilddog.initializeApp(config);
//WilddogVideoCall SDK 使用 syncAppId用以保存用户列表，方便获取邀请时对方uid。
//定义quickstart使用的用户列表存储路径，userList 可以改为其他自定义路径
usersref = wilddog.sync().ref();
//野狗匿名登录 推荐使用非匿名登录方式
wilddog.auth().signInAnonymously()
.then(function(user) {
//初始化WilddogVideoCall SDK
wilddogVideo.initialize({'appId':videoAppidEl.value,'token':user.getToken()});
//获取 WilddogVideoCall 对象
videoInstance = wilddogVideo.call();
//获取本地媒体流，并绑定到页面
wilddogVideo.createLocalStream({
captureVideo: true,
captureAudio: true,
dimension: '480p',
maxFPS: 15
})
.then(function(wdStream) {
localStream = wdStream;
//将获取到的媒体流放到video标签上
localStream.attach(localEl);
})
.catch(function(err) {
console.error(err);
});
loginCb(user);
})
.then(function() {
//监听收到的邀请
videoInstance.on('called', onInviteCb);
videoInstance.on('token_error',function () {
alert('token不合法或过期，请重新登录！');
})
})
.catch(function(err) {
console.log(err);
alert('请检查appid是否正确并开启匿名登录功能和实时视频服务！');
});
};
//接受当前收到的邀请
var accept = function() {
incomingConversation.accept(localStream).then(conversationStarted);
};
//拒绝当前收到的邀请
var reject = function() {
incomingConversation.reject();
inviteEl.hidden = true;
};
var conversationStarted = function(conversation) {
status = 'accepted';
currentConversation = conversation;
//监听新参与者加入conversation事件
currentConversation.on('stream_received', function(stream) {
inviteEl.hidden = true;
hangupEl.hidden = false;
userDiv.hidden = true;
usersref.child('users/' + currentUser.uid).remove();
remoteStream = stream;
remoteStream.attach(remoteEl);
});
//监听参与者离开conversation事件
currentConversation.on('closed', onParticipantDisconnectedCb);
currentConversation.on('local_stats', function(statistics) {
console.log('local_stats', statistics);
});
currentConversation.on('remote_stats', function(statistics) {
console.log('remote_stats', statistics);
});
currentConversation.on('error', function (error) {
inviteEl.hidden = true;
switch (error.code){
case 41004:
console.log('建立完视频通话后，由于peerConnection建立失败导致的错误');
console.log(error);
break;
case 41007:
console.log('建立完视频通话后，由于网络或其他原因导致的异常中断');
console.log(error);
hangupEl.hidden = true;
userDiv.hidden = false;
remoteStream.detach(remoteEl);
break;
}
});
};
//邀请其他用户加入会话
var invite = function(uid) {
//主叫方发起邀请 获取的Conversation对象
status = 'outgoingInvite';
outgoingConversation = videoInstance.call(uid,localStream,'test');
//监听主叫方事件
outgoingConversation.on('response',function (callStatus) {
switch (callStatus){
case 'ACCEPTED':
console.log('您邀请的用户已经接受邀请！');
//处理建立一对一视频通话后的事件
conversationStarted(outgoingConversation);
hangupEl.hidden = true;
userDiv.hidden = false;
break;
case 'REJECTED':
console.log('您邀请的用户已拒绝邀请，请重新邀请！');
break;
case 'BUSY':
console.log('您邀请的用户正忙，请稍后再邀请！');
inviteBusyEl.hidden = false;
break;
case 'TIMEOUT':
console.log('您邀请的用户未处理请求，请重新邀请！');
inviteTimeoutEl.hidden = false;
break;
}
})
};
//离开当前conversation
var disconnect = function() {
if (currentConversation) {
status = 'closed';
remoteStream.detach(remoteEl);
//Conversation提供了close函数用于主动离开conversation
currentConversation.close();
hangup.hidden = true;
currentConversation = null;
userDiv.hidden = false;
usersref.child('users/' + currentUser.uid).set(true);
}
}
</script>
</body>
</html>