|
@@ -0,0 +1,228 @@
|
|
1
|
+/* global $, config, JitsiMeetJS */
|
|
2
|
+import 'jquery';
|
|
3
|
+import { parseURLParams } from '../react/features/base/util/parseURLParams';
|
|
4
|
+import { parseURIString } from '../react/features/base/util/uri';
|
|
5
|
+
|
|
6
|
+const params = parseURLParams(window.location, false, 'hash');
|
|
7
|
+const { isHuman = false } = params;
|
|
8
|
+const {
|
|
9
|
+ localAudio = params['config.startWithAudioMuted'] !== true,
|
|
10
|
+ localVideo = params['config.startWithVideoMuted'] !== true,
|
|
11
|
+ remoteVideo = isHuman,
|
|
12
|
+ remoteAudio = isHuman
|
|
13
|
+} = params;
|
|
14
|
+
|
|
15
|
+const { room: roomName } = parseURIString(window.location.toString());
|
|
16
|
+
|
|
17
|
+let connection = null;
|
|
18
|
+
|
|
19
|
+let isJoined = false;
|
|
20
|
+
|
|
21
|
+let room = null;
|
|
22
|
+
|
|
23
|
+let numParticipants = 1;
|
|
24
|
+
|
|
25
|
+let localTracks = [];
|
|
26
|
+const remoteTracks = {};
|
|
27
|
+
|
|
28
|
+window.APP = {
|
|
29
|
+ conference: {
|
|
30
|
+ getStats() {
|
|
31
|
+ return room.connectionQuality.getStats();
|
|
32
|
+ },
|
|
33
|
+ getConnectionState() {
|
|
34
|
+ return room && room.getConnectionState();
|
|
35
|
+ }
|
|
36
|
+ },
|
|
37
|
+
|
|
38
|
+ get room() {
|
|
39
|
+ return room;
|
|
40
|
+ },
|
|
41
|
+ get connection() {
|
|
42
|
+ return connection;
|
|
43
|
+ },
|
|
44
|
+ get numParticipants() {
|
|
45
|
+ return numParticipants;
|
|
46
|
+ },
|
|
47
|
+ get localTracks() {
|
|
48
|
+ return localTracks;
|
|
49
|
+ },
|
|
50
|
+ get remoteTracks() {
|
|
51
|
+ return remoteTracks;
|
|
52
|
+ },
|
|
53
|
+ get params() {
|
|
54
|
+ return {
|
|
55
|
+ roomName,
|
|
56
|
+ localAudio,
|
|
57
|
+ localVideo,
|
|
58
|
+ remoteVideo,
|
|
59
|
+ remoteAudio
|
|
60
|
+ };
|
|
61
|
+ }
|
|
62
|
+};
|
|
63
|
+
|
|
64
|
+/**
|
|
65
|
+ *
|
|
66
|
+ */
|
|
67
|
+function setNumberOfParticipants() {
|
|
68
|
+ $('#participants').text(numParticipants);
|
|
69
|
+}
|
|
70
|
+
|
|
71
|
+/**
|
|
72
|
+ * Handles local tracks.
|
|
73
|
+ * @param tracks Array with JitsiTrack objects
|
|
74
|
+ */
|
|
75
|
+function onLocalTracks(tracks = []) {
|
|
76
|
+ localTracks = tracks;
|
|
77
|
+ for (let i = 0; i < localTracks.length; i++) {
|
|
78
|
+ if (localTracks[i].getType() === 'video') {
|
|
79
|
+ $('body').append(`<video autoplay='1' id='localVideo${i}' />`);
|
|
80
|
+ localTracks[i].attach($(`#localVideo${i}`)[0]);
|
|
81
|
+ } else {
|
|
82
|
+ $('body').append(
|
|
83
|
+ `<audio autoplay='1' muted='true' id='localAudio${i}' />`);
|
|
84
|
+ localTracks[i].attach($(`#localAudio${i}`)[0]);
|
|
85
|
+ }
|
|
86
|
+ if (isJoined) {
|
|
87
|
+ room.addTrack(localTracks[i]);
|
|
88
|
+ }
|
|
89
|
+ }
|
|
90
|
+}
|
|
91
|
+
|
|
92
|
+/**
|
|
93
|
+ * Handles remote tracks
|
|
94
|
+ * @param track JitsiTrack object
|
|
95
|
+ */
|
|
96
|
+function onRemoteTrack(track) {
|
|
97
|
+ if (track.isLocal()
|
|
98
|
+ || (track.getType() === 'video' && !remoteVideo) || (track.getType() === 'audio' && !remoteAudio)) {
|
|
99
|
+ return;
|
|
100
|
+ }
|
|
101
|
+ const participant = track.getParticipantId();
|
|
102
|
+
|
|
103
|
+ if (!remoteTracks[participant]) {
|
|
104
|
+ remoteTracks[participant] = [];
|
|
105
|
+ }
|
|
106
|
+ const idx = remoteTracks[participant].push(track);
|
|
107
|
+ const id = participant + track.getType() + idx;
|
|
108
|
+
|
|
109
|
+ if (track.getType() === 'video') {
|
|
110
|
+ $('body').append(`<video autoplay='1' id='${id}' />`);
|
|
111
|
+ } else {
|
|
112
|
+ $('body').append(`<audio autoplay='1' id='${id}' />`);
|
|
113
|
+ }
|
|
114
|
+ track.attach($(`#${id}`)[0]);
|
|
115
|
+}
|
|
116
|
+
|
|
117
|
+/**
|
|
118
|
+ * That function is executed when the conference is joined
|
|
119
|
+ */
|
|
120
|
+function onConferenceJoined() {
|
|
121
|
+ isJoined = true;
|
|
122
|
+ for (let i = 0; i < localTracks.length; i++) {
|
|
123
|
+ room.addTrack(localTracks[i]);
|
|
124
|
+ }
|
|
125
|
+}
|
|
126
|
+
|
|
127
|
+/**
|
|
128
|
+ *
|
|
129
|
+ * @param id
|
|
130
|
+ */
|
|
131
|
+function onUserLeft(id) {
|
|
132
|
+ numParticipants--;
|
|
133
|
+ setNumberOfParticipants();
|
|
134
|
+ if (!remoteTracks[id]) {
|
|
135
|
+ return;
|
|
136
|
+ }
|
|
137
|
+ const tracks = remoteTracks[id];
|
|
138
|
+
|
|
139
|
+ for (let i = 0; i < tracks.length; i++) {
|
|
140
|
+ const container = $(`#${id}${tracks[i].getType()}${i + 1}`)[0];
|
|
141
|
+
|
|
142
|
+ if (container) {
|
|
143
|
+ tracks[i].detach(container);
|
|
144
|
+ container.parentElement.removeChild(container);
|
|
145
|
+ }
|
|
146
|
+ }
|
|
147
|
+}
|
|
148
|
+
|
|
149
|
+/**
|
|
150
|
+ * That function is called when connection is established successfully
|
|
151
|
+ */
|
|
152
|
+function onConnectionSuccess() {
|
|
153
|
+ room = connection.initJitsiConference(roomName, config);
|
|
154
|
+ room.on(JitsiMeetJS.events.conference.TRACK_ADDED, onRemoteTrack);
|
|
155
|
+ room.on(JitsiMeetJS.events.conference.CONFERENCE_JOINED, onConferenceJoined);
|
|
156
|
+ room.on(JitsiMeetJS.events.conference.USER_JOINED, id => {
|
|
157
|
+ numParticipants++;
|
|
158
|
+ setNumberOfParticipants();
|
|
159
|
+ remoteTracks[id] = [];
|
|
160
|
+ });
|
|
161
|
+ room.on(JitsiMeetJS.events.conference.USER_LEFT, onUserLeft);
|
|
162
|
+ room.join();
|
|
163
|
+}
|
|
164
|
+
|
|
165
|
+/**
|
|
166
|
+ * This function is called when the connection fail.
|
|
167
|
+ */
|
|
168
|
+function onConnectionFailed() {
|
|
169
|
+ console.error('Connection Failed!');
|
|
170
|
+}
|
|
171
|
+
|
|
172
|
+/**
|
|
173
|
+ * This function is called when we disconnect.
|
|
174
|
+ */
|
|
175
|
+function disconnect() {
|
|
176
|
+ console.log('disconnect!');
|
|
177
|
+ connection.removeEventListener(
|
|
178
|
+ JitsiMeetJS.events.connection.CONNECTION_ESTABLISHED,
|
|
179
|
+ onConnectionSuccess);
|
|
180
|
+ connection.removeEventListener(
|
|
181
|
+ JitsiMeetJS.events.connection.CONNECTION_FAILED,
|
|
182
|
+ onConnectionFailed);
|
|
183
|
+ connection.removeEventListener(
|
|
184
|
+ JitsiMeetJS.events.connection.CONNECTION_DISCONNECTED,
|
|
185
|
+ disconnect);
|
|
186
|
+}
|
|
187
|
+
|
|
188
|
+/**
|
|
189
|
+ *
|
|
190
|
+ */
|
|
191
|
+function unload() {
|
|
192
|
+ for (let i = 0; i < localTracks.length; i++) {
|
|
193
|
+ localTracks[i].dispose();
|
|
194
|
+ }
|
|
195
|
+ room.leave();
|
|
196
|
+ connection.disconnect();
|
|
197
|
+}
|
|
198
|
+
|
|
199
|
+$(window).bind('beforeunload', unload);
|
|
200
|
+$(window).bind('unload', unload);
|
|
201
|
+
|
|
202
|
+JitsiMeetJS.setLogLevel(JitsiMeetJS.logLevels.ERROR);
|
|
203
|
+
|
|
204
|
+JitsiMeetJS.init(config);
|
|
205
|
+
|
|
206
|
+connection = new JitsiMeetJS.JitsiConnection(null, null, config);
|
|
207
|
+connection.addEventListener(JitsiMeetJS.events.connection.CONNECTION_ESTABLISHED, onConnectionSuccess);
|
|
208
|
+connection.addEventListener(JitsiMeetJS.events.connection.CONNECTION_FAILED, onConnectionFailed);
|
|
209
|
+connection.addEventListener(JitsiMeetJS.events.connection.CONNECTION_DISCONNECTED, disconnect);
|
|
210
|
+connection.connect();
|
|
211
|
+
|
|
212
|
+const devices = [];
|
|
213
|
+
|
|
214
|
+if (localVideo) {
|
|
215
|
+ devices.push('video');
|
|
216
|
+}
|
|
217
|
+if (localAudio) {
|
|
218
|
+ devices.push('audio');
|
|
219
|
+}
|
|
220
|
+if (devices.length > 0) {
|
|
221
|
+ JitsiMeetJS.createLocalTracks({ devices })
|
|
222
|
+ .then(onLocalTracks)
|
|
223
|
+ .catch(error => {
|
|
224
|
+ throw error;
|
|
225
|
+ });
|
|
226
|
+}
|
|
227
|
+
|
|
228
|
+
|