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

Commit 651da10

Browse files
jianjunzjianjunz
committed
Add a QUIC sample.
1 parent 56d675a commit 651da10

File tree

1 file changed

+164
-0
lines changed

1 file changed

+164
-0
lines changed

‎src/samples/conference/public/quic.html

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
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="set-remote-ice-parameters">Start</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="local-info">
76+
<div id="local-info-ice-parameters">
77+
<button class="get-local-info-button" id="get-local-info-ice-parameters">Get Local ICE Parameters</button>
78+
<textarea id="local-ice-parameters" rows="5" cols="10" disabled></textarea>
79+
<textarea id="local-ice-candidates" rows="5" cols="10" disabled></textarea>
80+
</div>
81+
<div id="local-info-key">
82+
<button class="get-local-info-button" id="get-local-info-key">Get Local Key</button>
83+
<textarea id="local-key" rows="5" cols="10" disabled></textarea>
84+
</div>
85+
</div>
86+
<div id="sendreceive">
87+
<div id="send">
88+
<h2>Send data</h2>
89+
<textarea id="dataSent" rows="5" cols="10"></textarea>
90+
</div>
91+
<div id="receive">
92+
<h2>Received data</h2>
93+
<textarea id="dataReceived" rows="5" cols="10" disabled="true"></textarea>
94+
</div>
95+
<button id="data-create-stream">Create stream</button>
96+
<button id="data-send">Send data</button>
97+
</div>
98+
99+
<footer id="status"></footer>
100+
<div id="infoDiv"></div>
101+
<script type="text/javascript">
102+
'use strict';
103+
let iceCandidates=[];
104+
let quicStream;
105+
const iceTransport=new RTCIceTransport();
106+
const quicTransport=new RTCQuicTransport(iceTransport);
107+
iceTransport.onicecandidate=e=>{
108+
if(e.candidate){
109+
$('#local-ice-candidates').append(e.candidate.candidate+'&#13;&#10;');
110+
iceCandidates.push(e.candidate.candidate);
111+
}
112+
};
113+
iceTransport.onstatechange=e=>{
114+
console.log('onstatechange: '+iceTransport.state);
115+
if(iceTransport.state==='connected'){
116+
quicTransport.onstatechange=e=>{
117+
console.log('Quic transport state: '+quicTransport.state);
118+
};
119+
quicTransport.onerror=e=>{
120+
console.log('Quic on error: '+e);
121+
};
122+
quicTransport.onquicstream =e=>{
123+
console.log('onbidirectionalstream.');
124+
};
125+
quicTransport.onbidirectionalstream =e=>{
126+
console.log('onbidirectionalstream.');
127+
};
128+
quicTransport.connect();
129+
}
130+
};
131+
iceTransport.ongatheringstatechange=e=>{
132+
if(iceTransport.gatheringState==="complete"){
133+
const parameters=iceTransport.getLocalParameters();
134+
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:()=>{
136+
console.log('Successfully upload ICE info.');
137+
}});
138+
}
139+
};
140+
$('#ice-gather').click(()=>{
141+
iceTransport.gather({});
142+
});
143+
$('#set-remote-ice-parameters').click(() => {
144+
$.get('http://example.com:7081/rest/server', data => {
145+
iceTransport.start({ usernameFragment: data.parameters.usernameFragment, password: data.parameters.password });
146+
});
147+
});
148+
$('#add-remote-ice-candidate').click(()=>{
149+
iceTransport.addRemoteCandidate($('#remote-ice-candidate').text());
150+
});
151+
$('#get-local-info-ice-parameters').click(()=>{
152+
$('#local-ice-parameters').text(JSON.stringify(iceTransport.getLocalParameters()));
153+
});
154+
$('#get-local-info-key').click(()=>{
155+
$('#local-key').text(JSON.stringify(quicTransport.getKey()));
156+
});
157+
$('#data-create-stream').click(()=>{
158+
quicStream = quicTransport.createStream();
159+
});
160+
$('#data-send').click(()=>{
161+
quicStream.write({data: new Uint8Array([42])});
162+
});
163+
</script>
164+
</body>

0 commit comments

Comments
 (0)