-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathdatatracks.html
96 lines (82 loc) · 2.9 KB
/
datatracks.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<html>
<script>
function log(message) {
console.log(message);
const p = document.createElement('p');
p.innerText = message;;
document.body.appendChild(p);
}
async function main() {
const configuration = {
bundlePolicy: 'max-bundle',
rtcpMuxPolicy: 'require'
};
const options = {
offerToReceiveAudio: true,
offerToReceiveVideo: true
};
log('creating peer connections');
const {alice, bob} = createPeerConnections(configuration);
log('alice creates data channel.');
const dataChannel = alice.createDataChannel('test1');
dataChannel.onclose = () => log('Boo, data channel unexpectedly closed!');
dataChannel.onopen = () => log('Yay, data channel opened! ');
log('bob offers, and alice answers');
await negotiate(bob, alice, options);
// log('alice creates data channel.');
// const dataChannel = alice.createDataChannel('test1');
// dataChannel.onclose = () => log('Boo, data channel unexpectedly closed!');
// dataChannel.onopen = () => log('Yay, data channel opened! ');
log('Negotiation finished, lets do it again');
log('alice offers, bob answers');
await negotiate(alice, bob, options);
}
function createPeerConnections(configuration) {
const alice = new RTCPeerConnection(configuration);
const bob = new RTCPeerConnection(configuration);
[[alice, bob], [bob, alice]].forEach(([pc1, pc2]) => {
pc1.addEventListener('icecandidate', event => {
if (event.candidate) {
pc2.addIceCandidate(event.candidate);
}
});
});
alice.addEventListener('signalingstatechange', () => log(`alice:, ${alice.signalingState}`));
bob.addEventListener('signalingstatechange', () => log(`bob: ${bob.signalingState}`));
return {alice, bob};
}
function hasAppMediaSection(sdp, kind = 'application', direction) {
const sections = sdp.replace(/\r\n\r\n$/, '\r\n').split('\r\nm=').slice(1).map(mediaSection => `m=${mediaSection}`).filter(mediaSection => {
const kindPattern = new RegExp(`m=${kind || '.*'}`, 'gm');
const directionPattern = new RegExp(`a=${direction || '.*'}`, 'gm');
return kindPattern.test(mediaSection) && directionPattern.test(mediaSection);
});
return sections.length > 0 ? 'Yes' : 'No';
}
async function negotiate(offerer, answerer, options) {
const offer = await offerer.createOffer(options);
log(`Offer has App Media Section: ${hasAppMediaSection(offer.sdp)}`);
await Promise.all([
offerer.setLocalDescription(offer),
answerer.setRemoteDescription(offer)
]);
const answer = await answerer.createAnswer();
log(`Answer has App Media Section: ${hasAppMediaSection(answer.sdp)}`);
await Promise.all([
answerer.setLocalDescription(answer),
offerer.setRemoteDescription(answer)
]);
}
;
window.onload = function () {
log('onload');
document.getElementById('startBtn').onclick = main;
}
</script>
<body>
<p>
Start the demo:
<button id="startBtn">Start</button>
</p>
</body>
</html>