4 <title>Web Data Channel Client</title>
7 <script src="openteraWebrtcWebClient.js"></script>
11 <h1>Web Data Channel Client</h1>
14 <input id="name_input" type="text"></input>
17 <input id="password_input" type="text" value="abc"></input>
19 <h4>Signaling Server Connection: </h4>
20 <button id="connect_button" type="button">Connect</button>
21 <button id="close_button" type="button">Close</button>
24 <ul id="client_list"></ul>
27 <button id="call_all_button" type="button">Call All</button>
28 <button id="hang_up_all_button" type="button">Hang Up All</button>
29 <button id="close_all_room_peer_connections" type="button">Close All Room Peer Connections</button>
32 <input id="id_input" type="text"></input>
33 <button id="call_one_button" type="button">Call</button>
36 <input id="text_input" type="text"></input>
37 <button id="send_button" type="button">Send</button><br><br>
38 <textarea id="chat_text_area" rows="10" cols="50" readonly></textarea>
42 <script src="client.js"></script>
2 let nameInput = document.getElementById(
'name_input');
3 let passwordInput = document.getElementById(
'password_input');
4 let connectButton = document.getElementById(
'connect_button');
5 let closeButton = document.getElementById(
'close_button');
6 let clientList = document.getElementById(
'client_list');
7 let callAllButton = document.getElementById(
'call_all_button');
8 let hangUpAllButton = document.getElementById(
'hang_up_all_button');
9 let closeAllRoomPeerConnectionsButton = document.getElementById(
'close_all_room_peer_connections');
10 let idInput = document.getElementById(
'id_input');
11 let callOneButton = document.getElementById(
'call_one_button');
12 let textInput = document.getElementById(
'text_input');
13 let sendButton = document.getElementById(
'send_button');
14 let chatTextArea = document.getElementById(
'chat_text_area');
16 closeButton.disabled =
true;
17 callAllButton.disabled =
true;
18 hangUpAllButton.disabled =
true;
19 closeAllRoomPeerConnectionsButton.disabled =
true;
20 callOneButton.disabled =
true;
21 sendButton.disabled =
true;
22 chatTextArea.value =
'';
24 let dataChannelClient =
null;
26 function connectDataChannelClientEvents() {
27 dataChannelClient.onSignalingConnectionOpen = () => {
28 connectButton.disabled =
true;
29 closeButton.disabled =
false;
31 dataChannelClient.onSignalingConnectionClose = async () => {
32 connectButton.disabled =
false;
33 closeButton.disabled =
true;
34 callAllButton.disabled =
true;
35 hangUpAllButton.disabled =
true;
36 closeAllRoomPeerConnectionsButton.disabled =
true;
37 callOneButton.disabled =
true;
39 dataChannelClient.onSignalingConnectionError = message => {
42 dataChannelClient.onRoomClientsChange = clients => {
43 callAllButton.disabled = !(clients.length > 1 && hangUpAllButton.disabled);
44 callOneButton.disabled = callAllButton.disabled;
46 clientList.innerHTML =
'';
47 clients.forEach(client => {
48 let li = document.createElement(
'li');
49 li.textContent = client.id +
' - ' + client.name;
50 li.style.color = client.isConnected ?
'green' :
'red';
51 clientList.appendChild(li);
55 dataChannelClient.callAcceptor = async (
id, name, clientData) => {
56 return confirm(
'Do you accept the call from ' + name +
'?');
59 dataChannelClient.onCallReject = (id, name, clientData) => {
60 alert(
'The call is rejected (' + name +
')');
63 dataChannelClient.onClientConnectionFail = (id, name, clientData) => {
64 console.log(
'The connect with the client ' + name +
'(' +
id +
') failed.');
67 dataChannelClient.onDataChannelOpen = (id, name, clientData) => {
68 sendButton.disabled =
false;
69 callAllButton.disabled =
true;
70 hangUpAllButton.disabled =
false;
71 closeAllRoomPeerConnectionsButton.disabled =
false;
72 callOneButton.disabled =
true;
74 dataChannelClient.onDataChannelClose = (id, name, clientData) => {
75 sendButton.disabled = !dataChannelClient.isRtcConnected;
76 callAllButton.disabled = dataChannelClient.isRtcConnected;
77 hangUpAllButton.disabled = !dataChannelClient.isRtcConnected;
78 closeAllRoomPeerConnectionsButton.disabled = !dataChannelClient.isRtcConnected;
79 callOneButton.disabled = dataChannelClient.isRtcConnected;
81 dataChannelClient.onDataChannelMessage = (id, name, clientData, message) => {
82 chatTextArea.value +=
id +
' - ' + name +
': ';
83 chatTextArea.value += message;
84 chatTextArea.value +=
'\n';
89 connectButton.onclick = async () => {
90 const SignalingServerConfiguration = {
91 url:
'ws://localhost:8080/signaling',
92 name: nameInput.value,
95 password: passwordInput.value
97 const DataChannelConfiguration = {};
98 const RtcConfiguration = {
99 iceServers: await window.openteraWebrtcWebClient.iceServers.fetchFromServer(
'http://localhost:8080/iceservers', passwordInput.value)
101 let logger = (...args) => console.log(...args);
103 dataChannelClient =
new window.openteraWebrtcWebClient.DataChannelClient(SignalingServerConfiguration,
104 DataChannelConfiguration, RtcConfiguration, logger);
105 connectDataChannelClientEvents();
107 await dataChannelClient.connect();
109 closeButton.onclick = () => {
110 dataChannelClient.close();
111 clientList.innerHTML =
'';
113 callAllButton.onclick = () => dataChannelClient.callAll();
114 hangUpAllButton.onclick = () => dataChannelClient.hangUpAll();
115 closeAllRoomPeerConnectionsButton.onclick = () => dataChannelClient.closeAllRoomPeerConnections();
116 callOneButton.onclick = () => dataChannelClient.callIds([idInput.value]);
117 sendButton.onclick = () => {
118 chatTextArea.value +=
'Me: ';
119 chatTextArea.value += textInput.value;
120 chatTextArea.value +=
'\n';
122 dataChannelClient.sendToAll(textInput.value)
4 <title>Stream Client</title>
7 <script src="openteraWebrtcWebClient.js"></script>
11 <h1>Stream Client</h1>
14 <video id="local_video" muted></video>
16 <button id="mute_audio_button" type="button">Mute Audio</button>
17 <button id="unmute_audio_button" type="button">Unmute Audio</button>
18 <button id="mute_video_button" type="button">Mute Video</button>
19 <button id="unmute_video_button" type="button">Unmute Video</button>
21 <h2>Remove Stream</h2>
23 <input id="name_input" type="text"></input>
26 <input id="password_input" type="text" value="abc"></input>
28 <h4>Signaling Server Connection: </h4>
29 <button id="connect_button" type="button">Connect</button>
30 <button id="close_button" type="button">Close</button>
33 <ul id="client_list"></ul>
36 <button id="call_all_button" type="button">Call All</button>
37 <button id="hang_up_all_button" type="button">Hang Up All</button>
38 <button id="close_all_room_peer_connections" type="button">Close All Room Peer Connections</button>
41 <input id="id_input" type="text"></input>
42 <button id="call_one_button" type="button">Call</button>
44 <div id="remote_videos"></div>
46 <script src="client.js"></script>
2 let localVideo = document.getElementById(
'local_video');
3 let muteAudioButton = document.getElementById(
'mute_audio_button');
4 let unmuteAudioButton = document.getElementById(
'unmute_audio_button');
5 let muteVideoButton = document.getElementById(
'mute_video_button');
6 let unmuteVideoButton = document.getElementById(
'unmute_video_button');
7 let nameInput = document.getElementById(
'name_input');
8 let passwordInput = document.getElementById(
'password_input');
9 let connectButton = document.getElementById(
'connect_button');
10 let closeButton = document.getElementById(
'close_button');
11 let clientList = document.getElementById(
'client_list');
12 let callAllButton = document.getElementById(
'call_all_button');
13 let hangUpAllButton = document.getElementById(
'hang_up_all_button');
14 let closeAllRoomPeerConnectionsButton = document.getElementById(
'close_all_room_peer_connections');
15 let idInput = document.getElementById(
'id_input');
16 let callOneButton = document.getElementById(
'call_one_button');
17 let remoteVideos = document.getElementById(
'remote_videos');
19 muteAudioButton.disabled =
true;
20 unmuteAudioButton.disabled =
true;
21 muteVideoButton.disabled =
true;
22 unmuteVideoButton.disabled =
true;
23 closeButton.disabled =
true;
24 callAllButton.disabled =
true;
25 hangUpAllButton.disabled =
true;
26 closeAllRoomPeerConnectionsButton.disabled =
true;
27 callOneButton.disabled =
true;
29 let streamClient =
null;
31 window.openteraWebrtcWebClient.devices.getDefaultStream().then(stream => {
32 localVideo.srcObject = stream;
33 localVideo.autoplay =
true;
36 function connectStreamClientEvents() {
37 streamClient.onSignalingConnectionOpen = () => {
38 connectButton.disabled =
true;
39 closeButton.disabled =
false;
41 streamClient.onSignalingConnectionClose = async () => {
42 connectButton.disabled =
false;
43 closeButton.disabled =
true;
44 callAllButton.disabled =
true;
45 hangUpAllButton.disabled =
true;
46 closeAllRoomPeerConnectionsButton.disabled =
true;
47 callOneButton.disabled =
true;
49 streamClient.onSignalingConnectionError = message => {
52 streamClient.onRoomClientsChange = clients => {
53 callAllButton.disabled = !(clients.length > 1 && hangUpAllButton.disabled);
54 callOneButton.disabled = callAllButton.disabled;
56 clientList.innerHTML =
'';
57 clients.forEach(client => {
58 let li = document.createElement(
'li');
59 li.textContent = client.id +
' - ' + client.name;
60 li.style.color = client.isConnected ?
'green' :
'red';
61 clientList.appendChild(li);
65 streamClient.onClientConnectionFail = (id, name, clientData) => {
66 console.log(
'The connect with the client ' + name +
'(' +
id +
') failed.');
69 streamClient.onAddRemoteStream = (id, name, clientData, stream) => {
70 callAllButton.disabled =
true;
71 hangUpAllButton.disabled =
false;
72 closeAllRoomPeerConnectionsButton.disabled =
false;
73 callOneButton.disabled =
true;
75 let h5 = document.createElement(
"h5");;
76 h5.innerHTML =
id +
' - ' + name;
79 let video = document.createElement(
"video");
80 video.srcObject = stream;
81 video.id =
'video' + id;
82 video.autoplay =
true;
84 remoteVideos.appendChild(h5);
85 remoteVideos.appendChild(video);
87 streamClient.onClientDisconnect = (id, name, clientData) => {
88 callAllButton.disabled = streamClient.isRtcConnected;
89 hangUpAllButton.disabled = !streamClient.isRtcConnected;
90 closeAllRoomPeerConnectionsButton.disabled = !streamClient.isRtcConnected;
91 callOneButton.disabled = streamClient.isRtcConnected;
93 remoteVideos.removeChild(document.getElementById(
'h5' +
id));
94 remoteVideos.removeChild(document.getElementById(
'video' +
id));
98 function updateMuteButtons() {
99 muteAudioButton.disabled = streamClient.isLocalAudioMuted;
100 unmuteAudioButton.disabled = !streamClient.isLocalAudioMuted;
101 muteVideoButton.disabled = streamClient.isLocalVideoMuted;
102 unmuteVideoButton.disabled = !streamClient.isLocalVideoMuted;
105 muteAudioButton.onclick = () => {
106 streamClient.muteLocalAudio();
109 unmuteAudioButton.onclick = () => {
110 streamClient.unmuteLocalAudio();
113 muteVideoButton.onclick = () => {
114 streamClient.muteLocalVideo();
117 unmuteVideoButton.onclick = () => {
118 streamClient.unmuteLocalVideo();
121 connectButton.onclick = async () => {
122 const SignalingServerConfiguration = {
123 url:
'ws://localhost:8080/signaling',
124 name: nameInput.value,
127 password: passwordInput.value
129 const StreamConfiguration = {
130 localStream: localVideo.srcObject,
133 const RtcConfiguration = {
134 iceServers: await window.openteraWebrtcWebClient.iceServers.fetchFromServer(
'http://localhost:8080/iceservers', passwordInput.value)
136 let logger = (...args) => console.log(...args);
138 streamClient =
new window.openteraWebrtcWebClient.StreamClient(SignalingServerConfiguration,
139 StreamConfiguration, RtcConfiguration, logger);
140 connectStreamClientEvents();
142 await streamClient.connect();
145 closeButton.onclick = () => {
146 streamClient.close();
147 clientList.innerHTML =
'';
148 remoteVideos.innerHTML =
'';
150 callAllButton.onclick = () => streamClient.callAll();
151 hangUpAllButton.onclick = () => streamClient.hangUpAll();
152 closeAllRoomPeerConnectionsButton.onclick = () => streamClient.closeAllRoomPeerConnections();
153 callOneButton.onclick = () => streamClient.callIds([idInput.value]);
4 <title>Stream Client</title>
7 <script src="openteraWebrtcWebClient.js"></script>
11 <h1>Stream Client</h1>
14 <video id="local_video" muted></video>
16 <button id="mute_audio_button" type="button">Mute Audio</button>
17 <button id="unmute_audio_button" type="button">Unmute Audio</button>
18 <button id="mute_video_button" type="button">Mute Video</button>
19 <button id="unmute_video_button" type="button">Unmute Video</button>
21 <h2>Remove Stream and Messages</h2>
23 <input id="name_input" type="text"></input>
26 <input id="password_input" type="text" value="abc"></input>
28 <h4>Signaling Server Connection: </h4>
29 <button id="connect_button" type="button">Connect</button>
30 <button id="close_button" type="button">Close</button>
33 <ul id="client_list"></ul>
36 <button id="call_all_button" type="button">Call All</button>
37 <button id="hang_up_all_button" type="button">Hang Up All</button>
38 <button id="close_all_room_peer_connections" type="button">Close All Room Peer Connections</button>
41 <input id="id_input" type="text"></input>
42 <button id="call_one_button" type="button">Call</button>
45 <input id="text_input" type="text"></input>
46 <button id="send_button" type="button">Send</button><br><br>
47 <textarea id="chat_text_area" rows="10" cols="50" readonly></textarea>
49 <h4>Remote Stream: </h4>
50 <div id="remote_videos"></div>
52 <script src="client.js"></script>
2 let localVideo = document.getElementById(
'local_video');
3 let muteAudioButton = document.getElementById(
'mute_audio_button');
4 let unmuteAudioButton = document.getElementById(
'unmute_audio_button');
5 let muteVideoButton = document.getElementById(
'mute_video_button');
6 let unmuteVideoButton = document.getElementById(
'unmute_video_button');
7 let nameInput = document.getElementById(
'name_input');
8 let passwordInput = document.getElementById(
'password_input');
9 let connectButton = document.getElementById(
'connect_button');
10 let closeButton = document.getElementById(
'close_button');
11 let clientList = document.getElementById(
'client_list');
12 let callAllButton = document.getElementById(
'call_all_button');
13 let hangUpAllButton = document.getElementById(
'hang_up_all_button');
14 let closeAllRoomPeerConnectionsButton = document.getElementById(
'close_all_room_peer_connections');
15 let idInput = document.getElementById(
'id_input');
16 let callOneButton = document.getElementById(
'call_one_button');
17 let textInput = document.getElementById(
'text_input');
18 let sendButton = document.getElementById(
'send_button');
19 let chatTextArea = document.getElementById(
'chat_text_area');
20 let remoteVideos = document.getElementById(
'remote_videos');
22 muteAudioButton.disabled =
true;
23 unmuteAudioButton.disabled =
true;
24 muteVideoButton.disabled =
true;
25 unmuteVideoButton.disabled =
true;
26 closeButton.disabled =
true;
27 callAllButton.disabled =
true;
28 hangUpAllButton.disabled =
true;
29 closeAllRoomPeerConnectionsButton.disabled =
true;
30 callOneButton.disabled =
true;
31 sendButton.disabled =
true;
33 let streamDataChannelClient =
null;
35 window.openteraWebrtcWebClient.devices.getDefaultStream().then(stream => {
36 localVideo.srcObject = stream;
37 localVideo.autoplay =
true;
40 function connectStreamClientEvents() {
41 streamDataChannelClient.onSignalingConnectionOpen = () => {
42 connectButton.disabled =
true;
43 closeButton.disabled =
false;
45 streamDataChannelClient.onSignalingConnectionClose = async () => {
46 connectButton.disabled =
false;
47 closeButton.disabled =
true;
48 callAllButton.disabled =
true;
49 hangUpAllButton.disabled =
true;
50 closeAllRoomPeerConnectionsButton.disabled =
true;
51 callOneButton.disabled =
true;
53 streamDataChannelClient.onSignalingConnectionError = message => {
56 streamDataChannelClient.onRoomClientsChange = clients => {
57 callAllButton.disabled = !(clients.length > 1 && hangUpAllButton.disabled);
58 callOneButton.disabled = callAllButton.disabled;
60 clientList.innerHTML =
'';
61 clients.forEach(client => {
62 let li = document.createElement(
'li');
63 li.textContent = client.id +
' - ' + client.name;
64 li.style.color = client.isConnected ?
'green' :
'red';
65 clientList.appendChild(li);
69 streamDataChannelClient.onClientConnectionFail = (id, name, clientData) => {
70 console.log(
'The connect with the client ' + name +
'(' +
id +
') failed.');
73 streamDataChannelClient.onAddRemoteStream = (id, name, clientData, stream) => {
74 sendButton.disabled =
false;
75 callAllButton.disabled =
true;
76 hangUpAllButton.disabled =
false;
77 closeAllRoomPeerConnectionsButton.disabled =
false;
78 callOneButton.disabled =
true;
80 let h5 = document.createElement(
"h5");;
81 h5.innerHTML =
id +
' - ' + name;
84 let video = document.createElement(
"video");
85 video.srcObject = stream;
86 video.id =
'video' + id;
87 video.autoplay =
true;
89 remoteVideos.appendChild(h5);
90 remoteVideos.appendChild(video);
92 let onClientDisconnect = (id, name, clientData) => {
93 sendButton.disabled = !streamDataChannelClient.isRtcConnected;
94 callAllButton.disabled = streamDataChannelClient.isRtcConnected;
95 hangUpAllButton.disabled = !streamDataChannelClient.isRtcConnected;
96 closeAllRoomPeerConnectionsButton.disabled = !streamDataChannelClient.isRtcConnected;
97 callOneButton.disabled = streamDataChannelClient.isRtcConnected;
99 let h5 = document.getElementById(
'h5' +
id);
100 let video = document.getElementById(
'video' +
id);
102 remoteVideos.removeChild(document.getElementById(
'h5' +
id));
104 if (video !==
null) {
105 remoteVideos.removeChild(document.getElementById(
'video' +
id));
108 streamDataChannelClient.onClientDisconnect = onClientDisconnect;
110 streamDataChannelClient.onDataChannelOpen = (id, name, clientData) => {
111 sendButton.disabled =
false;
112 callAllButton.disabled =
true;
113 hangUpAllButton.disabled =
false;
114 closeAllRoomPeerConnectionsButton.disabled =
false;
115 callOneButton.disabled =
true;
117 streamDataChannelClient.onDataChannelClose = onClientDisconnect;
118 streamDataChannelClient.onDataChannelMessage = (id, name, clientData, message) => {
119 chatTextArea.value +=
id +
' - ' + name +
': ';
120 chatTextArea.value += message;
121 chatTextArea.value +=
'\n';
125 function updateMuteButtons() {
126 muteAudioButton.disabled = streamDataChannelClient.isLocalAudioMuted;
127 unmuteAudioButton.disabled = !streamDataChannelClient.isLocalAudioMuted;
128 muteVideoButton.disabled = streamDataChannelClient.isLocalVideoMuted;
129 unmuteVideoButton.disabled = !streamDataChannelClient.isLocalVideoMuted;
132 muteAudioButton.onclick = () => {
133 streamDataChannelClient.muteLocalAudio();
136 unmuteAudioButton.onclick = () => {
137 streamDataChannelClient.unmuteLocalAudio();
140 muteVideoButton.onclick = () => {
141 streamDataChannelClient.muteLocalVideo();
144 unmuteVideoButton.onclick = () => {
145 streamDataChannelClient.unmuteLocalVideo();
148 connectButton.onclick = async () => {
149 const SignalingServerConfiguration = {
150 url:
'ws://localhost:8080/signaling',
151 name: nameInput.value,
154 password: passwordInput.value
156 const StreamConfiguration = {
157 localStream: localVideo.srcObject,
160 const DataChannelConfiguration = {};
161 const RtcConfiguration = {
162 iceServers: await window.openteraWebrtcWebClient.iceServers.fetchFromServer(
'http://localhost:8080/iceservers', passwordInput.value)
164 let logger = (...args) => console.log(...args);
166 streamDataChannelClient =
new window.openteraWebrtcWebClient.StreamDataChannelClient(SignalingServerConfiguration,
167 StreamConfiguration, DataChannelConfiguration, RtcConfiguration, logger);
168 connectStreamClientEvents();
170 await streamDataChannelClient.connect();
173 closeButton.onclick = () => {
174 streamDataChannelClient.close();
175 clientList.innerHTML =
'';
176 remoteVideos.innerHTML =
'';
178 callAllButton.onclick = () => streamDataChannelClient.callAll();
179 hangUpAllButton.onclick = () => streamDataChannelClient.hangUpAll();
180 closeAllRoomPeerConnectionsButton.onclick = () => streamDataChannelClient.closeAllRoomPeerConnections();
181 callOneButton.onclick = () => streamDataChannelClient.callIds([idInput.value]);
182 sendButton.onclick = () => {
183 chatTextArea.value +=
'Me: ';
184 chatTextArea.value += textInput.value;
185 chatTextArea.value +=
'\n';
187 streamDataChannelClient.sendToAll(textInput.value)