質問編集履歴

3

ソースの追加

2019/10/23 04:57

投稿

koyaGX
koyaGX

スコア7

test CHANGED
File without changes
test CHANGED
@@ -556,6 +556,8 @@
556
556
 
557
557
  HTML JavaSript
558
558
 
559
+ [現在のソース](https://github.com/kouya1008/koya/blob/master/v_chat)
560
+
559
561
 
560
562
 
561
563
  ### 試したこと

2

ソースの変更

2019/10/23 04:57

投稿

koyaGX
koyaGX

スコア7

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,531 @@
1
+ ```HTML
2
+
3
+ <script>
4
+
5
+ function _assert(desc, v) {
6
+
7
+ if (v) {
8
+
9
+ return;
10
+
11
+ }
12
+
13
+ else {
14
+
15
+ let caller = _assert.caller || 'Top level';
16
+
17
+ console.error('ASSERT in %s, %s is :', caller, desc, v);
18
+
19
+ }
20
+
21
+ }
22
+
23
+ </script>
24
+
25
+ </head>
26
+
27
+ <body>
28
+
29
+ firebase signaling for multi-party (trickle ICE)<br />
30
+
31
+ <button type="button" onclick="startVideo();">Start Video</button>
32
+
33
+ <button type="button" onclick="stopVideo();">Stop Video</button>
34
+
35
+ &nbsp;
36
+
37
+ <button type="button" onclick="connect();">Connect</button>
38
+
39
+ <button type="button" onclick="hangUp();">Hang Up</button>
40
+
41
+ &nbsp;
42
+
43
+ <a id="room_link" href="" target="_blank">Open another window (link to this room)</a>
44
+
45
+ <a id="mail_link" href="" target="_blank">Mail link of this room</a>
46
+
47
+ <div>
48
+
49
+ <video id="local_video" autoplay style="width: 160px; height: 120px; border: 1px solid black;"></video>
50
+
51
+ </div>
52
+
53
+ <div id="container">
54
+
55
+ </div>
56
+
57
+ <!--
58
+
59
+ <p>SDP to send:<br />
60
+
61
+ <textarea id="text_for_send_sdp" rows="5" cols="60" readonly="readonly">SDP to send</textarea>
62
+
63
+ </p>
64
+
65
+ <p>SDP received:&nbsp;
66
+
67
+ <button type="button" onclick="onSdpText();">Receive remote SDP</button>
68
+
69
+ <br />
70
+
71
+ <textarea id="text_for_receive_sdp" rows="5" cols="60"></textarea>
72
+
73
+ </p>
74
+
75
+ -->
76
+
77
+ </body>
78
+
79
+ <script type="text/javascript">
80
+
81
+ let localVideo = document.getElementById('local_video');
82
+
83
+ //let remoteVideo = document.getElementById('remote_video');
84
+
85
+ let localStream = null;
86
+
87
+ //let peerConnection = null;
88
+
89
+ //let textForSendSdp = document.getElementById('text_for_send_sdp');
90
+
91
+ //let textToReceiveSdp = document.getElementById('text_for_receive_sdp');
92
+
93
+
94
+
95
+ // ---- for multi party -----
96
+
97
+ let peerConnections = [];
98
+
99
+ let remoteStreams = [];
100
+
101
+ let remoteVideos = [];
102
+
103
+ const MAX_CONNECTION_COUNT = 3;
104
+
105
+
106
+
107
+ // --- multi video ---
108
+
109
+ let container = document.getElementById('container');
110
+
111
+ _assert('container', container);
112
+
113
+
114
+
115
+ // --- prefix -----
116
+
117
+ navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
118
+
119
+ navigator.mozGetUserMedia || navigator.msGetUserMedia;
120
+
121
+ RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
122
+
123
+ RTCSessionDescription = window.RTCSessionDescription || window.webkitRTCSessionDescription || window.mozRTCSessionDescription;
124
+
125
+
126
+
127
+
128
+
129
+ /*---
130
+
131
+ // ----- use socket.io ---
132
+
133
+ let port = 3002;
134
+
135
+ let socket = io.connect('http://localhost:' + port + '/');
136
+
137
+ let room = getRoomName();
138
+
139
+ socket.on('connect', function(evt) {
140
+
141
+ console.log('socket.io connected. enter room=' + room );
142
+
143
+ socket.emit('enter', room);
144
+
145
+ });
146
+
147
+ socket.on('message', function(message) {
148
+
149
+ console.log('message:', message);
150
+
151
+ let fromId = message.from;
152
+
153
+
154
+
155
+ if (message.type === 'offer') {
156
+
157
+ // -- got offer ---
158
+
159
+ console.log('Received offer ...');
160
+
161
+ //let offer = message.sessionDescription;
162
+
163
+ let offer = new RTCSessionDescription(message);
164
+
165
+ setOffer(fromId, offer);
166
+
167
+ }
168
+
169
+ else if (message.type === 'answer') {
170
+
171
+ // --- got answer ---
172
+
173
+ console.log('Received answer ...');
174
+
175
+ //let answer = message.sessionDescription;
176
+
177
+ let answer = new RTCSessionDescription(message);
178
+
179
+ setAnswer(fromId, answer);
180
+
181
+ }
182
+
183
+ else if (message.type === 'candidate') {
184
+
185
+ // --- got ICE candidate ---
186
+
187
+ console.log('Received ICE candidate ...');
188
+
189
+ let candidate = new RTCIceCandidate(message.ice);
190
+
191
+ console.log(candidate);
192
+
193
+ addIceCandidate(fromId, candidate);
194
+
195
+ }
196
+
197
+ else if (message.type === 'call me') {
198
+
199
+ if (! isReadyToConnect()) {
200
+
201
+ console.log('Not ready to connect, so ignore');
202
+
203
+ return;
204
+
205
+ }
206
+
207
+ else if (! canConnectMore()) {
208
+
209
+ console.warn('TOO MANY connections, so ignore');
210
+
211
+ }
212
+
213
+
214
+
215
+ if (isConnectedWith(fromId)) {
216
+
217
+ // already connnected, so skip
218
+
219
+ console.log('already connected, so ignore');
220
+
221
+ }
222
+
223
+ else {
224
+
225
+ // connect new party
226
+
227
+ makeOffer(fromId);
228
+
229
+ }
230
+
231
+ }
232
+
233
+ else if (message.type === 'bye') {
234
+
235
+ if (isConnectedWith(fromId)) {
236
+
237
+ stopConnection(fromId);
238
+
239
+ }
240
+
241
+ }
242
+
243
+ });
244
+
245
+ socket.on('user disconnected', function(evt) {
246
+
247
+ console.log('====user disconnected==== evt:', evt);
248
+
249
+ let id = evt.id;
250
+
251
+ if (isConnectedWith(id)) {
252
+
253
+ stopConnection(id);
254
+
255
+ }
256
+
257
+ });
258
+
259
+ ---*/
260
+
261
+
262
+
263
+ // ----- use firebase.io ----
264
+
265
+ const dataDebugFlag = false;
266
+
267
+ let room = getRoomName();
268
+
269
+ // Initialize Firebase
270
+
271
+ let config = {
272
+
273
+ apiKey: "AIzaSyByIlgG450k2OlUr9QQhgCIdZudK_NJHb8", // <-- please set your API key
274
+
275
+ databaseURL: "https://test-1f1b0.firebaseio.com/", // <-- please set your database URL
276
+
277
+ };
278
+
279
+ let databaseRoot = ''; // <--- plaase set your database root for signaling
280
+
281
+ firebase.initializeApp(config);
282
+
283
+ let database = firebase.database();
284
+
285
+ let roomBroadcastRef;
286
+
287
+ let clientRef;
288
+
289
+ let clientId;
290
+
291
+
292
+
293
+ joinRoom(room);
294
+
295
+ setRoomLink(room);
296
+
297
+
298
+
299
+ function joinRoom(room) {
300
+
301
+ console.log('join room name = ' + room);
302
+
303
+
304
+
305
+ let key = database.ref(databaseRoot + room + '/_join_').push({ joined : 'unknown'}).key
306
+
307
+ clientId = 'member_' + key;
308
+
309
+ console.log('joined to room=' + room + ' as clientId=' + clientId);
310
+
311
+ database.ref(databaseRoot + room + '/_join_/' + key).update({ joined : clientId});
312
+
313
+
314
+
315
+
316
+
317
+ // remove join object
318
+
319
+ if (! dataDebugFlag) {
320
+
321
+ let jooinRef = database.ref(databaseRoot + room + '/_join_/' + key);
322
+
323
+ jooinRef.remove();
324
+
325
+ }
326
+
327
+
328
+
329
+ roomBroadcastRef = database.ref(databaseRoot + room + '/_broadcast_');
330
+
331
+ roomBroadcastRef.on('child_added', function(data) {
332
+
333
+ console.log('roomBroadcastRef.on(data) data.key=' + data.key + ', data.val():', data.val());
334
+
335
+ let message = data.val();
336
+
337
+ let fromId = message.from;
338
+
339
+ if (fromId === clientId) {
340
+
341
+ // ignore self message
342
+
343
+ return;
344
+
345
+ }
346
+
347
+
348
+
349
+ if (message.type === 'call me') {
350
+
351
+ if (! isReadyToConnect()) {
352
+
353
+ console.log('Not ready to connect, so ignore');
354
+
355
+ return;
356
+
357
+ }
358
+
359
+ else if (! canConnectMore()) {
360
+
361
+ console.warn('TOO MANY connections, so ignore');
362
+
363
+ }
364
+
365
+
366
+
367
+ if (isConnectedWith(fromId)) {
368
+
369
+ // already connnected, so skip
370
+
371
+ console.log('already connected, so ignore');
372
+
373
+ }
374
+
375
+ else {
376
+
377
+ // connect new party
378
+
379
+ makeOffer(fromId);
380
+
381
+ }
382
+
383
+ }
384
+
385
+ else if (message.type === 'bye') {
386
+
387
+ if (isConnectedWith(fromId)) {
388
+
389
+ stopConnection(fromId);
390
+
391
+ }
392
+
393
+ }
394
+
395
+ });
396
+
397
+
398
+
399
+ clientRef = database.ref(databaseRoot + room + '/_direct_/' + clientId);
400
+
401
+ clientRef.on('child_added', function(data) {
402
+
403
+ console.log('clientRef.on(data) data.key=' + data.key + ', data.val():', data.val());
404
+
405
+ let message = data.val();
406
+
407
+ let fromId = message.from;
408
+
409
+
410
+
411
+ if (message.type === 'offer') {
412
+
413
+ // -- got offer ---
414
+
415
+ console.log('Received offer ... fromId=' + fromId);
416
+
417
+ //let offer = message.sessionDescription;
418
+
419
+ let offer = new RTCSessionDescription(message);
420
+
421
+ setOffer(fromId, offer);
422
+
423
+ }
424
+
425
+ else if (message.type === 'answer') {
426
+
427
+ // --- got answer ---
428
+
429
+ console.log('Received answer ... fromId=' + fromId);
430
+
431
+ //let answer = message.sessionDescription;
432
+
433
+ let answer = new RTCSessionDescription(message);
434
+
435
+ setAnswer(fromId, answer);
436
+
437
+ }
438
+
439
+ else if (message.type === 'candidate') {
440
+
441
+ // --- got ICE candidate ---
442
+
443
+ console.log('Received ICE candidate ... fromId=' + fromId);
444
+
445
+ //let candidate = new RTCIceCandidate(message.ice);
446
+
447
+ let candidate = new RTCIceCandidate(JSON.parse(message.ice)); // <---- JSON
448
+
449
+ console.log(candidate);
450
+
451
+ addIceCandidate(fromId, candidate);
452
+
453
+ }
454
+
455
+
456
+
457
+ if (! dataDebugFlag) {
458
+
459
+ // remove direct message
460
+
461
+ let messageRef = database.ref(databaseRoot + room + '/_direct_/' + clientId + '/' + data.key);
462
+
463
+ messageRef.remove();
464
+
465
+ }
466
+
467
+ });
468
+
469
+ }
470
+
471
+
472
+
473
+ function setRoomLink(room) {
474
+
475
+ let url = document.location.href;
476
+
477
+ let anchorLink = document.getElementById('room_link');
478
+
479
+ anchorLink.href = url;
480
+
481
+ let anchorMail = document.getElementById('mail_link');
482
+
483
+ let mailtoUrl = 'mailto:?subject=invitation-of-multi-party-videochat&body=' + url;
484
+
485
+ anchorMail.href = mailtoUrl;
486
+
487
+ }
488
+
489
+ // ----- use firebase.io ---- //
490
+
491
+
492
+
493
+
494
+
495
+ // --- broadcast message to all members in room
496
+
497
+ function emitRoom(msg) {
498
+
499
+ //socket.emit('message', msg);
500
+
501
+ msg.from = clientId;
502
+
503
+ roomBroadcastRef.push(msg);
504
+
505
+ }
506
+
507
+
508
+
509
+ function emitTo(id, msg) {
510
+
511
+ //msg.sendto = id;
512
+
513
+ //socket.emit('message', msg);
514
+
515
+
516
+
517
+ console.log('===== sending from=' + clientId + ' , to=' + id);
518
+
519
+ msg.from = clientId;
520
+
521
+ database.ref(databaseRoot + room + '/_direct_/' + id).push(msg);
522
+
523
+ }
524
+
525
+
526
+
527
+ ``````
528
+
1
529
  ### 前提・実現したいこと
2
530
 
3
531
 
@@ -30,98 +558,6 @@
30
558
 
31
559
 
32
560
 
33
- データベースに関わる部分のプログラム
34
-
35
- // ----- use firebase.io ----
36
-
37
- const dataDebugFlag = false;
38
-
39
- let room = getRoomName();
40
-
41
- // Initialize Firebase
42
-
43
- let config = {
44
-
45
- apiKey: "AIzaSyByIlgG450k2OlUr9QQhgCIdZudK_NJHb8", // <-- please set your API key
46
-
47
- databaseURL: "https://test-1f1b0.firebaseio.com/", // <-- please set your database URL
48
-
49
- };
50
-
51
- let databaseRoot = ''; // <--- plaase set your database root for signaling
52
-
53
- firebase.initializeApp(config);
54
-
55
- let database = firebase.database();
56
-
57
- let roomBroadcastRef;
58
-
59
- let clientRef;
60
-
61
- let clientId;
62
-
63
-
64
-
65
- joinRoom(room);
66
-
67
- setRoomLink(room);
68
-
69
-
70
-
71
- function joinRoom(room) {
72
-
73
- console.log('join room name = ' + room);
74
-
75
-
76
-
77
- let key = database.ref(databaseRoot + room + '/_join_').push({ joined : 'unknown'}).key
78
-
79
- clientId = 'member_' + key;
80
-
81
- console.log('joined to room=' + room + ' as clientId=' + clientId);
82
-
83
- database.ref(databaseRoot + room + '/_join_/' + key).update({ joined : clientId});
84
-
85
-
86
-
87
-
88
-
89
- // remove join object
90
-
91
- if (! dataDebugFlag) {
92
-
93
- let jooinRef = database.ref(databaseRoot + room + '/_join_/' + key);
94
-
95
- jooinRef.remove();
96
-
97
- }
98
-
99
-
100
-
101
- roomBroadcastRef = database.ref(databaseRoot + room + '/_broadcast_');
102
-
103
- roomBroadcastRef.on('child_added', function(data) {
104
-
105
- console.log('roomBroadcastRef.on(data) data.key=' + data.key + ', data.val():', data.val());
106
-
107
- let message = data.val();
108
-
109
- let fromId = message.from;
110
-
111
- if (fromId === clientId) {
112
-
113
- // ignore self message
114
-
115
- return;
116
-
117
- }
118
-
119
-
120
-
121
-
122
-
123
-
124
-
125
561
  ### 試したこと
126
562
 
127
563
 

1

補足の追加

2019/10/22 08:18

投稿

koyaGX
koyaGX

スコア7

test CHANGED
File without changes
test CHANGED
@@ -135,3 +135,9 @@
135
135
 
136
136
 
137
137
  ### 補足情報(FW/ツールのバージョンなど)
138
+
139
+
140
+
141
+ 同じようなアプリを作っている、または作ったことがある方がいらっしゃいましたら、ぜひ情報交換させて頂きたいです。
142
+
143
+ こちらのコメントか、ツイッターにて連絡よろしくお願い致します。