|
1 | 1 | document.addEventListener('DOMContentLoaded', init)
|
2 | 2 |
|
3 |
| -function init() { |
4 |
| - var PeerConnection = window.RTCPeerConnection |
5 |
| - || window.webkitRTCPeerConnection |
| 3 | +async function init() { |
| 4 | + document.getElementById('initiate') |
| 5 | + .addEventListener('click', initiate) |
6 | 6 |
|
7 |
| - // For local IP addresses |
8 |
| - var ice = null |
| 7 | + document.getElementById('receive') |
| 8 | + .addEventListener('click', receive) |
9 | 9 |
|
10 |
| - // For finding the public IP address |
11 |
| - // var ice = {"iceServers": [ |
12 |
| - // {"url": "stun:stun.l.google.com:19302"}, |
13 |
| - // ]}; |
14 |
| - |
15 |
| - var pc = new PeerConnection(ice) |
| 10 | + document.getElementById('accept') |
| 11 | + .addEventListener('click', accept) |
| 12 | +} |
16 | 13 |
|
17 |
| - pc.onaddstream = function() { |
18 |
| - console.log('new data stream?') |
19 |
| - } |
| 14 | +const pc = new RTCPeerConnection() |
20 | 15 |
|
21 |
| - pc.ondatachannel = function() { |
22 |
| - console.log('got data channel') |
23 |
| - } |
| 16 | +pc.ondatachannel = (ev) => { |
| 17 | + console.log('got data channel') |
| 18 | +} |
24 | 19 |
|
25 |
| - pc.onicecandidate = function(ev) { |
26 |
| - if (ev.candidate != null) |
27 |
| - remotepc.addIceCandidate(ev.candidate) |
28 |
| - } |
| 20 | +pc.onicecandidate = (ev) => { |
| 21 | + console.log('ice candidate', ev) |
| 22 | + pc.addIceCandidate(ev.candidate) |
| 23 | +} |
29 | 24 |
|
30 |
| - pc.oniceconnectionstatechange = function(ev) { |
31 |
| - console.log('statechange', ev) |
32 |
| - } |
| 25 | +pc.oniceconnectionstatechange = (ev) => { |
| 26 | + console.log('ice statechange', ev) |
| 27 | +} |
33 | 28 |
|
34 |
| - var dc = pc.createDataChannel('data', { |
| 29 | +async function initiate() { |
| 30 | + const dc = pc.createDataChannel('data', { |
35 | 31 | ordered: false,
|
36 | 32 | maxRetransmits: 0,
|
37 | 33 | })
|
38 | 34 |
|
39 |
| - dc.onopen = function() { |
| 35 | + dc.onopen = ev => { |
40 | 36 | console.log('data channel open')
|
41 |
| - // pc.getStats() |
42 |
| - // .then(function(stats) { console.log(stats) }) |
43 |
| - dc.send('bouah') |
44 | 37 | }
|
45 | 38 |
|
46 |
| - dc.onmessage = function() { |
47 |
| - console.log('data message') |
| 39 | + dc.onmessage = (ev) => { |
| 40 | + console.log('data message', ev.data) |
48 | 41 | }
|
49 | 42 |
|
50 |
| - dc.onclose = function() { |
| 43 | + dc.onclose = (ev) => { |
51 | 44 | console.log('data channel closed')
|
52 | 45 | }
|
53 | 46 |
|
54 |
| - dc.onerror = function() { |
| 47 | + dc.onerror = (ev) => { |
55 | 48 | console.log('data channel error')
|
56 | 49 | }
|
57 | 50 |
|
58 |
| - // Remote peer |
59 |
| - var remotepc = new PeerConnection(ice) |
| 51 | + const offer = await pc.createOffer() |
| 52 | + pc.setLocalDescription(offer) |
60 | 53 |
|
61 |
| - remotepc.onicecandidate = function(ev) { |
62 |
| - if (ev.candidate != null) |
63 |
| - pc.addIceCandidate(ev.candidate) |
64 |
| - } |
65 |
| - |
66 |
| - remotepc.ondatachannel = function(ev) { |
67 |
| - console.log('(remote) got data channel') |
68 |
| - ev.channel.onmessage = function(ev) { |
69 |
| - console.log('(remote) data message: ', ev.data) |
70 |
| - } |
71 |
| - } |
| 54 | + document.getElementById('sdp') |
| 55 | + .value = JSON.stringify(offer) |
| 56 | +} |
72 | 57 |
|
73 |
| - // This spaghetti plate is brought to you by FF and Chrome not having the same |
74 |
| - // interface. Chrome uses success and failure callbacks, FF a mix of Promises |
75 |
| - // and callbacks. |
76 |
| - var p = pc.createOffer(handleOffer, failure) |
77 |
| - if (p) p.then(handleOffer) |
78 |
| - |
79 |
| - function handleOffer(offer) { |
80 |
| - pc.setLocalDescription(offer, function() { |
81 |
| - remotepc.setRemoteDescription( |
82 |
| - pc.localDescription, function() { |
83 |
| - var p = remotepc.createAnswer(handleAnswer, failure) |
84 |
| - if (p) p.then(handleAnswer) |
85 |
| - }, failure) |
86 |
| - }, failure) |
87 |
| - } |
| 58 | +async function receive() { |
| 59 | + const sdp = JSON.parse(document.getElementById('sdp').value) |
88 | 60 |
|
89 |
| - function handleAnswer(answer) { |
90 |
| - remotepc.setLocalDescription( |
91 |
| - answer, function() { |
92 |
| - pc.setRemoteDescription(remotepc.localDescription) |
93 |
| - }, failure) |
94 |
| - } |
| 61 | + await pc.setRemoteDescription(sdp) |
| 62 | + const answer = await pc.createAnswer() |
| 63 | + pc.setLocalDescription(answer) |
| 64 | + document.getElementById('sdp').value = JSON.stringify(answer) |
| 65 | +} |
95 | 66 |
|
96 |
| - function failure(err) { |
97 |
| - console.error(err) |
98 |
| - } |
| 67 | +async function accept() { |
| 68 | + const sdp = JSON.parse(document.getElementById('sdp').value) |
| 69 | + await pc.setRemoteDescription(sdp) |
99 | 70 | }
|
0 commit comments