Mercurial > hg > Papers > 2017 > mitsuki-thesis

comparison presen/slide.html @ 10:86f6bb9be40a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add
author mir3636
date Wed, 15 Feb 2017 18:20:07 +0900
parents
children 75ea2f33f426
comparison
equal deleted inserted replaced
9:11ad5b3e7b85 10:86f6bb9be40a
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" >
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">
70 <h1><font color="#808db5">PC画面配信システムTreeVNCの NAT への対応</font></h1>
71 </div>
72 </td>
73 </tr>
74 <tr>
75 <td>
76 <div align="left">
77 Tatsuki IHA
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]
90 on 2016-02-18 09:23:08 +0900 with Markdown engine kramdown (1.9.0)
91 using options {}
92 -->
93
94 <!-- _S9SLIDE_ -->
95 <h2 id="section">画面共有を利用したコミュニケーション</h2>
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_ -->
106 <h2 id="treevnc-">TreeVNC の問題点</h2>
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_ -->
117 <h2 id="treevnc--1">TreeVNC の問題点</h2>
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_ -->
129 <h2 id="section-1">この発表は</h2>
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_ -->
156 <h2 id="treevnc">TreeVNC</h2>
157 <ul>
158 <li>TreeVNC は本研究室で開発している VNC を利用した画面配信システム</li>
159 <li>配信コストを分散させることで大人数でも画面配信が可能</li>
160 <li>スムーズな配信画面の切替を行う</li>
161 </ul>
162
163
164 </div>
165 <div class='slide '>
166 <!-- _S9SLIDE_ -->
167 <h2 id="vnc">VNC</h2>
168 <ul>
169 <li>VNC(Virtual Network Computing) は RFBプロトコルを用いて遠隔操作を行うソフトウェア</li>
170 <li>サーバー側とクライアント側に分かれており、サーバーを起動し、クライアントがサーバーに接続を行うことで遠隔操作を可能とする</li>
171 </ul>
172
173 <p><img src="./images/vnc.svg" alt="message" width="600" /></p>
174
175
176 </div>
177 <div class='slide '>
178 <!-- _S9SLIDE_ -->
179 <h2 id="rfb-">RFB プロトコル</h2>
180 <ul>
181 <li>RFB(Remote Frame Buffer)プロトコルは VNC で用いられているプロトコル</li>
182 <li>自身の画面をネットワーク越しに他者の画面に表示する</li>
183 <li>Framebuffer と呼ばれるメモリ上に置かれた画像データを使用して画面表示を行う</li>
184 <li>サーバーは Framebuffer が更新されるたびにクライアントに対して変更部分だけを送信する。</li>
185 </ul>
186
187
188 </div>
189 <div class='slide '>
190 <!-- _S9SLIDE_ -->
191 <h2 id="treevnc--2">TreeVNC の構造</h2>
192 <ul>
193 <li>Java で作成されたTightVNC(Tight Virtual Network Computing) を元に作成されている</li>
194 <li>様々なメッセージで通信を行う</li>
195 <li>クライアント同士をバイナリツリー状に接続する</li>
196 <li>バイナリツリーのルートのノードをRoot Nodeと呼び、 Root Node に接続されるノードを Node と呼ぶ</li>
197 <li>Root Node が参照している VNC サーバーから FrameBuffer を取得して、 木構造を辿って Node に送信する。</li>
198 </ul>
199
200 <p><img src="./images/treeVnc.svg" alt="message" width="400" /></p>
201
202
203 </div>
204 <div class='slide '>
205 <!-- _S9SLIDE_ -->
206 <h2 id="treevnc--3">TreeVNC の原理</h2>
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
218 <p><img src="./images/treeVncTheory.svg" alt="message" width="700" /></p>
219
220
221 </div>
222 <div class='slide '>
223 <!-- _S9SLIDE_ -->
224 <h2 id="section-2">共有画面切り替え</h2>
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_ -->
236 <h2 id="direct-connection">Direct Connection</h2>
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_ -->
249 <h2 id="section-3">マルチディスプレイ</h2>
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
256 <p><img src="./images/shareScreenToMultiDisplay.svg" alt="message" width="700" /></p>
257
258
259 </div>
260 <div class='slide '>
261 <!-- _S9SLIDE_ -->
262 <h2 id="treevnc--4">TreeVNC の評価</h2>
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_ -->
277 <h2 id="section-4">実測方法</h2>
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 <p><img src="./images/checkDelay.svg" alt="message" width="600" /></p>
285
286
287 </div>
288 <div class='slide '>
289 <!-- _S9SLIDE_ -->
290 <h2 id="section-5">深さ1, 2</h2>
291 <p><img src="./images/depth1.svg" alt="message" width="600" />
292 <img src="./images/depth2.svg" alt="message" width="600" /></p>
293
294
295 </div>
296 <div class='slide '>
297 <!-- _S9SLIDE_ -->
298 <h2 id="section-6">深さ3, 4</h2>
299 <p><img src="./images/depth3.svg" alt="message" width="600" />
300 <img src="./images/depth4.svg" alt="message" width="600" /></p>
301
302
303 </div>
304 <div class='slide '>
305 <!-- _S9SLIDE_ -->
306 <h2 id="section-7">結果から</h2>
307 <ul>
308 <li>画像データの伝達はほぼ1秒以内に収まっている</li>
309 <li>容量が小さい場合でも時間がかかる場合がある。 それはその送信の前に大容量の画像を送信した後の回線の遅延が残っているためだと考えられる</li>
310 <li>深さ3が遅い原因として1つの Node がボトルネックになっている事が判明した。</li>
311 <li>ネックになった Node をそのままにするとその子Nodeに影響を及ぼしてしまう。 そのためその Node に何らかの対応を行う必要がある</li>
312 </ul>
313
314 <p><img src="./images/depth3.svg" alt="message" width="600" height="600" />
315 <img src="./images/depth3_without_bottle.svg" alt="message" width="600" height="600" /></p>
316
317
318 </div>
319 <div class='slide '>
320 <!-- _S9SLIDE_ -->
321 <h2 id="section-8">ネックになっているノードへの対処</h2>
322 <ul>
323 <li>CHECK_DELAY_REPLY で Root Node は ネックかどうかのを判断をする</li>
324 <li>ネックになっているなら、その Node を木構造のリストから削除</li>
325 <li>最後の Node を削除した Node の場所に移動</li>
326 <li>ネックになったところは三分木になる</li>
327 </ul>
328
329 <p><img src="./images/fixTree.svg" alt="message" width="800" /></p>
330
331
332 </div>
333 <div class='slide '>
334 <!-- _S9SLIDE_ -->
335 <h2 id="section-9">まとめと課題</h2>
336 <ul>
337 <li>今回TreeVNCの様々な問題点の解決を行った
338 <ul>
339 <li>NAT</li>
340 <li>マルチディスプレイ</li>
341 <li>画面切り替えの安定化</li>
342 <li>エラー通知</li>
343 </ul>
344 </li>
345 <li>NATを越えた画面切り替え</li>
346 <li>音声配信等の共有機能の追加</li>
347 </ul>
348
349 <!-- === end markdown block === -->
350 </div>
351
352
353 </div><!-- presentation -->
354 </body>
355 </html>