Skip to content
This repository was archived by the owner on Oct 25, 2024. It is now read-only.

Commit ed7c545

Browse files
jianjunzjianjunz
committed
QUIC sample is able to establish a connection between two pages.
This change also moves QUIC sample to a separate directory.
1 parent 651da10 commit ed7c545

File tree

5 files changed

+623
-3
lines changed

5 files changed

+623
-3
lines changed

‎src/samples/conference/public/quic.html renamed to ‎src/samples/quic/quic-connect.html

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ <h2>Received data</h2>
110110
iceCandidates.push(e.candidate.candidate);
111111
}
112112
};
113-
iceTransport.onstatechange=e=>{
113+
iceTransport.addEventListener('statechange', e=>{
114114
console.log('onstatechange: '+iceTransport.state);
115115
if(iceTransport.state==='connected'){
116116
quicTransport.onstatechange=e=>{
@@ -127,12 +127,14 @@ <h2>Received data</h2>
127127
};
128128
quicTransport.connect();
129129
}
130+
});
131+
iceTransport.onstatechange=e=>{
130132
};
131133
iceTransport.ongatheringstatechange=e=>{
132134
if(iceTransport.gatheringState==="complete"){
133135
const parameters=iceTransport.getLocalParameters();
134136
const key=quicTransport.getKey();
135-
$.ajax({url:'http://example.com:7081/rest/client', type:'put', data:{iceParameters:parameters,iceCandidates:iceCandidates, quicKey:new Uint8Array(key)}, success:()=>{
137+
$.ajax({url:'http://localhost:7081/rest/client', type:'put', data:{iceParameters:parameters,iceCandidates:iceCandidates, quicKey:new Uint8Array(key)}, success:()=>{
136138
console.log('Successfully upload ICE info.');
137139
}});
138140
}
@@ -141,8 +143,11 @@ <h2>Received data</h2>
141143
iceTransport.gather({});
142144
});
143145
$('#set-remote-ice-parameters').click(() => {
144-
$.get('http://example.com:7081/rest/server', data => {
146+
$.get('http://localhost:7081/rest/server', data => {
145147
iceTransport.start({ usernameFragment: data.parameters.usernameFragment, password: data.parameters.password });
148+
for(const candidate of data.candidates){
149+
iceTransport.addRemoteCandidate(new RTCIceCandidate({candidate:candidate, sdpMLineIndex:0}));
150+
};
146151
});
147152
});
148153
$('#add-remote-ice-candidate').click(()=>{

‎src/samples/quic/quic-listen.html

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
<!--
2+
Copyright (C) <2018> Intel Corporation
3+
4+
SPDX-License-Identifier: Apache-2.0
5+
-->
6+
7+
<!DOCTYPE html>
8+
9+
<head>
10+
<meta charset="utf-8">
11+
<title>Intel&reg; Collaboration Suite for WebRTC QUIC Sample</title>
12+
<style>
13+
html{
14+
font-family: "intel-clear","tahoma",Helvetica,"helvetica",Arial,sans-serif;
15+
font-size: 90%;
16+
}
17+
textarea {
18+
font-family: monospace;
19+
margin: 2px;
20+
height: 100px;
21+
width: 250px;
22+
}
23+
div#send {
24+
float: left;
25+
margin-right: 20px;
26+
}
27+
div#sendreceive {
28+
margin: 0 0 20px 0;
29+
}
30+
h2 {
31+
margin: 0 0 10px 0;
32+
}
33+
div#local {
34+
float: left;
35+
margin-right: 20px;
36+
}
37+
div#remote {
38+
float: left;
39+
}
40+
div#screen {
41+
float: left;
42+
}
43+
div#videocontainer {
44+
margin: 0 0 20px 0;
45+
width: 1300px;
46+
height: 700px;
47+
}
48+
.get-local-info-button {
49+
display: block;
50+
}
51+
</style>
52+
</head>
53+
54+
<body>
55+
<script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
56+
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js" type="text/javascript"></script>
57+
<script src="https://webrtchacks.github.io/adapter/adapter-7.0.0.js" type="text/javascript"></script>
58+
<h1>Intel<sup>&reg;</sup> Collaboration Suite for WebRTC</h1>
59+
<h2>QUIC Sample</h2>
60+
<div id="description">
61+
<p>This sample works with the latest Chrome.</p>
62+
</div>
63+
<div id="control">
64+
<p>
65+
<button id="ice-gather">Gather</button>
66+
<input id="remote-ice-parameters-userfrag" type="text" />
67+
<input id="remote-ice-parameters-password" type="text" />
68+
<button id="quic-listen">Listen</button>
69+
</p>
70+
<p>
71+
<input id="remote-ice-candidate" type="text" />
72+
<button id="add-remote-ice-candidate">Add Remote ICE Candidate</button>
73+
</p>
74+
</div>
75+
<div id="sendreceive">
76+
<div id="send">
77+
<h2>Send data</h2>
78+
<textarea id="dataSent" rows="5" cols="10"></textarea>
79+
</div>
80+
<div id="receive">
81+
<h2>Received data</h2>
82+
<textarea id="dataReceived" rows="5" cols="10" disabled="true"></textarea>
83+
</div>
84+
<button id="data-create-stream">Create stream</button>
85+
<button id="data-send">Send data</button>
86+
</div>
87+
88+
<footer id="status"></footer>
89+
<div id="infoDiv"></div>
90+
<script type="text/javascript">
91+
'use strict';
92+
let iceCandidates=[];
93+
let quicStream;
94+
const iceTransport=new RTCIceTransport();
95+
const quicTransport=new RTCQuicTransport(iceTransport);
96+
iceTransport.onicecandidate=e=>{
97+
if(e.candidate){
98+
$('#local-ice-candidates').append(e.candidate.candidate+'&#13;&#10;');
99+
iceCandidates.push(e.candidate.candidate);
100+
}
101+
};
102+
iceTransport.onstatechange=e=>{
103+
console.log('onstatechange: '+iceTransport.state);
104+
if(iceTransport.state==='connected'){
105+
quicTransport.onstatechange=e=>{
106+
console.log('Quic transport state: '+quicTransport.state);
107+
};
108+
quicTransport.onerror=e=>{
109+
console.log('Quic on error: '+e);
110+
};
111+
quicTransport.onquicstream =e=>{
112+
console.log('onbidirectionalstream.');
113+
};
114+
quicTransport.onbidirectionalstream =e=>{
115+
console.log('onbidirectionalstream.');
116+
};
117+
}
118+
};
119+
iceTransport.ongatheringstatechange=e=>{
120+
if(iceTransport.gatheringState==="complete"){
121+
const parameters=iceTransport.getLocalParameters();
122+
$.ajax({url:'http://localhost:7081/rest/server', type:'put', data:{iceParameters:parameters,iceCandidates:iceCandidates}, success:()=>{
123+
console.log('Successfully upload ICE info.');
124+
}});
125+
}
126+
};
127+
$('#ice-gather').click(()=>{
128+
iceTransport.gather({});
129+
});
130+
$('#quic-listen').click(() => {
131+
$.get('http://localhost:7081/rest/client', data => {
132+
iceTransport.start({ usernameFragment: data.parameters.usernameFragment, password: data.parameters.password });
133+
for(const candidate of data.candidates){
134+
iceTransport.addRemoteCandidate(new RTCIceCandidate({candidate:candidate, sdpMLineIndex:0}));
135+
};
136+
quicTransport.listen(new Uint8Array(data.quicKey));
137+
});
138+
});
139+
$('#add-remote-ice-candidate').click(()=>{
140+
iceTransport.addRemoteCandidate($('#remote-ice-candidate').text());
141+
});
142+
$('#get-local-info-ice-parameters').click(()=>{
143+
$('#local-ice-parameters').text(JSON.stringify(iceTransport.getLocalParameters()));
144+
});
145+
$('#get-local-info-key').click(()=>{
146+
$('#local-key').text(JSON.stringify(quicTransport.getKey()));
147+
});
148+
$('#data-create-stream').click(()=>{
149+
quicStream = quicTransport.createStream();
150+
});
151+
$('#data-send').click(()=>{
152+
quicStream.write({data: new Uint8Array([42])});
153+
});
154+
</script>
155+
</body>

0 commit comments

Comments
 (0)