質問編集履歴
3
ソースの追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -277,6 +277,7 @@
|
|
|
277
277
|
### 該当のソースコード
|
|
278
278
|
|
|
279
279
|
HTML JavaSript
|
|
280
|
+
[現在のソース](https://github.com/kouya1008/koya/blob/master/v_chat)
|
|
280
281
|
|
|
281
282
|
### 試したこと
|
|
282
283
|
|
2
ソースの変更
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,21 +1,135 @@
|
|
|
1
|
+
```HTML
|
|
1
|
-
|
|
2
|
+
<script>
|
|
3
|
+
function _assert(desc, v) {
|
|
4
|
+
if (v) {
|
|
5
|
+
return;
|
|
6
|
+
}
|
|
7
|
+
else {
|
|
8
|
+
let caller = _assert.caller || 'Top level';
|
|
9
|
+
console.error('ASSERT in %s, %s is :', caller, desc, v);
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
</script>
|
|
13
|
+
</head>
|
|
14
|
+
<body>
|
|
15
|
+
firebase signaling for multi-party (trickle ICE)<br />
|
|
16
|
+
<button type="button" onclick="startVideo();">Start Video</button>
|
|
17
|
+
<button type="button" onclick="stopVideo();">Stop Video</button>
|
|
18
|
+
|
|
19
|
+
<button type="button" onclick="connect();">Connect</button>
|
|
20
|
+
<button type="button" onclick="hangUp();">Hang Up</button>
|
|
21
|
+
|
|
22
|
+
<a id="room_link" href="" target="_blank">Open another window (link to this room)</a>
|
|
23
|
+
<a id="mail_link" href="" target="_blank">Mail link of this room</a>
|
|
24
|
+
<div>
|
|
25
|
+
<video id="local_video" autoplay style="width: 160px; height: 120px; border: 1px solid black;"></video>
|
|
26
|
+
</div>
|
|
27
|
+
<div id="container">
|
|
28
|
+
</div>
|
|
29
|
+
<!--
|
|
30
|
+
<p>SDP to send:<br />
|
|
31
|
+
<textarea id="text_for_send_sdp" rows="5" cols="60" readonly="readonly">SDP to send</textarea>
|
|
32
|
+
</p>
|
|
33
|
+
<p>SDP received:
|
|
34
|
+
<button type="button" onclick="onSdpText();">Receive remote SDP</button>
|
|
35
|
+
<br />
|
|
36
|
+
<textarea id="text_for_receive_sdp" rows="5" cols="60"></textarea>
|
|
37
|
+
</p>
|
|
38
|
+
-->
|
|
39
|
+
</body>
|
|
40
|
+
<script type="text/javascript">
|
|
41
|
+
let localVideo = document.getElementById('local_video');
|
|
42
|
+
//let remoteVideo = document.getElementById('remote_video');
|
|
43
|
+
let localStream = null;
|
|
44
|
+
//let peerConnection = null;
|
|
45
|
+
//let textForSendSdp = document.getElementById('text_for_send_sdp');
|
|
46
|
+
//let textToReceiveSdp = document.getElementById('text_for_receive_sdp');
|
|
2
47
|
|
|
3
|
-
firebaseというサービスのhosting機能とリアルタイムデータベースを用いて、webアプリを作成しています。
|
|
4
|
-
|
|
48
|
+
// ---- for multi party -----
|
|
49
|
+
let peerConnections = [];
|
|
50
|
+
let remoteStreams = [];
|
|
51
|
+
let remoteVideos = [];
|
|
52
|
+
const MAX_CONNECTION_COUNT = 3;
|
|
5
53
|
|
|
6
|
-
|
|
54
|
+
// --- multi video ---
|
|
55
|
+
let container = document.getElementById('container');
|
|
56
|
+
_assert('container', container);
|
|
7
57
|
|
|
8
|
-
|
|
58
|
+
// --- prefix -----
|
|
9
|
-
|
|
59
|
+
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
|
|
10
|
-
|
|
60
|
+
navigator.mozGetUserMedia || navigator.msGetUserMedia;
|
|
11
|
-
|
|
61
|
+
RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
|
|
62
|
+
RTCSessionDescription = window.RTCSessionDescription || window.webkitRTCSessionDescription || window.mozRTCSessionDescription;
|
|
12
63
|
|
|
13
|
-
### 該当のソースコード
|
|
14
64
|
|
|
65
|
+
/*---
|
|
66
|
+
// ----- use socket.io ---
|
|
15
|
-
|
|
67
|
+
let port = 3002;
|
|
68
|
+
let socket = io.connect('http://localhost:' + port + '/');
|
|
69
|
+
let room = getRoomName();
|
|
70
|
+
socket.on('connect', function(evt) {
|
|
71
|
+
console.log('socket.io connected. enter room=' + room );
|
|
72
|
+
socket.emit('enter', room);
|
|
73
|
+
});
|
|
74
|
+
socket.on('message', function(message) {
|
|
75
|
+
console.log('message:', message);
|
|
76
|
+
let fromId = message.from;
|
|
16
77
|
|
|
78
|
+
if (message.type === 'offer') {
|
|
79
|
+
// -- got offer ---
|
|
80
|
+
console.log('Received offer ...');
|
|
81
|
+
//let offer = message.sessionDescription;
|
|
82
|
+
let offer = new RTCSessionDescription(message);
|
|
83
|
+
setOffer(fromId, offer);
|
|
84
|
+
}
|
|
85
|
+
else if (message.type === 'answer') {
|
|
86
|
+
// --- got answer ---
|
|
87
|
+
console.log('Received answer ...');
|
|
88
|
+
//let answer = message.sessionDescription;
|
|
89
|
+
let answer = new RTCSessionDescription(message);
|
|
90
|
+
setAnswer(fromId, answer);
|
|
91
|
+
}
|
|
92
|
+
else if (message.type === 'candidate') {
|
|
93
|
+
// --- got ICE candidate ---
|
|
94
|
+
console.log('Received ICE candidate ...');
|
|
95
|
+
let candidate = new RTCIceCandidate(message.ice);
|
|
96
|
+
console.log(candidate);
|
|
97
|
+
addIceCandidate(fromId, candidate);
|
|
98
|
+
}
|
|
99
|
+
else if (message.type === 'call me') {
|
|
100
|
+
if (! isReadyToConnect()) {
|
|
101
|
+
console.log('Not ready to connect, so ignore');
|
|
102
|
+
return;
|
|
103
|
+
}
|
|
104
|
+
else if (! canConnectMore()) {
|
|
105
|
+
console.warn('TOO MANY connections, so ignore');
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
if (isConnectedWith(fromId)) {
|
|
109
|
+
// already connnected, so skip
|
|
110
|
+
console.log('already connected, so ignore');
|
|
111
|
+
}
|
|
112
|
+
else {
|
|
113
|
+
// connect new party
|
|
17
|
-
|
|
114
|
+
makeOffer(fromId);
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
else if (message.type === 'bye') {
|
|
118
|
+
if (isConnectedWith(fromId)) {
|
|
119
|
+
stopConnection(fromId);
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
});
|
|
123
|
+
socket.on('user disconnected', function(evt) {
|
|
124
|
+
console.log('====user disconnected==== evt:', evt);
|
|
125
|
+
let id = evt.id;
|
|
126
|
+
if (isConnectedWith(id)) {
|
|
127
|
+
stopConnection(id);
|
|
128
|
+
}
|
|
129
|
+
});
|
|
130
|
+
---*/
|
|
131
|
+
|
|
18
|
-
|
|
132
|
+
// ----- use firebase.io ----
|
|
19
133
|
const dataDebugFlag = false;
|
|
20
134
|
let room = getRoomName();
|
|
21
135
|
// Initialize Firebase
|
|
@@ -57,9 +171,113 @@
|
|
|
57
171
|
// ignore self message
|
|
58
172
|
return;
|
|
59
173
|
}
|
|
174
|
+
|
|
175
|
+
if (message.type === 'call me') {
|
|
176
|
+
if (! isReadyToConnect()) {
|
|
177
|
+
console.log('Not ready to connect, so ignore');
|
|
178
|
+
return;
|
|
179
|
+
}
|
|
180
|
+
else if (! canConnectMore()) {
|
|
181
|
+
console.warn('TOO MANY connections, so ignore');
|
|
182
|
+
}
|
|
60
183
|
|
|
184
|
+
if (isConnectedWith(fromId)) {
|
|
185
|
+
// already connnected, so skip
|
|
186
|
+
console.log('already connected, so ignore');
|
|
187
|
+
}
|
|
188
|
+
else {
|
|
189
|
+
// connect new party
|
|
190
|
+
makeOffer(fromId);
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
else if (message.type === 'bye') {
|
|
194
|
+
if (isConnectedWith(fromId)) {
|
|
195
|
+
stopConnection(fromId);
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
});
|
|
61
199
|
|
|
200
|
+
clientRef = database.ref(databaseRoot + room + '/_direct_/' + clientId);
|
|
201
|
+
clientRef.on('child_added', function(data) {
|
|
202
|
+
console.log('clientRef.on(data) data.key=' + data.key + ', data.val():', data.val());
|
|
203
|
+
let message = data.val();
|
|
204
|
+
let fromId = message.from;
|
|
62
205
|
|
|
206
|
+
if (message.type === 'offer') {
|
|
207
|
+
// -- got offer ---
|
|
208
|
+
console.log('Received offer ... fromId=' + fromId);
|
|
209
|
+
//let offer = message.sessionDescription;
|
|
210
|
+
let offer = new RTCSessionDescription(message);
|
|
211
|
+
setOffer(fromId, offer);
|
|
212
|
+
}
|
|
213
|
+
else if (message.type === 'answer') {
|
|
214
|
+
// --- got answer ---
|
|
215
|
+
console.log('Received answer ... fromId=' + fromId);
|
|
216
|
+
//let answer = message.sessionDescription;
|
|
217
|
+
let answer = new RTCSessionDescription(message);
|
|
218
|
+
setAnswer(fromId, answer);
|
|
219
|
+
}
|
|
220
|
+
else if (message.type === 'candidate') {
|
|
221
|
+
// --- got ICE candidate ---
|
|
222
|
+
console.log('Received ICE candidate ... fromId=' + fromId);
|
|
223
|
+
//let candidate = new RTCIceCandidate(message.ice);
|
|
224
|
+
let candidate = new RTCIceCandidate(JSON.parse(message.ice)); // <---- JSON
|
|
225
|
+
console.log(candidate);
|
|
226
|
+
addIceCandidate(fromId, candidate);
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
if (! dataDebugFlag) {
|
|
230
|
+
// remove direct message
|
|
231
|
+
let messageRef = database.ref(databaseRoot + room + '/_direct_/' + clientId + '/' + data.key);
|
|
232
|
+
messageRef.remove();
|
|
233
|
+
}
|
|
234
|
+
});
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
function setRoomLink(room) {
|
|
238
|
+
let url = document.location.href;
|
|
239
|
+
let anchorLink = document.getElementById('room_link');
|
|
240
|
+
anchorLink.href = url;
|
|
241
|
+
let anchorMail = document.getElementById('mail_link');
|
|
242
|
+
let mailtoUrl = 'mailto:?subject=invitation-of-multi-party-videochat&body=' + url;
|
|
243
|
+
anchorMail.href = mailtoUrl;
|
|
244
|
+
}
|
|
245
|
+
// ----- use firebase.io ---- //
|
|
246
|
+
|
|
247
|
+
|
|
248
|
+
// --- broadcast message to all members in room
|
|
249
|
+
function emitRoom(msg) {
|
|
250
|
+
//socket.emit('message', msg);
|
|
251
|
+
msg.from = clientId;
|
|
252
|
+
roomBroadcastRef.push(msg);
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
function emitTo(id, msg) {
|
|
256
|
+
//msg.sendto = id;
|
|
257
|
+
//socket.emit('message', msg);
|
|
258
|
+
|
|
259
|
+
console.log('===== sending from=' + clientId + ' , to=' + id);
|
|
260
|
+
msg.from = clientId;
|
|
261
|
+
database.ref(databaseRoot + room + '/_direct_/' + id).push(msg);
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
``````
|
|
265
|
+
### 前提・実現したいこと
|
|
266
|
+
|
|
267
|
+
firebaseというサービスのhosting機能とリアルタイムデータベースを用いて、webアプリを作成しています。
|
|
268
|
+
リアルタイムのチャットとビデオチャットを同一のサイト内で行えるようなアプリを作ることを目的としています。
|
|
269
|
+
|
|
270
|
+
### 発生している問題・エラーメッセージ
|
|
271
|
+
|
|
272
|
+
以前はnode.jsのsocket.ioを使用してローカルでのリアルタイムビデオチャットは作成できたのですが、firebaseのサービスを利用し始めてからはオンラインで成功したことがありません。
|
|
273
|
+
まずfirebaseにおいてコマンドプロンプトでinitというコマンドを実行したときにできるpublicフォルダ内のindex.htmlのプログラムの書き換えができなくて困っています。
|
|
274
|
+
また、プログラム内でデータベースへのパスをしてもデータベース内にツリーが表示されず、データベースに接続できません。
|
|
275
|
+
以上の問題が現在起こっています。
|
|
276
|
+
|
|
277
|
+
### 該当のソースコード
|
|
278
|
+
|
|
279
|
+
HTML JavaSript
|
|
280
|
+
|
|
63
281
|
### 試したこと
|
|
64
282
|
|
|
65
283
|
他のファイルの名前をindex.htmlに書き換え、public内に置いた→自動的に昔のindex内のプログラムに書き換わっていた
|
1
補足の追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -66,4 +66,7 @@
|
|
|
66
66
|
|
|
67
67
|
データベースに関してはわかりませんでした、、、
|
|
68
68
|
|
|
69
|
-
### 補足情報（FW/ツールのバージョンなど）
|
|
69
|
+
### 補足情報（FW/ツールのバージョンなど）
|
|
70
|
+
|
|
71
|
+
同じようなアプリを作っている、または作ったことがある方がいらっしゃいましたら、ぜひ情報交換させて頂きたいです。
|
|
72
|
+
こちらのコメントか、ツイッターにて連絡よろしくお願い致します。
|