|
22
|
1 <!DOCTYPE html>
|
|
|
2 <html>
|
|
|
3 <head>
|
|
|
4 <meta http-equiv="content-type" content="text/html;charset=utf-8">
|
|
|
5 <title>有線 LAN 上のPC画面配信システムTreeVNCの改良</title>
|
|
|
6
|
|
24
|
7 <meta name="generator" content="Slide Show (S9) v2.5.0 on Ruby 2.3.0 (2015-12-25) [x86_64-darwin15]">
|
|
22
|
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">有線 LAN 上のPC画面配信システムTreeVNCの改良</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
|
|
24
|
89 generated by markdown/1.2.0 on Ruby 2.3.0 (2015-12-25) [x86_64-darwin15]
|
|
25
|
90 on 2016-01-06 01:55:09 +0900 with Markdown engine kramdown (1.9.0)
|
|
22
|
91 using options {}
|
|
|
92 -->
|
|
|
93
|
|
|
94 <!-- _S9SLIDE_ -->
|
|
|
95 <h1 id="section">画面共有を利用したコミュニケーション</h1>
|
|
|
96 <p>授業やゼミ等で、それぞれが PC 端末を持っている場合では、PC の機能を活かした コミュニケーションが可能である。教員が操作する画面をそのまま学生に配信したり, ゼミ などで、発表する学生の画面を切り替えたりすることを可能にしたい。画面配信システム TreeVNC は参加したクライアントをバイナリツリー状に接続し、配信コストを分散させる 仕組みを取っている。そのため, 多人数が参加しても処理性能が下がらない。また、ツリー のルートが参照している VNC サーバーを変更することで、ケーブルの差し替えなしに画面 の切替が可能となる。</p>
|
|
|
97
|
|
|
98
|
|
|
99 </div>
|
|
|
100 <div class='slide '>
|
|
|
101 <!-- _S9SLIDE_ -->
|
|
24
|
102 <h1 id="section-1">画面共有を利用したコミュニケーション</h1>
|
|
|
103 <p>しかし、 TreeVNC を実際に使用していく中で様々な問題が発生した。
|
|
|
104 本研究では TreeVNC の改良として、複数のネットワークへの対応、 WAN への対応、 マルチディスプレイへの対応を行うとともに、TreeVNC 有用性を示すた めに画像データの遅延時間計測を行った。</p>
|
|
|
105
|
|
|
106
|
|
|
107 </div>
|
|
|
108 <div class='slide '>
|
|
|
109 <!-- _S9SLIDE_ -->
|
|
22
|
110 <h1 id="treevnc">TreeVNC</h1>
|
|
|
111 <ul>
|
|
24
|
112 <li>は本研究室で開発している VNC を利用した画面配信システム</li>
|
|
22
|
113 <li>参加したクライアントをバイナリツリー状で接続することで配信コストを分散させる</li>
|
|
|
114 <li>スムーズな画面の切替を行う</li>
|
|
|
115 </ul>
|
|
|
116
|
|
|
117
|
|
|
118 </div>
|
|
|
119 <div class='slide '>
|
|
|
120 <!-- _S9SLIDE_ -->
|
|
24
|
121 <h1 id="section-2">問題点を一枚づつ</h1>
|
|
|
122
|
|
|
123
|
|
|
124 </div>
|
|
|
125 <div class='slide '>
|
|
|
126 <!-- _S9SLIDE_ -->
|
|
|
127 <h1 id="section-3">解決した問題</h1>
|
|
|
128
|
|
|
129
|
|
|
130 </div>
|
|
|
131 <div class='slide '>
|
|
|
132 <!-- _S9SLIDE_ -->
|
|
22
|
133 <h1 id="vnc">VNC</h1>
|
|
|
134 <ul>
|
|
|
135 <li>VNC(Virtual Network Computing) は RFBプロトコルを用いて遠隔操作を行うソフトウェア</li>
|
|
|
136 <li>サーバー側とクライアント側に分かれており、サーバーを起動し、クライアントがサーバーに接続を行うことで遠隔操作を可能とする</li>
|
|
|
137 </ul>
|
|
|
138
|
|
|
139
|
|
|
140 </div>
|
|
|
141 <div class='slide '>
|
|
|
142 <!-- _S9SLIDE_ -->
|
|
|
143 <h1 id="rfb-">RFB プロトコル</h1>
|
|
|
144 <ul>
|
|
|
145 <li>RFB(Remote Frame Buffer)プロトコルは VNC で用いられているプロトコル</li>
|
|
|
146 <li>自身の画面をネットワーク越しに他者の画面に表示する</li>
|
|
|
147 <li>RFB サーバと RFB クライアントに分かれている</li>
|
|
|
148 <li>Framebuffer と呼ばれるメモリ上に置かれた画像データを使用して画面表示を行う</li>
|
|
|
149 <li>RFB サーバーは Framebuffer が更新されるたびにRFB クライアントに対して Framebuffer の変更部分だけを送信する。</li>
|
|
|
150 </ul>
|
|
|
151
|
|
|
152
|
|
|
153 </div>
|
|
|
154 <div class='slide '>
|
|
|
155 <!-- _S9SLIDE_ -->
|
|
|
156 <h1 id="vnc-1">多人数でVNCを使用する際の問題点</h1>
|
|
|
157 <ul>
|
|
|
158 <li>多人数のクライアントが1つのサーバーに接続する構造である</li>
|
|
|
159 <li>そのため、サーバー側の処理性能が落ちてしまう</li>
|
|
|
160 <li>ゼミ等の発表で画面配信者が切り替わる場合配信者が変わるたびにアプリケーションを終了し、再接続を行う必要がある。</li>
|
|
|
161 </ul>
|
|
|
162
|
|
|
163
|
|
|
164 </div>
|
|
|
165 <div class='slide '>
|
|
|
166 <!-- _S9SLIDE_ -->
|
|
|
167 <h1 id="treevnc-">TreeVNC の構造</h1>
|
|
|
168 <ul>
|
|
|
169 <li>Java で作成されたTightVNC(Tight Virtual Network Computing) を元に作成されている</li>
|
|
|
170 <li>クライアント同士をバイナリツリー状に接続する</li>
|
|
|
171 <li>バイナリツリーのルートのノードをRoot Nodeと呼び、 Root Node に接続されるノードを Node と呼ぶ</li>
|
|
25
|
172 <li>Node は 親 Node から送られたデータを自分の子 Node に流す機能、 逆に子 Node から送られてきたデータを親 Nodeに流す機能がある
|
|
|
173 <img src="./images/TreeVNC.svg" alt="message" width="400" /></li>
|
|
22
|
174 </ul>
|
|
|
175
|
|
25
|
176
|
|
|
177 </div>
|
|
|
178 <div class='slide '>
|
|
|
179 <!-- _S9SLIDE_ -->
|
|
|
180 <h1 id="root-node">Root Node</h1>
|
|
|
181 <ul>
|
|
|
182 <li>Root Node は 子 Nodeにデータを流す機能に加え
|
|
|
183 <ul>
|
|
|
184 <li>各 Node の管理</li>
|
|
|
185 <li>VNC サーバーから送信されたFramebuffer の管理を行う</li>
|
|
|
186 </ul>
|
|
|
187 </li>
|
|
|
188 </ul>
|
|
24
|
189
|
|
|
190
|
|
|
191 </div>
|
|
|
192 <div class='slide '>
|
|
|
193 <!-- _S9SLIDE_ -->
|
|
|
194 <h1 id="treevnc-1">TreeVNCの通信量</h1>
|
|
|
195 <ul>
|
|
|
196 <li>ポート一本あたりの負荷
|
|
|
197 <ul>
|
|
|
198 <li>従来のVNC : Node数 * データ量</li>
|
|
|
199 <li>TreeVNC : (2(子供の数) + 1) * データ量</li>
|
|
|
200 </ul>
|
|
|
201 </li>
|
|
|
202 <li>従来のVNCはNode数に比例</li>
|
|
|
203 <li>TreeVNCは子供の数に関係するためNode数に関係なく一定</li>
|
|
|
204 </ul>
|
|
|
205
|
|
|
206
|
|
|
207 </div>
|
|
|
208 <div class='slide '>
|
|
|
209 <!-- _S9SLIDE_ -->
|
|
|
210 <h1 id="treevnc--1">TreeVNC の圧縮形式</h1>
|
|
|
211 <ul>
|
|
|
212 <li>TreeVNC は ZRLEE というエンコードでデータのやり取りを行う</li>
|
|
|
213 <li>ZRLEE は ZRLE を元に生成される</li>
|
|
|
214 </ul>
|
|
|
215
|
|
22
|
216
|
|
|
217 </div>
|
|
|
218 <div class='slide '>
|
|
|
219 <!-- _S9SLIDE_ -->
|
|
24
|
220 <h1 id="zrle">ZRLE</h1>
|
|
|
221 <ul>
|
|
|
222 <li>RFB プロトコルで使えるエンコーディングタイプの1つ</li>
|
|
|
223 <li>Zlib で圧縮されたデータとそのデータのバイト数がヘッダーとして付け加えられる</li>
|
|
|
224 <li>java.util.zip.deflater で圧縮, java.util.zip.inflater で解凍が行える</li>
|
|
|
225 </ul>
|
|
|
226
|
|
|
227
|
|
|
228 </div>
|
|
|
229 <div class='slide '>
|
|
|
230 <!-- _S9SLIDE_ -->
|
|
|
231 <h1 id="javautilzipdeflater-">java.util.zip.deflater の問題点</h1>
|
|
|
232 <ul>
|
|
|
233 <li>java.util.zip.deflater は必要な辞書を書き出す事ができない</li>
|
|
25
|
234 <li>そのためZlibで圧縮されたデータを途中から受け取ってもデータを正しく解凍できない</li>
|
|
24
|
235 </ul>
|
|
|
236
|
|
25
|
237 <p><img src="./images/ZRLE.svg" alt="message" width="800" /></p>
|
|
|
238
|
|
24
|
239
|
|
|
240 </div>
|
|
|
241 <div class='slide '>
|
|
|
242 <!-- _S9SLIDE_ -->
|
|
|
243 <h1 id="zrlee">ZRLEE</h1>
|
|
|
244 <ul>
|
|
25
|
245 <li>ZRLEE はZRLE を一度 Root Node で解凍して再圧縮を行う</li>
|
|
|
246 <li>再圧縮の際にfinish()を入れることで初めからデータを呼んでいなくても解凍を行える</li>
|
|
|
247 <li>一度 ZRLEE に変換すれば子 Node はそのデータをそのまま流すだけで良い</li>
|
|
24
|
248 </ul>
|
|
|
249
|
|
25
|
250 <p><img src="./images/ZRLEE.svg" alt="message" width="400" /></p>
|
|
|
251
|
|
24
|
252
|
|
|
253 </div>
|
|
|
254 <div class='slide '>
|
|
|
255 <!-- _S9SLIDE_ -->
|
|
|
256 <h1 id="treevnc--2">TreeVNC の通信経路</h1>
|
|
|
257 <ul>
|
|
25
|
258 <li>ある Node から Root Node に直接通信を行う send direct message (Node to Root)</li>
|
|
24
|
259 <li>Root Node からある Node に直接通信を行う send direct message (Root to Node)</li>
|
|
25
|
260 <li>Root Node から木の末端の Node までのすべての Node に通信を行う messeage down tree (Root to Node)</li>
|
|
24
|
261 <li>ある Node から木構造を上に辿って Root Node まで通信を行う message up tree (Node to Root)</li>
|
|
|
262 <li>Root Node から配信者の VNC サーバーへ の通信を行う send message (Root to VNC- Server)</li>
|
|
|
263 <li>VNC サーバーから Root Node への通信を行う send message (VNCServer to Root)</li>
|
|
|
264 </ul>
|
|
22
|
265
|
|
|
266
|
|
|
267 </div>
|
|
|
268 <div class='slide '>
|
|
|
269 <!-- _S9SLIDE_ -->
|
|
25
|
270 <h1 id="treevnc--3">TreeVNC に参加するまでのメッセージ通信の流れ</h1>
|
|
|
271 <table>
|
|
|
272 <tbody>
|
|
|
273 <tr>
|
|
|
274 <td><img src="./images/message.svg" alt="message" width="300" /></td>
|
|
|
275 <td>
|
|
|
276 <ul>
|
|
|
277 <li>接続を行う Node(以下 Client Node) は Multicast 通信で Root Node に対して FIND_ROOT を送信する(1:findRoot())</li>
|
|
|
278 <li>Root Node が FIND_ROOT を受信すると接続を行う Node に FIND_ROOT_REPLY を送信する (2:findRootReplay)</li>
|
|
|
279 <li>Client Node 側で、どの Root Node に接続するかを選択するパネルが表示される</li>
|
|
|
280 <li>Client Node はパネルで接続する Root Node を選択し、Root に対して接続先を要求 する WHERE_TO_CONNECT を送信する (3:whereToConnect())</li>
|
|
|
281 <li>受信した Root Node は Client Node の接続先を CONNECT_TO で送信する (4:connectTo)</li>
|
|
|
282 <li>Client Node は Root の指定した接続先に接続しに行く</li>
|
|
|
283 <li>Root Node, Client Node 間の接続が確立後 Root Node から Clinet Node に対して定期的に画像データ FRAME_BUFFER_UPDATE を送信する (5:framebufferUpdate())
|
|
|
284 </li>
|
|
|
285 </ul>
|
|
|
286 </td>
|
|
|
287 </tr>
|
|
|
288 </tbody>
|
|
|
289 </table>
|
|
22
|
290
|
|
|
291
|
|
|
292 </div>
|
|
|
293 <div class='slide '>
|
|
|
294 <!-- _S9SLIDE_ -->
|
|
25
|
295 <h1 id="section-4">切断時の木の再構成</h1>
|
|
24
|
296 <ul>
|
|
25
|
297 <li>TreeVNC はバイナリーツリーという特性上 Node の切断を検知できずにいると、Node 同士で構成された木構造が崩れてしまい、 木構造が崩れた状態で新しい Node が接続に来た場合に適切な場所に Node を接続することができない</li>
|
|
|
298 <li>木構造のネットワークトポロジーは Root Node が持っている nodeList というリストで管理している</li>
|
|
|
299 <li>Nodeの接続が切れた場合、木の再構成を行うため nodeListを更新する必要がある</li>
|
|
24
|
300 </ul>
|
|
|
301
|
|
|
302
|
|
|
303 </div>
|
|
|
304 <div class='slide '>
|
|
|
305 <!-- _S9SLIDE_ -->
|
|
25
|
306 <h1 id="section-5">切断時の木の再構成</h1>
|
|
|
307 <ul>
|
|
|
308 <li>TreeVNC は Node 切断の検知を LOST_CHILD というメッセージ通信で行っている</li>
|
|
|
309 <li>LOST_CHILD の検出方法は MulticastQueue という画像データを蓄積するキューを利用して行う</li>
|
|
|
310 <li>子 Node は 親 の MulticastQueue から画像データを取得し、画面を描画する</li>
|
|
|
311 <li>一定時間 MulticastQueue から画像データが取得されない場合 Memory Over Flow を回避するためにTimeout スレッドが用意されている</li>
|
|
|
312 <li>Timeout を検知した際、子 Node との接続が切れたと判断し、木を再構成する</li>
|
|
|
313 </ul>
|
|
|
314
|
|
|
315
|
|
|
316 </div>
|
|
|
317 <div class='slide '>
|
|
|
318 <!-- _S9SLIDE_ -->
|
|
|
319 <h1 id="lostchild">LOST_CHILDの例</h1>
|
|
24
|
320 <ul>
|
|
25
|
321 <li>子 Node の切断を検知した Node が Root Node へ LOST_CHILD メッセージを送信する (1:lostChild())</li>
|
|
|
322 <li>LOST_CHILD メッセージを受け取った Root Node は nodeList の更新を行う (2:updateNodeList())</li>
|
|
|
323 <li>切断した Node を nodeList から消し、 nodeList の最後尾の Node に切断した node number を割り当てる</li>
|
|
|
324 <li>Root Node は最後尾の Node に、切断した子 Node が接続していた親 Node に接続する様 に CONNECT_TO メッセージを送信する (3:connectTo(1))</li>
|
|
|
325 <li>最後尾の Node が子 Node を失った親 Node へ 接続しに行く (4:connectToParent(1))
|
|
|
326 <img src="./images/lostChild1.svg" alt="message" width="800" /></li>
|
|
|
327 </ul>
|
|
|
328
|
|
|
329
|
|
|
330 </div>
|
|
|
331 <div class='slide '>
|
|
|
332 <!-- _S9SLIDE_ -->
|
|
|
333 <h1 id="section-6">共有画面切り替え</h1>
|
|
|
334 <ul>
|
|
|
335 <li>TreeVNC の Root Node は配信者の VNC サーバーと通信を行っている</li>
|
|
|
336 <li>画面を配信されている側のビューワにある Share Screen ボタンが押されると木をたどり、 Root Node に SERVER_CHANGE_REQUEST メッセージを送信する</li>
|
|
|
337 <li>Root Node は Share Screen ボタンを押したクライアントの VNC サーバーと通信を始める。</li>
|
|
|
338 <li>そのため TreeVNC は配信者切り替えの度にVNCを終了し、再接続する必要がない。</li>
|
|
24
|
339 </ul>
|
|
22
|
340
|
|
|
341
|
|
|
342 </div>
|
|
|
343 <div class='slide '>
|
|
|
344 <!-- _S9SLIDE_ -->
|
|
|
345 <h1 id="quality--speed-">QUALITY モードと SPEED モード</h1>
|
|
25
|
346 <ul>
|
|
|
347 <li>高解像度のデータの描画処理はPCのスペックによって重くなる場合がある</li>
|
|
|
348 <li>画像描画処理には
|
|
|
349 <ul>
|
|
|
350 <li>高画質優先の QUALITY モード</li>
|
|
|
351 <li>描画速度優先の SPEED モード</li>
|
|
|
352 </ul>
|
|
|
353 </li>
|
|
|
354 <li>今まで QUALITY モード を使用していた(変更不可)</li>
|
|
|
355 <li>今回ビューワからユーザーがどちらのモードを使用するかを変更できるようにした</li>
|
|
|
356 <li>これにより描画処理の遅延が解決できると思われる</li>
|
|
|
357 </ul>
|
|
22
|
358
|
|
|
359
|
|
|
360 </div>
|
|
|
361 <div class='slide '>
|
|
|
362 <!-- _S9SLIDE_ -->
|
|
24
|
363 <h1 id="section-7">マルチディスプレイ</h1>
|
|
25
|
364 <ul>
|
|
|
365 <li>VNC サーバーからはすべての画面データが送信されてしまっていた</li>
|
|
|
366 <li>共有したいディスプレイを選択して共有するのが望ましい</li>
|
|
|
367 <li>画面切り替えの際のSERVER_CHANGE_REQUESTに共有するディスプレイの座標を付加する</li>
|
|
|
368 <li>Root Node は 接続した VNC サーバーから画像データを要求する FRAME_BUFFER_UPDATE_REQUEST メッセージに受け取った座標を付加する</li>
|
|
|
369 <li>VNC サーバーは要求された座標内の画像データを FRAME_BUFFER_UPDATE メッセージで Root Node に送信する
|
|
|
370 <img src="./images/shareScreenToMultiDisplay.svg" alt="message" width="800" /></li>
|
|
|
371 </ul>
|
|
22
|
372
|
|
|
373
|
|
|
374 </div>
|
|
|
375 <div class='slide '>
|
|
|
376 <!-- _S9SLIDE_ -->
|
|
24
|
377 <h1 id="section-8">複数ネットワークの対応</h1>
|
|
22
|
378
|
|
|
379
|
|
|
380 </div>
|
|
|
381 <div class='slide '>
|
|
|
382 <!-- _S9SLIDE_ -->
|
|
|
383 <h1 id="wan">WANへの対応</h1>
|
|
24
|
384
|
|
|
385
|
|
|
386 </div>
|
|
|
387 <div class='slide '>
|
|
|
388 <!-- _S9SLIDE_ -->
|
|
|
389 <h1 id="treevnc-2">TreeVNCの評価</h1>
|
|
|
390
|
|
|
391
|
|
|
392 </div>
|
|
|
393 <div class='slide '>
|
|
|
394 <!-- _S9SLIDE_ -->
|
|
|
395 <h1 id="section-9">まとめ</h1>
|
|
22
|
396 <!-- === end markdown block === -->
|
|
|
397 </div>
|
|
|
398
|
|
|
399
|
|
|
400 </div><!-- presentation -->
|
|
|
401 </body>
|
|
|
402 </html>
|
