Skip to content

Commit 3966139

Browse files
fippofippo
committed
modularize shared code
1 parent c84f45c commit 3966139

File tree

3 files changed

+309
-303
lines changed

3 files changed

+309
-303
lines changed

‎import-common.js‎

Lines changed: 289 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,289 @@
1+
export function createContainers(connid, url, containers) {
2+
let el;
3+
const container = document.createElement('details');
4+
container.open = true;
5+
container.style.margin = '10px';
6+
7+
const summary = document.createElement('summary');
8+
summary.innerText = 'Connection:' + connid + ' URL: ' + url;
9+
container.appendChild(summary);
10+
11+
const configuration = document.createElement('div');
12+
container.appendChild(configuration);
13+
14+
// show state transitions, like in https://webrtc.github.io/samples/src/content/peerconnection/states
15+
const signalingState = document.createElement('div');
16+
signalingState.id = 'signalingstate_' + connid;
17+
signalingState.textContent = 'Signaling state:';
18+
container.appendChild(signalingState);
19+
const iceConnectionState = document.createElement('div');
20+
iceConnectionState.id = 'iceconnectionstate_' + connid;
21+
iceConnectionState.textContent = 'ICE connection state:';
22+
container.appendChild(iceConnectionState);
23+
24+
const connectionState = document.createElement('div');
25+
connectionState.id = 'connectionstate_' + connid;
26+
connectionState.textContent = 'Connection state:';
27+
container.appendChild(connectionState);
28+
29+
const candidates = document.createElement('table');
30+
candidates.className = 'candidatepairtable';
31+
container.appendChild(candidates);
32+
33+
const updateLog = document.createElement('table');
34+
const head = document.createElement('tr');
35+
updateLog.appendChild(head);
36+
37+
el = document.createElement('th');
38+
el.innerText = 'connection ' + connid;
39+
head.appendChild(el);
40+
41+
el = document.createElement('th');
42+
head.appendChild(el);
43+
44+
container.appendChild(updateLog);
45+
46+
const graphHeader = document.createElement('div');
47+
const graphs = document.createElement('div');
48+
49+
const label = document.createElement('label');
50+
label.innerText = 'Filter graphs by type including ';
51+
graphHeader.appendChild(label);
52+
const input = document.createElement('input');
53+
input.placeholder = 'separate multiple values by `,`';
54+
input.size = 25;
55+
input.oninput = (e) => filterStatsGraphs(e, graphs);
56+
graphHeader.appendChild(input);
57+
58+
container.appendChild(graphHeader);
59+
container.appendChild(graphs);
60+
61+
containers[connid] = {
62+
updateLog,
63+
iceConnectionState,
64+
connectionState,
65+
signalingState,
66+
candidates,
67+
url: summary,
68+
configuration,
69+
graphs,
70+
};
71+
72+
return container;
73+
}
74+
75+
export function createCandidateTable(allStats, parentElement) {
76+
const head = document.createElement('tr');
77+
[
78+
'Transport id',
79+
'Candidate pair id',
80+
'Candidate id',
81+
'', // local/remote, leave empty
82+
'type',
83+
'address',
84+
'port',
85+
'protocol',
86+
'priority / relayProtocol',
87+
'interface',
88+
'requestsSent / responsesReceived',
89+
'requestsReceived / responsesSent',
90+
].forEach((text) => {
91+
const el = document.createElement('td');
92+
el.innerText = text;
93+
head.appendChild(el);
94+
});
95+
parentElement.appendChild(head);
96+
97+
const transports = {};
98+
const pairs = {};
99+
const candidates = {};
100+
for (let reportname in allStats) {
101+
let t = reportname.split('-');
102+
const comp = t.pop();
103+
t = t.join('-');
104+
const statsType = allStats[reportname].statsType;
105+
const stats = JSON.parse(allStats[reportname].values);
106+
if (statsType === 'transport' || reportname.startsWith('RTCTransport')) {
107+
if (!transports[t]) transports[t] = {};
108+
switch(comp) {
109+
case 'bytesSent':
110+
case 'bytesReceived':
111+
case 'dtlsState':
112+
case 'selectedCandidatePairId':
113+
transports[t][comp] = stats[stats.length - 1];
114+
default:
115+
// console.log(reportname, comp, stats);
116+
}
117+
} else if (statsType === 'candidate-pair' || reportname.startsWith('RTCIceCandidatePair')) {
118+
if (!pairs[t]) pairs[t] = {};
119+
pairs[t][comp] = stats[stats.length - 1];
120+
} else if (['local-candidate', 'remote-candidate'].includes(statsType) || reportname.startsWith('RTCIceCandidate')) {
121+
if (!candidates[t]) candidates[t] = {};
122+
candidates[t][comp] = stats[stats.length - 1]
123+
}
124+
}
125+
for (let t in transports) {
126+
let row = document.createElement('tr');
127+
128+
let el = document.createElement('td');
129+
el.innerText = t;
130+
row.appendChild(el);
131+
132+
el = document.createElement('td');
133+
el.innerText = transports[t].selectedCandidatePairId || '(none)';
134+
row.appendChild(el);
135+
136+
for (let i = 2; i < head.childElementCount; i++) {
137+
el = document.createElement('td');
138+
row.appendChild(el);
139+
}
140+
141+
parentElement.appendChild(row);
142+
143+
for (let p in pairs) {
144+
if (pairs[p].transportId !== t) continue;
145+
const pair = pairs[p];
146+
row = document.createElement('tr');
147+
148+
row.appendChild(document.createElement('td'));
149+
150+
el = document.createElement('td');
151+
el.innerText = p;
152+
row.appendChild(el);
153+
154+
parentElement.appendChild(row);
155+
for (let i = 2; i < head.childElementCount; i++) {
156+
el = document.createElement('td');
157+
if (i === 8) {
158+
el.innerText = pair.priority;
159+
} else if (i === 10) {
160+
el.innerText = (pair.requestsSent + pair.consentRequestsSent) + ' / ' + pair.responsesReceived;
161+
if (pair.bytesSent) el.innerText += '\nPayload bytesSent=' + pair.bytesSent;
162+
} else if (i === 11) {
163+
el.innerText = pair.requestsReceived + ' / ' + pair.responsesSent;
164+
if (pair.bytesReceived) el.innerText += '\nPayload bytesReceived=' + pair.bytesReceived;
165+
}
166+
row.appendChild(el);
167+
}
168+
169+
for (let c in candidates) {
170+
if (!(c === pair.localCandidateId || c === pair.remoteCandidateId)) continue;
171+
const candidate = candidates[c];
172+
row = document.createElement('tr');
173+
174+
row.appendChild(document.createElement('td'));
175+
row.appendChild(document.createElement('td'));
176+
el = document.createElement('td');
177+
el.innerText = c;
178+
row.appendChild(el);
179+
180+
el = document.createElement('td');
181+
el.innerText = candidate.isRemote ? 'remote' : 'local';
182+
row.appendChild(el);
183+
184+
el = document.createElement('td');
185+
el.innerText = candidate.candidateType;
186+
row.appendChild(el);
187+
188+
el = document.createElement('td');
189+
el.innerText = candidate.address || candidate.ip;
190+
row.appendChild(el);
191+
192+
el = document.createElement('td');
193+
el.innerText = candidate.port;
194+
row.appendChild(el);
195+
196+
el = document.createElement('td');
197+
el.innerText = candidate.protocol;
198+
row.appendChild(el);
199+
200+
el = document.createElement('td');
201+
el.innerText = candidate.priority;
202+
if (candidate.relayProtocol) {
203+
el.innerText += ' ' + candidate.relayProtocol;
204+
}
205+
row.appendChild(el);
206+
207+
el = document.createElement('td');
208+
el.innerText = candidate.networkType || 'unknown';
209+
row.appendChild(el);
210+
211+
row.appendChild(document.createElement('td'));
212+
row.appendChild(document.createElement('td'));
213+
214+
parentElement.appendChild(row);
215+
}
216+
}
217+
}
218+
}
219+
220+
export function processGetUserMedia(data, parentElement) {
221+
const container = document.createElement('details');
222+
container.open = true;
223+
container.style.margin = '10px';
224+
225+
const summary = document.createElement('summary');
226+
summary.innerText = 'getUserMedia calls (' + (data.length / 2)+ ')';
227+
container.appendChild(summary);
228+
229+
const table = document.createElement('table');
230+
const head = document.createElement('tr');
231+
table.appendChild(head);
232+
233+
container.appendChild(table);
234+
235+
const columns = ['request_type', 'origin', 'pid', 'rid',
236+
'audio', 'video', 'audio_track_info', 'video_track_info',
237+
'error', 'error_message'];
238+
const displayNames = {
239+
request_id: 'id',
240+
reqest_type: 'type',
241+
audio: 'audio constraints',
242+
video: 'video constraints',
243+
audio_track_info: 'audio track',
244+
video_track_info: 'video track',
245+
error_message: 'error message',
246+
};
247+
columns.forEach(name => {
248+
let el;
249+
el = document.createElement('th');
250+
el.innerText = displayNames[name] || name;
251+
head.appendChild(el);
252+
});
253+
254+
parentElement.appendChild(container);
255+
data.forEach(event => {
256+
const id = ['gum-row', event.pid, event.rid, event.request_id].join('-');
257+
if (!event.origin) {
258+
// Not a getUserMedia call but a response, update the row with the request.
259+
const existingRow = document.getElementById(id);
260+
if (event.error) {
261+
existingRow.childNodes[8].innerText = event.error;
262+
existingRow.childNodes[9].innerText = event.error_message;
263+
return;
264+
}
265+
if (event.audio_track_info) {
266+
existingRow.childNodes[6].innerText = event.audio_track_info;
267+
}
268+
if (event.video_track_info) {
269+
existingRow.childNodes[7].innerText = event.video_track_info;
270+
}
271+
return;
272+
}
273+
// Add a new row for the getUserMedia request.
274+
const row = document.createElement('tr');
275+
row.id = id;
276+
columns.forEach(attribute => {
277+
const cell = document.createElement('td');
278+
const el = document.createElement('pre');
279+
if (['audio', 'video'].includes(attribute)) {
280+
el.innerText = event.hasOwnProperty(attribute) ? (event[attribute] || 'true') : 'not set';
281+
} else {
282+
el.innerText = event.hasOwnProperty(attribute) ? event[attribute] : '';
283+
}
284+
cell.appendChild(el);
285+
row.appendChild(cell);
286+
});
287+
table.appendChild(row);
288+
});
289+
}

0 commit comments

Comments
 (0)