|
34
|
1 <!DOCTYPE html>
|
|
|
2 <html>
|
|
|
3 <head>
|
|
|
4 <meta http-equiv="content-type" content="text/html;charset=utf-8">
|
|
|
5 <title>PC画面配信システムTreeVNCの NAT への対応</title>
|
|
|
6
|
|
|
7 <meta name="generator" content="Slide Show (S9) v2.5.0 on Ruby 2.3.0 (2015-12-25) [x86_64-darwin15]">
|
|
|
8 <meta name="author" content="Tatsuki IHA, Shinji KONO" >
|
|
|
9
|
|
|
10 <!-- style sheet links -->
|
|
|
11 <link rel="stylesheet" href="s6/themes/projection.css" media="screen,projection">
|
|
|
12 <link rel="stylesheet" href="s6/themes/screen.css" media="screen">
|
|
|
13 <link rel="stylesheet" href="s6/themes/print.css" media="print">
|
|
|
14 <link rel="stylesheet" href="s6/themes/blank.css" media="screen,projection">
|
|
|
15
|
|
|
16 <!-- JS -->
|
|
|
17 <script src="s6/js/jquery-1.11.3.min.js"></script>
|
|
|
18 <script src="s6/js/jquery.slideshow.js"></script>
|
|
|
19 <script src="s6/js/jquery.slideshow.counter.js"></script>
|
|
|
20 <script src="s6/js/jquery.slideshow.controls.js"></script>
|
|
|
21 <script src="s6/js/jquery.slideshow.footer.js"></script>
|
|
|
22 <script src="s6/js/jquery.slideshow.autoplay.js"></script>
|
|
|
23
|
|
|
24 <!-- prettify -->
|
|
|
25 <link rel="stylesheet" href="scripts/prettify.css">
|
|
|
26 <script src="scripts/prettify.js"></script>
|
|
|
27
|
|
|
28 <script>
|
|
|
29 $(document).ready( function() {
|
|
|
30 Slideshow.init();
|
|
|
31
|
|
|
32 $('code').each(function(_, el) {
|
|
|
33 if (!el.classList.contains('noprettyprint')) {
|
|
|
34 el.classList.add('prettyprint');
|
|
|
35 el.style.display = 'block';
|
|
|
36 }
|
|
|
37 });
|
|
|
38 prettyPrint();
|
|
|
39 } );
|
|
|
40
|
|
|
41
|
|
|
42 </script>
|
|
|
43
|
|
|
44 <!-- Better Browser Banner for Microsoft Internet Explorer (IE) -->
|
|
|
45 <!--[if IE]>
|
|
|
46 <script src="s6/js/jquery.microsoft.js"></script>
|
|
|
47 <![endif]-->
|
|
|
48
|
|
|
49
|
|
|
50
|
|
|
51 </head>
|
|
|
52 <body>
|
|
|
53
|
|
|
54 <div class="layout">
|
|
|
55 <div id="header"></div>
|
|
|
56 <div id="footer">
|
|
|
57 <div align="right">
|
|
|
58 <img src="s6/images/logo.svg" width="200px">
|
|
|
59 </div>
|
|
|
60 </div>
|
|
|
61 </div>
|
|
|
62
|
|
|
63 <div class="presentation">
|
|
|
64
|
|
|
65 <div class='slide cover'>
|
|
|
66 <table width="90%" height="90%" border="0" align="center">
|
|
|
67 <tr>
|
|
|
68 <td>
|
|
|
69 <div align="center">
|
|
37
|
70 <h1><font color="#808db5">PC画面配信システムTreeVNCの NAT への対応</font></h1>
|
|
34
|
71 </div>
|
|
|
72 </td>
|
|
|
73 </tr>
|
|
|
74 <tr>
|
|
|
75 <td>
|
|
|
76 <div align="left">
|
|
|
77 Tatsuki IHA, Shinji KONO
|
|
|
78
|
|
|
79 <hr style="color:#ffcc00;background-color:#ffcc00;text-align:left;border:none;width:100%;height:0.2em;">
|
|
|
80 </div>
|
|
|
81 </td>
|
|
|
82 </tr>
|
|
|
83 </table>
|
|
|
84 </div>
|
|
|
85
|
|
|
86 <div class='slide '>
|
|
|
87 <!-- === begin markdown block ===
|
|
|
88
|
|
|
89 generated by markdown/1.2.0 on Ruby 2.3.0 (2015-12-25) [x86_64-darwin15]
|
|
35
|
90 on 2016-02-18 04:27:13 +0900 with Markdown engine kramdown (1.9.0)
|
|
34
|
91 using options {}
|
|
|
92 -->
|
|
|
93
|
|
|
94 <!-- _S9SLIDE_ -->
|
|
36
|
95 <h2 id="section">画面共有を利用したコミュニケーション</h2>
|
|
34
|
96 <ul>
|
|
|
97 <li>授業やゼミ等で、それぞれが PC 端末を持っている場合では、PC の機能を活かした コミュニケーションが可能である</li>
|
|
|
98 <li>画面配信システム TreeVNC は参加したクライアントをバイナリツリー状に接続し、配信コストを分散させる 仕組みを取っている。そのため, 多人数が参加しても処理性能が下がらない</li>
|
|
|
99 <li>ツリー のルートが参照している VNC サーバーを変更することで、ケーブルの差し替えなしに画面の切替が行える</li>
|
|
|
100 </ul>
|
|
|
101
|
|
|
102
|
|
|
103 </div>
|
|
|
104 <div class='slide '>
|
|
|
105 <!-- _S9SLIDE_ -->
|
|
36
|
106 <h2 id="treevnc-">TreeVNC の問題点</h2>
|
|
34
|
107 <ul>
|
|
|
108 <li>TreeVNC を実際に使用していく中で様々な問題が発生</li>
|
|
|
109 <li>講義等を大学外の遠隔地から受けたい場合がある</li>
|
|
|
110 <li>TreeVNC は NAT を越えた接続が行うことができない</li>
|
|
|
111 </ul>
|
|
|
112
|
|
|
113
|
|
|
114 </div>
|
|
|
115 <div class='slide '>
|
|
|
116 <!-- _S9SLIDE_ -->
|
|
36
|
117 <h2 id="treevnc--1">TreeVNC の問題点</h2>
|
|
34
|
118 <ul>
|
|
|
119 <li>ゼミ等で発表者毎に画面切り替えを行う際、デュアルディスプレイを使っている学生がいた</li>
|
|
|
120 <li>その際 VNC サーバーからはすべての画面データが送信されており、発表とは関係ない画面も配信されていた</li>
|
|
|
121 </ul>
|
|
|
122
|
|
|
123 <p><img src="./images/multidisplay.svg" alt="message" width="500" /></p>
|
|
|
124
|
|
|
125
|
|
|
126 </div>
|
|
|
127 <div class='slide '>
|
|
|
128 <!-- _S9SLIDE_ -->
|
|
36
|
129 <h2 id="section-1">この発表は</h2>
|
|
34
|
130 <ul>
|
|
|
131 <li>TreeVNC の概要
|
|
|
132 <ul>
|
|
|
133 <li>構造</li>
|
|
|
134 <li>原理</li>
|
|
|
135 <li>画面切り替え</li>
|
|
|
136 </ul>
|
|
|
137 </li>
|
|
|
138 <li>今回の改良
|
|
|
139 <ul>
|
|
|
140 <li>NAT を越えた通信</li>
|
|
|
141 <li>マルチディスプレイの対応</li>
|
|
|
142 </ul>
|
|
|
143 </li>
|
|
|
144 <li>TreeVNC の評価
|
|
|
145 <ul>
|
|
|
146 <li>画像データ送信の遅延</li>
|
|
|
147 <li>ネックになってるノードへの対処</li>
|
|
|
148 </ul>
|
|
|
149 </li>
|
|
|
150 </ul>
|
|
|
151
|
|
|
152
|
|
|
153 </div>
|
|
|
154 <div class='slide '>
|
|
|
155 <!-- _S9SLIDE_ -->
|
|
36
|
156 <h2 id="treevnc">TreeVNC</h2>
|
|
34
|
157 <ul>
|
|
|
158 <li>TreeVNC は本研究室で開発している VNC を利用した画面配信システム</li>
|
|
|
159 <li>参加したクライアントをバイナリツリー状で接続することで配信コストを分散させる</li>
|
|
|
160 <li>スムーズな配信画面の切替を行う</li>
|
|
|
161 </ul>
|
|
|
162
|
|
|
163 <p><img src="./images/treeVnc.svg" alt="message" width="400" /></p>
|
|
|
164
|
|
|
165
|
|
|
166 </div>
|
|
|
167 <div class='slide '>
|
|
|
168 <!-- _S9SLIDE_ -->
|
|
36
|
169 <h2 id="vnc">VNC</h2>
|
|
34
|
170 <ul>
|
|
|
171 <li>VNC(Virtual Network Computing) は RFBプロトコルを用いて遠隔操作を行うソフトウェア</li>
|
|
|
172 <li>サーバー側とクライアント側に分かれており、サーバーを起動し、クライアントがサーバーに接続を行うことで遠隔操作を可能とする</li>
|
|
|
173 </ul>
|
|
|
174
|
|
|
175 <p><img src="./images/vnc.svg" alt="message" width="600" /></p>
|
|
|
176
|
|
|
177
|
|
|
178 </div>
|
|
|
179 <div class='slide '>
|
|
|
180 <!-- _S9SLIDE_ -->
|
|
36
|
181 <h2 id="rfb-">RFB プロトコル</h2>
|
|
34
|
182 <ul>
|
|
|
183 <li>RFB(Remote Frame Buffer)プロトコルは VNC で用いられているプロトコル</li>
|
|
|
184 <li>自身の画面をネットワーク越しに他者の画面に表示する</li>
|
|
|
185 <li>Framebuffer と呼ばれるメモリ上に置かれた画像データを使用して画面表示を行う</li>
|
|
|
186 <li>サーバーは Framebuffer が更新されるたびにクライアントに対して変更部分だけを送信する。</li>
|
|
|
187 </ul>
|
|
|
188
|
|
|
189
|
|
|
190 </div>
|
|
|
191 <div class='slide '>
|
|
|
192 <!-- _S9SLIDE_ -->
|
|
36
|
193 <h2 id="treevnc--2">TreeVNC の構造</h2>
|
|
34
|
194 <ul>
|
|
|
195 <li>Java で作成されたTightVNC(Tight Virtual Network Computing) を元に作成されている</li>
|
|
|
196 <li>様々なメッセージで通信を行う</li>
|
|
|
197 <li>クライアント同士をバイナリツリー状に接続する</li>
|
|
|
198 <li>バイナリツリーのルートのノードをRoot Nodeと呼び、 Root Node に接続されるノードを Node と呼ぶ</li>
|
|
35
|
199 <li>Root Node が参照している VNC サーバーから FrameBuffer を取得して、 木構造を辿って Node に送信する。</li>
|
|
34
|
200 </ul>
|
|
|
201
|
|
|
202
|
|
|
203 </div>
|
|
|
204 <div class='slide '>
|
|
|
205 <!-- _S9SLIDE_ -->
|
|
36
|
206 <h2 id="treevnc-1">TreeVNCの原理</h2>
|
|
34
|
207 <ul>
|
|
|
208 <li>ポート一本あたりの負荷
|
|
|
209 <ul>
|
|
|
210 <li>従来のVNC : Node数 * データ量</li>
|
|
|
211 <li>TreeVNC : (2(子供の数) + 1) * データ量</li>
|
|
|
212 </ul>
|
|
|
213 </li>
|
|
|
214 <li>従来のVNCはNode数に比例</li>
|
|
|
215 <li>TreeVNCはNode数に関係なく一定</li>
|
|
|
216 </ul>
|
|
|
217
|
|
35
|
218 <p><img src="./images/treeVncTheory.svg" alt="message" width="700" /></p>
|
|
34
|
219
|
|
|
220
|
|
|
221 </div>
|
|
|
222 <div class='slide '>
|
|
|
223 <!-- _S9SLIDE_ -->
|
|
36
|
224 <h2 id="section-2">共有画面切り替え</h2>
|
|
34
|
225 <ul>
|
|
|
226 <li>TreeVNC の Root Node は配信者の VNC サーバーと通信を行っている</li>
|
|
|
227 <li>画面を配信されている側のビューワにある Share Screen ボタンが押す</li>
|
|
|
228 <li>Root Node に SERVER_CHANGE_REQUEST を木構造を辿りながら送信</li>
|
|
|
229 <li>Root Node は Share Screen ボタンを押したクライアントの VNC サーバーと通信を開始</li>
|
|
|
230 </ul>
|
|
|
231
|
|
|
232
|
|
|
233 </div>
|
|
|
234 <div class='slide '>
|
|
|
235 <!-- _S9SLIDE_ -->
|
|
36
|
236 <h2 id="direct-connection">Direct Connection</h2>
|
|
34
|
237 <ul>
|
|
|
238 <li>NATを越えたネットワークからの接続は直接配信側の Root Node に接続を行うことで実現する</li>
|
|
|
239 <li>Direct Connection した Node はそのネットワークの Root Node になる</li>
|
|
|
240 <li>Direct Connection された Root Node では NAT を越えたネットワーク先の Node の管理を行わない</li>
|
|
|
241 </ul>
|
|
|
242
|
|
|
243 <p><img src="./images/directConnection.svg" alt="message" width="800" /></p>
|
|
|
244
|
|
|
245
|
|
|
246 </div>
|
|
|
247 <div class='slide '>
|
|
|
248 <!-- _S9SLIDE_ -->
|
|
36
|
249 <h2 id="section-3">マルチディスプレイ</h2>
|
|
34
|
250 <ul>
|
|
|
251 <li>画面切り替えの際のSERVER_CHANGE_REQUESTに共有するディスプレイの座標を付加する</li>
|
|
|
252 <li>Root Node は 接続した VNC サーバーから画像データを要求する FRAME_BUFFER_UPDATE_REQUEST に受け取った座標を付加する</li>
|
|
|
253 <li>VNC サーバーは要求された座標内の画像データを FRAME_BUFFER_UPDATE で Root Node に送信する</li>
|
|
|
254 </ul>
|
|
|
255
|
|
35
|
256 <p><img src="./images/shareScreenToMultiDisplay.svg" alt="message" width="700" /></p>
|
|
34
|
257
|
|
|
258
|
|
|
259 </div>
|
|
|
260 <div class='slide '>
|
|
|
261 <!-- _S9SLIDE_ -->
|
|
36
|
262 <h2 id="treevnc-2">TreeVNCの評価</h2>
|
|
34
|
263 <ul>
|
|
|
264 <li>木の深さによる画像データの遅延を調べる</li>
|
|
|
265 <li>実験環境
|
|
|
266 <ul>
|
|
|
267 <li>実際に講義を受講している学生が TreeVNC を使用</li>
|
|
|
268 <li>約20名の接続</li>
|
|
|
269 </ul>
|
|
|
270 </li>
|
|
|
271 </ul>
|
|
|
272
|
|
|
273
|
|
|
274 </div>
|
|
|
275 <div class='slide '>
|
|
|
276 <!-- _S9SLIDE_ -->
|
|
36
|
277 <h2 id="section-4">実測方法</h2>
|
|
34
|
278 <ul>
|
|
|
279 <li>Root Node は 送信時間と画像データを持った CHECK_DELAY を 末端 Node まで木構造を辿りながら伝達する</li>
|
|
|
280 <li>CHECK_DELAY を受け取った各 Node は 付加された送信時間を CHECK_DELAY_REPLY に付加し、 Root Node に送信する</li>
|
|
|
281 <li>CHECK_DELAY_REPLY を受け取った Root Node は CHECK_DELAY の送信にどれだけ時間がかかったかの計算を行う</li>
|
|
|
282 </ul>
|
|
|
283
|
|
|
284 <pre lang="java"><code>// 遅延時間の計算
|
|
|
285 Long delay = System.currentTimeMillis() - time;
|
|
|
286 </code></pre>
|
|
|
287
|
|
|
288
|
|
|
289 </div>
|
|
|
290 <div class='slide '>
|
|
|
291 <!-- _S9SLIDE_ -->
|
|
36
|
292 <h2 id="section-5">深さ1, 2</h2>
|
|
34
|
293 <p><img src="./images/depth1.svg" alt="message" width="450" />
|
|
|
294 <img src="./images/depth2.svg" alt="message" width="450" /></p>
|
|
|
295
|
|
|
296
|
|
|
297 </div>
|
|
|
298 <div class='slide '>
|
|
|
299 <!-- _S9SLIDE_ -->
|
|
36
|
300 <h2 id="section-6">深さ3, 4</h2>
|
|
34
|
301 <p><img src="./images/depth3.svg" alt="message" width="450" />
|
|
|
302 <img src="./images/depth4.svg" alt="message" width="450" /></p>
|
|
|
303
|
|
|
304
|
|
|
305 </div>
|
|
|
306 <div class='slide '>
|
|
|
307 <!-- _S9SLIDE_ -->
|
|
36
|
308 <h2 id="section-7">結果から</h2>
|
|
34
|
309 <ul>
|
|
|
310 <li>画像データの伝達はほぼ1秒以内に収まっている</li>
|
|
|
311 <li>容量が小さい場合でも時間がかかる場合がある。 それはその送信の前に大容量の画像を送信した後の回線の遅延が残っているためだと考えられる</li>
|
|
|
312 <li>深さ3が遅い原因として1つの Node がボトルネックになっている事が判明した。</li>
|
|
|
313 <li>ネックになった Node をそのままにするとその子Nodeに影響を及ぼしてしまう。 そのためその Node に何らかの対応を行う必要がある</li>
|
|
|
314 </ul>
|
|
|
315
|
|
|
316
|
|
|
317 </div>
|
|
|
318 <div class='slide '>
|
|
|
319 <!-- _S9SLIDE_ -->
|
|
36
|
320 <h2 id="section-8">ネックになっているノードへの対処</h2>
|
|
34
|
321 <ul>
|
|
|
322 <li>CHECK_DELAY_REPLY で Root Node は ネックかどうかのを判断をする</li>
|
|
|
323 <li>ネックになっているなら、そのノードを木構造のリストから削除</li>
|
|
|
324 <li>最後のノードを削除したnodeの場所に移動</li>
|
|
|
325 <li>ネックになったところは三分木になる</li>
|
|
|
326 </ul>
|
|
|
327
|
|
|
328 <p><img src="./images/fixTree.svg" alt="message" width="800" /></p>
|
|
|
329
|
|
|
330
|
|
|
331 </div>
|
|
|
332 <div class='slide '>
|
|
|
333 <!-- _S9SLIDE_ -->
|
|
36
|
334 <h2 id="section-9">まとめと課題</h2>
|
|
34
|
335 <ul>
|
|
35
|
336 <li>今回TreeVNCの様々な問題点の解決を行った
|
|
|
337 <ul>
|
|
|
338 <li>NAT</li>
|
|
|
339 <li>マルチディスプレイ</li>
|
|
|
340 </ul>
|
|
|
341 </li>
|
|
34
|
342 <li>NATを越えた画面切り替え</li>
|
|
35
|
343 <li>音声配信等の共有機能の追加</li>
|
|
34
|
344 </ul>
|
|
|
345
|
|
|
346 <!-- === end markdown block === -->
|
|
|
347 </div>
|
|
|
348
|
|
|
349
|
|
|
350 </div><!-- presentation -->
|
|
|
351 </body>
|
|
|
352 </html>
|
