|
0
|
1 <!DOCTYPE html>
|
|
|
2 <html>
|
|
|
3 <head>
|
|
|
4 <meta charset='utf-8'>
|
|
|
5 <title>Seminar</title>
|
|
|
6
|
|
|
7 <!--
|
|
|
8 Notes on CSS media types used:
|
|
|
9
|
|
|
10 1) projection -> slideshow mode (display one slide at-a-time; hide all others)
|
|
|
11 2) screen -> outline mode (display all slides-at-once on screen)
|
|
|
12 3) print -> print (and print preview)
|
|
|
13
|
|
|
14 Note: toggle between projection/screen (that is, slideshow/outline) mode using t-key
|
|
|
15
|
|
|
16 Questions, comments?
|
|
|
17 - send them along to the mailinglist/forum online @ http://groups.google.com/group/webslideshow
|
|
|
18 -->
|
|
|
19
|
|
|
20 <!-- style sheet links -->
|
|
|
21 <link rel="stylesheet/less" href="themes/blank/projection.css.less" media="screen,projection">
|
|
|
22 <link rel="stylesheet/less" href="themes/blank/screen.css.less" media="screen">
|
|
|
23 <link rel="stylesheet/less" href="themes/blank/print.css.less" media="print">
|
|
|
24
|
|
|
25 <link rel="stylesheet/less" href="blank.css.less" media="screen,projection">
|
|
|
26
|
|
|
27 <!-- Notes about less css support
|
|
|
28 - all less stylesheets (*.css.less) need to get listed/loaded first (before the less.js script)
|
|
|
29 - find more info about less.js online @ http://lesscss.org
|
|
|
30
|
|
|
31 ***** NOTE:
|
|
|
32 less.js browser script currently won’t work if you’re using Google Chrome
|
|
|
33 and the path to your page starts with "file:///" due to a known Chrome issue.
|
|
|
34 (In the developer/js console you will see:
|
|
|
35 XMLHttpRequest cannot load file:///../s6/shared/projection.css.less.
|
|
|
36 Cross origin requests are only supported for HTTP.)
|
|
|
37 -->
|
|
|
38
|
|
|
39 <!-- add js libs (less, jquery) -->
|
|
|
40 <script src="js/less-1.1.4.min.js"></script>
|
|
|
41 <script src="js/jquery-1.7.min.js"></script>
|
|
|
42
|
|
|
43 <!-- S6 JS -->
|
|
|
44 <script src="js/jquery.slideshow.js"></script>
|
|
|
45 <script src="js/jquery.slideshow.counter.js"></script>
|
|
|
46 <script src="js/jquery.slideshow.controls.js"></script>
|
|
|
47 <script src="js/jquery.slideshow.footer.js"></script>
|
|
|
48 <script src="js/jquery.slideshow.autoplay.js"></script>
|
|
|
49 <script>
|
|
|
50 $(document).ready( function() {
|
|
|
51 Slideshow.init();
|
|
|
52
|
|
|
53 // Example 2: Start Off in Outline Mode
|
|
|
54 // Slideshow.init( { mode: 'outline' } );
|
|
|
55
|
|
|
56 // Example 3: Use Custom Transition
|
|
|
57 // Slideshow.transition = transitionScrollUp;
|
|
|
58 // Slideshow.init();
|
|
|
59
|
|
|
60 // Example 4: Start Off in Autoplay Mode with Custom Transition
|
|
|
61 // Slideshow.transition = transitionScrollUp;
|
|
|
62 // Slideshow.init( { mode: 'autoplay' } );
|
|
|
63 } );
|
|
|
64 </script>
|
|
|
65
|
|
|
66 <!-- Better Browser Banner for Microsoft Internet Explorer (IE) -->
|
|
|
67 <!--[if IE]>
|
|
|
68 <script src="js/jquery.microsoft.js"></script>
|
|
|
69 <![endif]-->
|
|
|
70
|
|
|
71 </head>
|
|
|
72 <body>
|
|
|
73
|
|
|
74 <div class="layout">
|
|
|
75 <div id="header"></div>
|
|
|
76 <div id="footer">
|
|
|
77 <div align="right">
|
|
|
78 <img src="images/concurrency.png" width="200">
|
|
|
79 </div>
|
|
|
80 </div>
|
|
|
81 </div>
|
|
|
82
|
|
|
83 <div class="presentation">
|
|
|
84
|
|
|
85 <!-- add slides here; example -->
|
|
|
86
|
|
|
87 <div class='slide cover'>
|
|
|
88 <table width="90%" height="90%" border="0" align="center">
|
|
|
89 <tr>
|
|
|
90 <td><div align="center">
|
|
14
|
91 <h1><font color="#808db5">画面共有システムTreeVNCの研究</font></h1>
|
|
0
|
92 </div></td>
|
|
|
93 </tr>
|
|
|
94 <tr>
|
|
|
95 <td><div align="left">
|
|
|
96 Miwa Oshiro
|
|
|
97 <script>
|
|
|
98 var date = new Date();
|
|
|
99 var year = date.getFullYear();
|
|
|
100 var month = date.getMonth();
|
|
|
101 var day = date.getDate();
|
|
|
102
|
|
|
103 var monthList = new Array("January","February","March","April","May","June",
|
|
|
104 "July","August","September","October","November","December");
|
|
|
105
|
|
|
106 document.write(monthList[month]+" "+day+", "+year);
|
|
|
107
|
|
|
108 </script>
|
|
|
109 <hr style="color:#ffcc00;background-color:#ffcc00;text-align:left;border:none;width:300%;height:0.2em;">
|
|
|
110 </div></td>
|
|
|
111 </tr>
|
|
|
112 </table>
|
|
|
113 </div>
|
|
|
114
|
|
14
|
115 <div class='slide'>
|
|
|
116 <h2>研究目的</h2>
|
|
|
117 <p>多人数で意見を交わし合い、モチベーションを高めたい。</p>
|
|
|
118 <p>そこで多人数でのコミュニケーションの充実を測る。<br>
|
|
|
119 コミュニケーションの要素として、<br>
|
|
|
120 目的を共有し、意見・アイデア・質問を交わし合うことが必要である。</p>
|
|
|
121 <p>更に、遠隔地からでもその場の臨場感が味わえるようなシステムにしたい。</p>
|
|
|
122 </div>
|
|
0
|
123
|
|
|
124
|
|
|
125 <div class='slide'>
|
|
14
|
126 <h2>研究目的</h2>
|
|
|
127 <p>TreeVNCでは、多人数に画面を配信することによって、<br>
|
|
|
128 手元のPCで一つの画面を共有することができる。</p>
|
|
|
129
|
|
|
130 <p>画面の切り替えをスムーズに切り替えることができ、<br>
|
|
|
131 綺麗な画質を保ちながらリアルタイムで共有することができる。</p>
|
|
|
132
|
|
|
133 <p>更に、遠隔地からでもコミュニケーションに参加できるように、<br>
|
|
|
134 ルータを超えて画面を配信することができるようになる予定である。</p>
|
|
|
135 </div>
|
|
|
136
|
|
|
137
|
|
|
138 <div class='slide'>
|
|
|
139 <h2>やってきたこと</h2>
|
|
|
140 <ul>
|
|
|
141 <li>メールでpatchが送信出来るようにしました</li>
|
|
|
142 <li>HDサイズに拡大するボタンを追加しました</li>
|
|
|
143 <li>音声共有機能を実装しています</li>
|
|
|
144 </ul>
|
|
9
|
145 </div>
|
|
|
146
|
|
|
147 <div class='slide'>
|
|
14
|
148 <h2>メールでpatchを送信</h2>
|
|
13
|
149 <ul>
|
|
14
|
150 <li>方法はgame班のwikiにまとめました</li>
|
|
|
151 <li><a href="http://www.cr.ie.u-ryukyu.ac.jp/%7Egame/pukiwiki/index.php?Mercurial#n5c3405b" title="http://www.cr.ie.u-ryukyu.ac.jp/%7Egame/pukiwiki/index.php?Mercurial#n5c3405b">http://www.cr.ie.u-ryukyu.ac.jp/~game/pukiwiki/index.php?Mercurial#n5c3405b</a></li>
|
|
13
|
152 </ul>
|
|
|
153 </div>
|
|
10
|
154
|
|
13
|
155 <div class='slide'>
|
|
14
|
156 <h2>HDサイズに拡大するボタン(adjustHdSizeButton)</h2>
|
|
|
157 <ul>
|
|
|
158 <li>共有されている画面サイズの横幅を取得</li>
|
|
|
159 <ul>
|
|
|
160 <li>ServerChangeRequest時に1画面の大きさをrootに送信する</li>
|
|
|
161 <li>adjustHdSizeButtonボタンを押すと、rootに1画面分の横幅を要求するメッセージを送信する(REQUEST_SINGLE_DISPLAY_WIDTH)</li>
|
|
|
162 <li>rootはframebufferUpdateに載せて、1画面分の横幅を送信する(SEND_SINGLE_DISPLAY_WIDTH)</li>
|
|
|
163 </ul>
|
|
|
164 <li>デフォルトでscalFactorは100.0である</li>
|
|
|
165 <li>scaleFactor = (hdWidth / width) * defaultScaleFactor;</li>
|
|
|
166 <li>これをセットすることによって、横幅が1920に拡大される</li>
|
|
|
167 </ul>
|
|
0
|
168 </div>
|
|
|
169
|
|
|
170 <div class='slide'>
|
|
14
|
171 <h2>音声共有機能(shareSoundButton)</h2>
|
|
13
|
172 <ul>
|
|
14
|
173 <li>音声と画面を共有するボタンを追加</li>
|
|
|
174 <li>現時点では、node->rootのみ</li>
|
|
|
175 <li>ホストnodeで送信用Threadを立ち上げる</li>
|
|
|
176 <li>ホストnodeからrootへ受信用Threadを立ち上げるよう要求(READY_SHARE_SOUND)</li>
|
|
|
177 <li>送信用Threadから受信用Threadに音声データのpacketが送信される</li>
|
|
|
178 <img src="images/20150113/shareScreenAndSound.png" width="500" height="300">
|
|
|
179 </ul>
|
|
10
|
180 </div>
|
|
|
181
|
|
|
182 <div class='slide'>
|
|
14
|
183 <h2>問題</h2>
|
|
|
184 <ul>
|
|
|
185 <li>UDPで送信しているため、固定ポート番号ができてしまっていてデバッグがしにくい</li>
|
|
|
186 <ul>
|
|
|
187 <li>MulticastQueueにpacketをputする送信方法に変更したい</li>
|
|
|
188 </ul>
|
|
|
189 <li>他nodeには、rootからframebufferUpdateで音声データを流そうかと思っている</li>
|
|
|
190 <img src="images/20150113/sendSoundPacket.png" width="500" height="300">
|
|
|
191 </ul>
|
|
10
|
192 </div>
|
|
0
|
193
|
|
12
|
194 <div class='slide'>
|
|
14
|
195 <h2>画面共有のボタンはどちらが良いか</h2>
|
|
|
196 Mac OSX の画面共有アイコンを参考にしたイメージ
|
|
|
197 <img src="images/20150113/button-share.png" width="128" height="128">
|
|
|
198 <br>
|
|
|
199 ひとりが配信しているイラストのイメージ
|
|
|
200 <img src="images/20150113/button-sharer-3.png" width="128" height="128">
|
|
|
201 <img src="images/20150113/button-share-2.png" width="128" height="128">
|
|
|
202 </div>
|
|
|
203
|
|
|
204 <div class='slide'>
|
|
|
205 <h2>これからやること</h2>
|
|
13
|
206 <ul>
|
|
14
|
207 <li>音声共有機能の実装
|
|
|
208
|
|
|
209 <ul>
|
|
|
210 <li>node -> root間の送信方法変更</li>
|
|
|
211 <li>root -> 他nodeへの送信</li>
|
|
|
212 <li>送信・受信の終了処理追加</li>
|
|
|
213 </ul></li>
|
|
|
214 <li>ルータを越えた接続の実装</li>
|
|
|
215 <li>卒論</li>
|
|
13
|
216 </ul>
|
|
12
|
217 </div>
|
|
0
|
218
|
|
|
219 </div> <!-- presentation -->
|
|
|
220 </body>
|
|
|
221 </html>
|
