Mercurial > hg > Papers > 2019 > riono-sigos
annotate Slide/slide.html @ 41:565b8345d7ef
update slide
| author | e165729 <e165729@ie.u-ryukyu.ac.jp> |
|---|---|
| date | Wed, 29 May 2019 18:15:08 +0900 |
| parents | b48db21c9d66 |
| children | eeb79bcffe76 |
| rev | line source |
|---|---|
| 32 | 1 |
| 2 | |
| 3 | |
| 4 | |
| 5 | |
| 6 <!DOCTYPE html> | |
| 7 <html> | |
| 8 <head> | |
| 9 <meta http-equiv="content-type" content="text/html;charset=utf-8"> | |
| 10 <title>画面配信システム TreeVNC のマルチキャストの導入</title> | |
| 11 | |
| 12 <meta name="generator" content="Slide Show (S9) v4.0.1 on Ruby 2.3.7 (2018-03-28) [universal.x86_64-darwin18]"> | |
| 13 <meta name="author" content="Ryo Yasuda, Shinji Kono" > | |
| 14 | |
| 15 <!-- style sheet links --> | |
| 16 <link rel="stylesheet" href="s6/themes/projection.css" media="screen,projection"> | |
| 17 <link rel="stylesheet" href="s6/themes/screen.css" media="screen"> | |
| 18 <link rel="stylesheet" href="s6/themes/print.css" media="print"> | |
| 19 <link rel="stylesheet" href="s6/themes/blank.css" media="screen,projection"> | |
| 20 | |
| 21 <!-- JS --> | |
| 22 <script src="s6/js/jquery-1.11.3.min.js"></script> | |
| 23 <script src="s6/js/jquery.slideshow.js"></script> | |
| 24 <script src="s6/js/jquery.slideshow.counter.js"></script> | |
| 25 <script src="s6/js/jquery.slideshow.controls.js"></script> | |
| 26 <script src="s6/js/jquery.slideshow.footer.js"></script> | |
| 27 <script src="s6/js/jquery.slideshow.autoplay.js"></script> | |
| 28 | |
| 29 <!-- prettify --> | |
| 30 <link rel="stylesheet" href="scripts/prettify.css"> | |
| 31 <script src="scripts/prettify.js"></script> | |
| 32 | |
| 33 <script> | |
| 34 $(document).ready( function() { | |
| 35 Slideshow.init(); | |
| 36 | |
| 37 $('code').each(function(_, el) { | |
| 38 if (!el.classList.contains('noprettyprint')) { | |
| 39 el.classList.add('prettyprint'); | |
| 40 } | |
| 41 }); | |
| 42 prettyPrint(); | |
| 43 } ); | |
| 44 | |
| 45 </script> | |
| 46 | |
| 47 <!-- Better Browser Banner for Microsoft Internet Explorer (IE) --> | |
| 48 <!--[if IE]> | |
| 49 <script src="s6/js/jquery.microsoft.js"></script> | |
| 50 <![endif]--> | |
| 51 | |
| 52 | |
| 53 | |
| 54 </head> | |
| 55 <body> | |
| 56 | |
| 57 <div class="layout"> | |
| 58 <div id="header"></div> | |
| 59 <div id="footer"> | |
| 60 <div align="right"> | |
| 61 <img src="s6/images/logo.svg" width="200px"> | |
| 62 </div> | |
| 63 </div> | |
| 64 </div> | |
| 65 | |
| 66 <div class="presentation"> | |
| 67 | |
| 68 <div class='slide cover'> | |
| 69 <table width="90%" height="90%" border="0" align="center"> | |
| 70 <tr> | |
| 71 <td> | |
| 72 <div align="center"> | |
| 73 <h1><font color="#808db5">画面配信システム TreeVNC のマルチキャストの導入</font></h1> | |
| 74 </div> | |
| 75 </td> | |
| 76 </tr> | |
| 77 <tr> | |
| 78 <td> | |
| 79 <div align="left"> | |
| 80 Ryo Yasuda, Shinji Kono | |
| 81 並列信頼研 | |
| 82 <hr style="color:#ffcc00;background-color:#ffcc00;text-align:left;border:none;width:100%;height:0.2em;"> | |
| 83 </div> | |
| 84 </td> | |
| 85 </tr> | |
| 86 </table> | |
| 87 </div> | |
| 88 | |
| 89 | |
| 90 | |
| 91 <div class='slide'> | |
| 92 <!-- <\!-- slideshow の command -\-> --> | |
| 93 <!-- slide.htmlでは通常キーでのコマンドが存在している --> | |
| 94 | |
| 95 <!-- p,a,s : スライドを自動送り(1,2...) --> | |
| 96 <!-- : スライドを逆方向に自動送り(...,2,1) --> | |
| 97 <!-- n : Page数を on/off --> | |
| 98 <!-- f : 右下ロゴの on/off --> | |
| 99 <!-- t : slide.html.pdf に変更 --> | |
| 100 <!-- c : 右下スライド移動用UIの on/off --> | |
| 101 <!-- d : ロゴ部分の選択…？ --> | |
| 102 <!-- [URL](http://~~~) --> | |
| 103 <!-- [FILE](file:///Users/ryokka/~~~) --> | |
| 104 <!-- slideshow build スライド.md -t s6cr --> | |
| 105 | |
|
36
322aad31566d
fix slide and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
35
diff
changeset
|
106 <!-- ## 目次 |
|
322aad31566d
fix slide and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
35
diff
changeset
|
107 - **TreeVNC の概要** |
|
322aad31566d
fix slide and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
35
diff
changeset
|
108 - **基本概念** |
|
322aad31566d
fix slide and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
35
diff
changeset
|
109 - **構造** |
|
322aad31566d
fix slide and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
35
diff
changeset
|
110 - 研究内容 |
|
322aad31566d
fix slide and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
35
diff
changeset
|
111 - TreeVNC の改良 |
|
322aad31566d
fix slide and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
35
diff
changeset
|
112 - 送信データの Blocking |
|
322aad31566d
fix slide and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
35
diff
changeset
|
113 --> |
|
322aad31566d
fix slide and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
35
diff
changeset
|
114 |
| 32 | 115 |
| 116 <!-- _S9SLIDE_ --> | |
| 117 <h2 id="画面配信システムの活用">画面配信システムの活用</h2> | |
| 118 <ul> | |
|
37
eb2dbbcaa96e
slide Rewriting and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
36
diff
changeset
|
119 <li>講義やゼミではプロジェクタを使用して、先生が用意した資料を見ることが多い。その際接続不良など、物理的アクシデントが起きる恐れがある</li> |
|
eb2dbbcaa96e
slide Rewriting and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
36
diff
changeset
|
120 <li>画面配信システムで代用する場合がある。画面配信システムのとしてはAppleTVやUstreamなどが挙げられる |
|
eb2dbbcaa96e
slide Rewriting and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
36
diff
changeset
|
121 <ul> |
|
eb2dbbcaa96e
slide Rewriting and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
36
diff
changeset
|
122 <li>AppleTVは画面共有先がTVに限定されている</li> |
|
eb2dbbcaa96e
slide Rewriting and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
36
diff
changeset
|
123 <li>Ustreamは画面の切り替えを行うことができない</li> |
|
eb2dbbcaa96e
slide Rewriting and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
36
diff
changeset
|
124 </ul> |
|
eb2dbbcaa96e
slide Rewriting and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
36
diff
changeset
|
125 </li> |
|
eb2dbbcaa96e
slide Rewriting and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
36
diff
changeset
|
126 </ul> |
|
eb2dbbcaa96e
slide Rewriting and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
36
diff
changeset
|
127 |
|
eb2dbbcaa96e
slide Rewriting and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
36
diff
changeset
|
128 <center><img src="./fig/AppleTVRogo.svg " alt="message" width="200" height="200" /> |
|
eb2dbbcaa96e
slide Rewriting and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
36
diff
changeset
|
129 <img src="./fig/UstreamRogo.svg" alt="message" width="200" height="150" /></center> |
|
eb2dbbcaa96e
slide Rewriting and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
36
diff
changeset
|
130 |
|
eb2dbbcaa96e
slide Rewriting and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
36
diff
changeset
|
131 |
|
eb2dbbcaa96e
slide Rewriting and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
36
diff
changeset
|
132 |
|
eb2dbbcaa96e
slide Rewriting and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
36
diff
changeset
|
133 </div> |
|
eb2dbbcaa96e
slide Rewriting and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
36
diff
changeset
|
134 |
|
eb2dbbcaa96e
slide Rewriting and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
36
diff
changeset
|
135 <div class='slide'> |
|
eb2dbbcaa96e
slide Rewriting and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
36
diff
changeset
|
136 <!-- _S9SLIDE_ --> |
|
eb2dbbcaa96e
slide Rewriting and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
36
diff
changeset
|
137 <h2 id="画面配信システムの活用-1">画面配信システムの活用</h2> |
|
eb2dbbcaa96e
slide Rewriting and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
36
diff
changeset
|
138 <ul> |
| 39 | 139 <li>画面配信システムTreeVNCは、自身のPC画面を他者のPCと共有できるソフトウェアである</li> |
| 140 <li>javaで書かれているためOSに依存せず、物理的な制限なしに使用可能</li> | |
| 38 | 141 <li>TreeVNCを使用することで、参加者は手元のPCを使用しながら講義を受ける事が可能になる。切り替えの際も、ボタン一つで共有する画面の切替を可能としている</li> |
| 32 | 142 </ul> |
| 143 | |
| 144 | |
| 145 | |
| 146 </div> | |
| 147 | |
| 148 <div class='slide'> | |
| 149 <!-- _S9SLIDE_ --> | |
| 38 | 150 <h2 id="treevncとは">TreeVNCとは</h2> |
| 151 <ul> | |
| 152 <li>TreeVNCは本研究室で開発している画面配信システム</li> | |
| 153 <li>VNC(リモートデスクトップソフトウェア)を利用している</li> | |
| 154 <li>木構造の接続方式によりNode間で画像データのやりとりを行うことで、配信側の負荷を分散し大人数での画面配信が可能</li> | |
| 155 </ul> | |
| 156 | |
| 157 <center><img src="./fig/treevnc-crop.svg" alt="message" width="450" height="350" /></center> | |
| 158 | |
| 159 | |
| 160 | |
| 161 </div> | |
| 162 | |
| 163 <div class='slide'> | |
| 164 <!-- _S9SLIDE_ --> | |
| 39 | 165 <h2 id="本研究の概要">本研究の概要</h2> |
| 166 <ul> | |
| 167 <li>画面配信は送信するデータ量が多いため、TreeVNCでは無線接続の場合、画面配信の遅延が大きくなってしまう</li> | |
| 168 <li>現在のTreeVNCのデータ転送方法だと、無線接続で送信するには大きすぎる</li> | |
| 40 | 169 <li>本研究ではMulticastを導入することで、Wifi環境下における画面配信の遅延対策の検討を行なった</li> |
| 39 | 170 </ul> |
| 38 | 171 |
| 172 | |
| 173 | |
| 174 </div> | |
| 175 | |
| 176 <div class='slide'> | |
| 177 <!-- _S9SLIDE_ --> | |
| 40 | 178 <h2 id="multicastについて">Multicastについて</h2> |
| 179 <ul> | |
| 180 <li>WifiのMulticast機能を利用することで無線LAN接続時でも画面遅延を軽減できると考える</li> | |
| 181 <li>配信PC画面の変更があった部分のみをマルチキャストで送信する</li> | |
| 182 <li>wifiのMulticast Paketの最大サイズは64KBとなっているため、データの圧縮が必要</li> | |
| 183 </ul> | |
| 39 | 184 |
| 185 | |
| 186 | |
| 187 </div> | |
| 188 | |
| 189 <div class='slide'> | |
| 190 <!-- _S9SLIDE_ --> | |
| 41 | 191 <h2 id="multicastの具体的な実装方法">Multicastの具体的な実装方法</h2> |
| 40 | 192 <ul> |
| 41 | 193 <li>TreeVNCで利用している画面データ送信プロトコル、RFBプロトコル</li> |
| 40 | 194 <li></li> |
| 195 <li></li> | |
| 41 | 196 </ul> |
| 197 | |
| 198 | |
| 199 | |
| 200 </div> | |
| 201 | |
| 202 <div class='slide'> | |
| 203 <!-- _S9SLIDE_ --> | |
| 204 <h2 id="圧縮形式">圧縮形式</h2> | |
| 205 | |
| 206 | |
| 207 | |
| 208 </div> | |
| 209 | |
| 210 <div class='slide'> | |
| 211 <!-- _S9SLIDE_ --> | |
| 212 <h2 id="ブロッキング">ブロッキング</h2> | |
| 213 | |
| 214 | |
| 215 | |
| 216 </div> | |
| 217 | |
| 218 <div class='slide'> | |
| 219 <!-- _S9SLIDE_ --> | |
| 220 <h2 id="rfb-プロトコル">RFB プロトコル</h2> | |
| 221 <ul> | |
| 222 <li>RFB (Remote Frame Buffer) プロトコルは、自身の画面をネットワークを通じて送信し他者の画面に表示するプロトコル</li> | |
| 223 <li>他人のPC画面が表示される側と、FrameBufferへの更新が行われる(自身のPC画面を送信する)側に分かれ、それぞれをRFBクライアント、RFBサーバと呼ぶ</li> | |
| 224 <li>FrameBufferは、メモリ上に置かれた画像データのこと</li> | |
| 40 | 225 </ul> |
| 32 | 226 |
| 227 | |
| 228 | |
| 229 </div> | |
| 230 | |
| 231 <div class='slide'> | |
| 232 <!-- _S9SLIDE_ --> | |
| 233 <h2 id="vnc">VNC</h2> | |
| 234 <ul> | |
| 235 <li>VNC(Virtual Network Computing)は、RFBプロトコルを用いてPCの遠隔操作を行うことを目的としたリモートデスクトップソフトウェア</li> | |
| 236 <li>サーバー側とクライアント側に分かれており、起動したサーバーにクライアントが接続することで遠隔操作を可能にしている</li> | |
| 237 <li>全てのNodeが一台のサーバーに接続するため負担が大きい</li> | |
| 238 </ul> | |
| 239 | |
|
37
eb2dbbcaa96e
slide Rewriting and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
36
diff
changeset
|
240 <center><img src="./fig/vnc-crop.svg" alt="message" width="500" height="400" /></center> |
| 32 | 241 |
| 40 | 242 <!-- ## TreeVNC の構造 |
| 243 - TreeVNCは接続してきたクライアントをNodeとし、木構造状に管理する | |
| 244 - ルートのノードをRoot Nodeと呼び、その下に新たなNodeを接続していく | |
| 245 - Root Nodeが参照しているVNCServerからFrameBufferUpdateを取得し、各Nodeに送信する | |
| 246 - 木構造状に接続することで、画像データのコピーを各Nodeに負担させることができる | |
| 32 | 247 |
| 40 | 248 <center><img src="./fig/treevnc-crop.svg" alt="message" width="450" height="350"></center> |
|
33
762fe0e406e4
add new imange and update slide
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
32
diff
changeset
|
249 |
|
762fe0e406e4
add new imange and update slide
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
32
diff
changeset
|
250 |
| 40 | 251 ## 木構造の再構成 |
| 252 - Nodeが切断されたことを検知できなければ木構造が維持できない | |
| 253 - Root Nodeが木構造のネットワークトポロジーを管理しているため、Root NodeにNodeの切断を知らせる必要がある | |
| 254 - 切断検知には画像データが入っているMulticastQueueを使用 | |
| 255 - MulticastQueueから画像データが一定時間取得されず、Timeoutを検知した場合切断したと判断する | |
|
33
762fe0e406e4
add new imange and update slide
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
32
diff
changeset
|
256 |
| 40 | 257 ## 画像データのエンコード方法 |
| 258 - TreeVNCではZRLEというエンコードタイプを元にした、ZRLEEというエンコードを用いて画像データを圧縮を行う | |
| 259 - ZRLEはZlibで圧縮されたデータとそのデータのバイト数がヘッダーとして送られる | |
| 260 - Zlibとはデータの可逆圧縮アルゴリズムが実装されているライブラリ | |
| 32 | 261 |
| 40 | 262 ## 画像データのエンコード方法 |
| 263 - ZRLEでは解凍時に必要な辞書データを書き出すことができない | |
| 264 - ZRLEEはRoot Nodeで受け取ったZRLEのデータを一度解凍し、辞書データを付与して再圧縮している | |
| 265 | |
| 266 <center><img src="./fig/EncodeZRLEE.svg" alt="message" width="550" height="450"></center> | |
|
36
322aad31566d
fix slide and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
35
diff
changeset
|
267 |
| 40 | 268 ## 共有画面切り替え |
| 269 - 従来のVNCでは、配信者が切り替わるたびに再起動、再接続を行う必要があった | |
| 270 - TreeVNCでは、画面上にあるShareScreenボタンを押すことで配信者の切り替えが実行できる | |
| 271 - ShareScreen実行後、Root Nodeに対しSERVER CHANGE REQUESTというメッセージが送信される | |
| 272 - メッセージを受け取ったRoot Nodeは配信を希望しているNodeのVNCサーバーと通信を行い、切り替え作業に入る | |
| 32 | 273 |
| 40 | 274 <center><img src="./fig/ShareScreenSS.svg" alt="message" width="400" height="300"></center> |
| 32 | 275 |
| 40 | 276 ## 有線接続との接続の違い |
| 277 - 現状のTreeVNCでは画面配信のデータ量は多く、無線LAN接続を行うと画面配信の遅延が大きくなる | |
| 278 - WifiのMulticast機能を利用し、UpdateRectangleを一度だけ送信することで無線LAN接続でも十分に遅延が抑えられると考える | |
| 279 - HDや4kの画面更新には64MB程度となり、これを圧縮しつつwifiのMulticast paketの最大サイズ64KBに変換、送信する必要がある | |
| 280 - paket lossがあった場合、再送処理は複雑であると予想できるため、まずBlokingによる実験を行う | |
| 32 | 281 |
| 40 | 282 ## RFBプロトコルのUpdateRectangleの構成 |
| 283 - 1つのUpdateRectangleには複数のRectangleが格納されている | |
| 284 - RectangleはZlibで圧縮されたデータが指定された長さだけ格納されており、そのデータはさらに64x64 ByteのTileに分割されている | |
| 285 | |
| 286 ## RFBプロトコルのUpdateRectangleの構成 | |
| 287 - 無線接続の場合、一度に送信できるデータ量が64KBしかないため、それに合わせて更新された部分のRectangleを分割する必要がある | |
| 288 - Phase0 行の途中から始まる部分 | |
| 289 - Phase1 行の最初から最後までの部分 | |
| 290 - Phase2 行の途中で終わる部分 | |
| 291 | |
| 292 <center><img src="./fig/FrameUpdateRectangleColor.svg" alt="message" width="550" height="450"></center> | |
| 32 | 293 |
| 294 | |
| 40 | 295 ## 木構造とマルチキャストの共存 |
| 296 - ツリーに無線接続のNodeを加えてしまうと全体の配信遅延に繋がる | |
| 297 - 無線接続時のMulticastの実装を提案 | |
| 298 - Multicastならば、Serverからの送信は一度で済むため、ツリー構造の形成が必要ない | |
| 299 - 従って新しいNodeが無線接続であっても、有線接続のツリーの配信には影響が出ない | |
|
37
eb2dbbcaa96e
slide Rewriting and add images
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
36
diff
changeset
|
300 |
| 40 | 301 <center><img src="./fig/interface-crop.svg" alt="message" width="500" height="450"></center> |
| 302 --> | |
|
33
762fe0e406e4
add new imange and update slide
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
32
diff
changeset
|
303 |
|
762fe0e406e4
add new imange and update slide
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
32
diff
changeset
|
304 |
|
762fe0e406e4
add new imange and update slide
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
32
diff
changeset
|
305 |
|
762fe0e406e4
add new imange and update slide
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
32
diff
changeset
|
306 </div> |
|
762fe0e406e4
add new imange and update slide
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
32
diff
changeset
|
307 |
|
762fe0e406e4
add new imange and update slide
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
32
diff
changeset
|
308 <div class='slide'> |
|
762fe0e406e4
add new imange and update slide
e165729 <e165729@ie.u-ryukyu.ac.jp>
parents:
32
diff
changeset
|
309 <!-- _S9SLIDE_ --> |
| 32 | 310 <h2 id="まとめ">まとめ</h2> |
| 311 <ul> | |
| 35 | 312 <li>WifiでMulticast paketを利用する手法についての考察を行なった |
| 32 | 313 <ul> |
| 35 | 314 <li>Wifiの速度とMulticastの信頼性が高ければ実用的である可能性がある</li> |
| 315 <li>Blockingは実装中、再圧縮の時間は実用的な時間で済むと予想されている</li> | |
| 32 | 316 </ul> |
| 317 </li> | |
| 318 <li>今後の課題 | |
| 319 <ul> | |
| 35 | 320 <li>Blockingの実装</li> |
| 321 <li>WifiのMulticast paket lossは接続環境や状況に依存すると思われるためさらなる実験が必要</li> | |
| 322 <li>Node接続じの有線接続と無線接続の判断、区別処理の実装</li> | |
| 32 | 323 </ul> |
| 324 </li> | |
| 325 </ul> | |
| 326 | |
| 35 | 327 |
| 32 | 328 </div> |
| 329 | |
| 330 | |
| 331 </div><!-- presentation --> | |
| 332 </body> | |
| 333 </html> |