-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathchatroom.html
127 lines (120 loc) · 5.57 KB
/
chatroom.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
<html>
<head>
<meta charset="UTF-8">
<title>video-chat-room</title>
</head>
<body style="background:#333;color:#fff;text-align: center;">
<div style="text-align:center;font-size:50px;margin-top:50px;">WilddogRoom demo</div>
<div id="getAppid-div" style="text-align:center;margin-top:150px;">
<input id="appId" type="" style="width:200px;height:35px;" name="" placeholder='请输入appId'>
<button id="login" onclick="login()" style="height:35px;width:70px;border: 1px solid;border-radius: 3px;cursor:pointer">匿名登录</button>
<input id="roomId" type="" style="width:200px;height:35px;" name="" placeholder='请输入房间号'>
<button id="join" onclick="join()" style="height:35px;width:70px;border: 1px solid;border-radius: 3px;cursor:pointer" disabled="true">进入</button>
</div>
<div id="videos" style="text-align:center;margin:0px auto;margin-top:60px;width:1080px" hidden="">
<div>
<button id="stop" onclick="disconnect()" style="height:35px;width:70px;border: 1px solid;border-radius: 3px;cursor:pointer">离开会议</button>
</div>
<video id="local" width=480px height=360px style="border:1px solid;margin-right:20px;margin-left:20px;margin-top:20px;" muted="" autoplay="" controls></video>
<video id="remote" width=480px height=360px style="border:1px solid;margin-right:20px;margin-left:20px;margin-top:20px;" autoplay="" hidden controls></video>
</div>
<script type="text/javascript" src='https://cdn.wilddog.com/sdk/js/2.5.8/wilddog.js'></script>
<script type="text/javascript" src='https://cdn.wilddog.com/sdk/js/2.3.0/wilddog-video-room.js'></script>
<!--<script type="text/javascript" src="./wilddog-video-room.js"></script>-->
<script type="text/javascript">
//获取所使用到的所有元素
var roomIdEl = document.getElementById('roomId');
var videosEl = document.getElementById('videos');
var localEl = document.getElementById('local');
var loginDiv = document.getElementById('getAppid-div');
var appidEl = document.getElementById('appId');
var joinBtn = document.getElementById('join');
var remoteEl = document.getElementById('remote');
var localStream = null;
var roomId = null;
var currentConference = null;
var roomInstance = null;
var login = function functionName() {
var config = {
authDomain: appidEl.value + '.wilddog.com'
};
wilddog.initializeApp(config);
wilddog.auth().signInAnonymously().then(function(user) {
alert('登录成功！请输入房间号加入视频会议！');
//通过wilddogVideo初始化 WilddogRoom SDK
wilddogVideo.initialize({'appId': appidEl.value, 'token': user.getToken()});
//通过wilddogVideo创建本地媒体流
wilddogVideo.createLocalStream({
captureVideo: true,
captureAudio: true,
dimension: '480p',
maxFPS: 15
}).then(function (wdStream) {
localStream = wdStream;
localStream.attach(localEl);
}).catch(function (err) {
console.error(err);
});
joinBtn.disabled = false;
}).catch(function(err) {
console.log(err);
console.error('请检查appId是否正确并开启匿名登录功能！');
})
};
var disconnect = function () {
roomInstance.disconnect();
this.location.href = 'https://localhost:8080';
};
//加入房间
var join = function() {
//拿到房间号
roomId = roomIdEl.value;
//通过wilddogRoom创建WilddogRoom实例
roomInstance = wilddogVideo.room(roomId);
loginDiv.hidden = true;
videosEl.hidden = false;
//进入到room
roomInstance.connect();
//room事件
roomInstance.on('connected',function () {
console.log('connected success');
//发布本地流
roomInstance.publish(localStream,function(error){
if(error == null){
console.log('publish success');
localStream.attach(localEl);
}else{
console.log('publish error' + error);
}
});
//Room内有流加入，此时不是真正的流，需要选择订阅才能获取
roomInstance.on('stream_added',function (roomStream) {
//订阅远端流
roomInstance.subscribe(roomStream,function (error) {
if(error == null){
console.log('subscribe success');
}
});
});
//此时接受的了真正的流，可以把获取到的远端流放入远端标签
roomInstance.on('stream_received',function (roomStream) {
var newRemote = remoteEl.cloneNode(true);
newRemote.id = roomStream.streamId;
newRemote.hidden = false;
videosEl.appendChild(newRemote);
roomStream.attach(newRemote);
});
//Room内有流离开，将流从远端移除
roomInstance.on('stream_removed',function (roomStream) {
var removeEl = document.getElementById(roomStream.streamId);
roomStream.detach(removeEl);
videosEl.removeChild(removeEl);
});
roomInstance.on('disconnected',function () {
console.log('disconnected room')
})
});
};
</script>
</body>
</html>