-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
177 lines (160 loc) · 10.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<html>
<head>
<meta charset="utf-8">
<title>A-FRAME samples</title>
</head>
<body>
<h1>A-FRAME Samples</h1>
This is a WebVR sample with A-FRAME, mainly for Oculus Go.<br />
これは A-Frame を利用した WebVR のサンプルで、Oculus Go を主な対象にしています。<br />
GitHub ... <a target="_blank" href="https://github.com/mganeko/aframe">https://github.com/mganeko/aframe</a>
<h2>Confirmed Environment / 動作確認環境 </h2>
<ul>
<li>Chrome 66 (64-bit) for MacOS X</li>
<li>Oculus Go Browser</li>
</ul>
<h2>Samples / サンプル</h2>
<h3>360 realtime video sample / 360度リアルタイム動画</h3>
Realtime video streaming sample over WebRTC. Using following porducts, service, library.
<ul>
<li>360 Camera ... <a target="_blank" href="https://theta360.com/en/about/theta/v.html">RICOH THETA V</a></li>
<li>WebRTC Platform ... <a target="_blank" href="https://webrtc.ecl.ntt.com/en/">SkyWay</a></li>
<li>WebVR Device/Browser ... <a target="_blank" href="https://www.oculus.com/go/">Oculus Go</a> Browser</li>
<li>WebVR library ... <a target="_blank" href="(https://aframe.io">A-FRAME</a></li>
</ul>
WebRTCを利用した360リアルタイム動画通信です。下記の製品、サービス、ライブラリを利用しています。
<ul>
<li>360 カメラ ... <a target="_blank" href="https://theta360.com/en/about/theta/v.html">RICOH THETA V</a></li>
<li>WebRTC プラットフォーム ... <a target="_blank" href="https://webrtc.ecl.ntt.com/en/">SkyWay</a></li>
<li>WebVR デバイス/ブラウザ ... <a target="_blank" href="https://www.oculus.com/go/">Oculus Go</a> ブラウザ</li>
<li>WebVR ライブラリ ... <a target="_blank" href="(https://aframe.io">A-FRAME</a></li>
</ul>
<h3>サンプル操作手順</h3>
<a target="_blank" href="https://mganeko.github.io/aframe/">GitHub pages (https://mganeko.github.io/aframe/)</a> で試すことができます。<br/>
RICOH THETA Vと Oculus Go（または他のWebVR対応のブラウザ)が必要です。
<h4>配信側</h4>
<ul>
<li>PC に RICOH THETA V をUSBで接続、Liveモードに設定</li>
<li>PCのChromeブラウザで、 <a target="_blank" href="https://mganeko.github.io/aframe/pc.html">https://mganeko.github.io/aframe/pc.html</a> を開く
<ul><li>Roomがランダムに割り振られます。変更することも可能です</li></ul>
</li>
<li>[Get Devices]ボタンをクリックすると、利用可能な Videoデバイス(カメラ)、Audioデバイス(マイク)のリストを取得します
<ul>
<li>カメラ、マイクへのアクセスを聞かれるので、許可してください</li>
<li>THETA V が見つかれば、自動的に選択されます</li>
<li>THETA V を接続していても検出できない場合は、Chromeを一旦終了して、再度起動して見てください</li>
</ul>
</li>
<li>[Start Video] ボタンをクリックしてください
<ul><li>映像と音声が取得され、ブラウザ内に表示されます</li></ul>
</li>
<li>[Connect] ボタンをクリックしてください
<ul>
<li>SkyWay に接続され、指定されたRoomに参加します</li>
<li>自分の映像の下に、Oculus Go で接続するためのURLが表示されます</li>
<li>このURLを、Oculus Go のブラウザ（あるいは、他のWebVR 対応のブラウザ）で開くと映像を見ることができます</li>
</ul>
</li>
<br />
<li>配信を停止する場合には [Disconnect] → [Stop Video] の順にボタンをクリックしてください</li>
</ul>
<h4>視聴側 (Oculus Go)</h4>
<ul>
<li>Oculus Go のブラウザ（あるいは、他のWebVR 対応のブラウザ）を起動してください</li>
<li>配信側で表示されたURLを、ブラウザでアクセスします
<ul>
<li>
あらかじめ <a target="_blank" href="https://mganeko.github.io/aframe/go.html?room=">https://mganeko.github.io/aframe/go.html?room=</a> までをブックマークに入れておき、最後にroom名だけ追加すると手間が少なくなるのでお勧めです
</li>
<li>
または <a target="_blank" href="https://mganeko.github.io/aframe/g.html">https://mganeko.github.io/aframe/g.html</a> を経由してroom名を入力後、[送信]ボタンをクリックすることも可能です
</li>
</ul>
</li>
<li>しばらくロードの時間がかかります
<ul><li>A-FRAMEの準備ができたら 中央にメッセージが表示されます</li></ul>
</li>
<li>画面をクリックしてください（Oculus Goのコントローラーでトリガーを引く）
<ul>
<li>SkyWay に接続され、指定されたRoomに参加します</li>
<li>PCに接続されている THETA V の360ど映像が表示されます</li>
</ul>
</li>
<li>右下の VRモードボタンをクリックすると、360度モードになります（カーソルを合わせてOculus Goのコントローラーでトリガーを引く）
<ul><li>自分の頭の向いている方向に応じて、映像の見える方向が変わります</li></ul>
</li>
<br />
<li>360度モードを抜けるには コントローラの[戻る]ボタンを押します</li>
<li>Skywayの接続を切る処理は未実装です。リロードするか、他のページに移動してください</li>
</ul>
<h3>How to use sample</h3>
Please try on <a target="_blank" href="https://mganeko.github.io/aframe/">GitHub pages (https://mganeko.github.io/aframe/)</a><br/>
You need RICOH THETA V and Oculus Go (or other WebVR ready browser).
<h4>Stream 360 realtime video from PC</h4>
<ul>
<li>Connect RICOH THETA V to your PC with USB, then start as Live mode.</li>
<li>Open with desktop Chrome: <a target="_blank" href="https://mganeko.github.io/aframe/pc.html">https://mganeko.github.io/aframe/pc.html</a>
<ul><li>Room name will be decided by random. You can modify room name if you want.</li></ul>
</li>
<li>Click [Get Devices] button, then list of video/audio devices will be made.
<ul>
<li>Please allow access to camera / microphone.</li>
<li>THETA V will be selected if exists.</li>
<li>If it failed to detect THETA V, pleaset quit and restart Chrome.</li>
</ul>
</li>
<li>Click [Start Video] button.
<ul><li>Video / Audio will be captured, and shown in the browser.</li></ul>
</li>
<li>Click [Connect] Button.
<ul>
<li>Connect to SkyWay, then join to the specified room.</li>
<li>URL for Oculus Go will be appear below video.</li>
<li>Open this URL with Oculus Go browser (or other WebVR ready browser), to watch 360 realtime video. (See next section)</li>
</ul>
</li>
<br />
<li>To stop streaming, click [Disconnect] button, then click [Stop Video] button.</li>
</ul>
<h4>Watch 360 realtime video with Oculus Go</h4>
<ul>
<li>Start Oculus Go browser (or other WebVR ready browser).</li>
<li>Open the URL which shown in the streaming PC.
<ul>
<li>
It is better to bookmark <a target="_blank" href="https://mganeko.github.io/aframe/go.html?room=">https://mganeko.github.io/aframe/go.html?room=</a> in advance. Then add room name at the end of URL.
</li>
<li>
Or, open <a target="_blank" href="https://mganeko.github.io/aframe/g.html">https://mganeko.github.io/aframe/g.html</a> and type room name, then submit.
</li>
</ul>
</li>
<li>Loading will take a while.
<ul><li>When A-FRAME is ready, a message will appear in the center of browser window.</li></ul>
</li>
<li>Click the browser windows (point and trigger Oculus Go controller).
<ul>
<li>Connect to SkyWay, then join to the specified room.</li>
<li>360 realtime video form the PC will be played in Oculus Go Browser.</li>
</ul>
</li>
<li>Click VR mode button at the right bottom corner (point and trigger Oculus Go controller), then enter 360 VR mode.
<ul><li>You can look around with Oculus Go.</li></ul>
</li>
<br />
<li>To exit 360 VR mode, push [back] button of Oculus Go controller.</li>
<li>To disconnect from Skyway, please reload or move to other page.</li>
</ul>
<h3>Source code / ソーコード</h3>
GitHub ... <a target="_blank" href="https://github.com/mganeko/aframe">https://github.com/mganeko/aframe</a>
<ul>
<li><a target="_blank" href="https://github.com/mganeko/aframe/blob/master/pc.html">pc.html</a> ... Streaming 360 video, with Desktop Chrome and RICOH THETA V</li>
<li><a target="_blank" href="https://github.com/mganeko/aframe/blob/master/go.html">go.html</a> ... Watching 360 video, with Oculus Go or other WebVR ready Browsers</li>
</ul>
<h3>License / ライセンス</h3>
<ul>
<li>This sample is under the MIT license</li>
<li>このサンプルはMITランセンスで提供されます</li>
</ul>
</body>
</html>