-
Notifications
You must be signed in to change notification settings - Fork 36
/
index.html
133 lines (122 loc) · 9.23 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WebRTC Exp JP</title>
</head>
<h2>WebRTC 実験室</h2>
githubは<a href="https://github.com/mganeko/webrtcexpjp">こちら</a>
<hr />
<h3>Qiita記事のサンプル</h3>
<ul>
<li>Qiitaの記事 <a target="_blank" href="http://qiita.com/massie_g/items/5a6c4b69374d5997dc37">WebRTCを試すときにオッサンが映り続ける問題に対処する</a></li>
<li>→そのサンプル <a target="_blank" href="tool/file_to_stream.html">ローカルの映像/音声ファイルをメディアストリームに変換</a></li>
<li>Qiitaの記事 <a target="_blank" href="https://qiita.com/massie_g/items/0635a212f5860fe59047">WebRTCオッサン問題を超えて。ローカルファイルを自在に操りたい</a></li>
<li>→そのサンプル <a target="_blank" href="tool/switch_to_stream.html">2つの映像ファイルを、効果をつけながら切り替え</a></li>
<li>Qiitaの記事 <a target="_blank" href="https://qiita.com/massie_g/items/0635a212f5860fe59047">すべてのオッサンをWebRTCで配信される前に360度映像から消し去りたい</a></li>
<li>→そのサンプル <a target="_blank" href="tool/mask_face.html">カメラの映像に静止画でマスクをかけて、自分の姿を消す。顔検出も試してみた</a></li>
</ul>
<h3>HTML5Experts.jp WebRTC入門2016サンプル</h3>
<a target="_blank" href="https://html5experts.jp/series/webrtc2016/">WebRTC入門2016はこちら</a>
<h4>(1) カメラを使ってみよう</h4>
HTML5Experts.jpの<a target="_blank" href="https://html5experts.jp/mganeko/19728/">記事はこちら</a>
<ul>
<li>新しいAPIでカメラを使ってみよう <a target="_blank" href="basic2016/camera_new.html">mediaDevice.getUserMedia</a>(Chromeはフラグ設定が必要）</li>
<li>新旧getUserMedia()をラップしてみよう <a target="_blank" href="basic2016/camera_old_new.html">wrap old/new getUserMedia</a></li>
<li>CSS3と組み合わせてみよう <a target="_blank" href="basic2016/camera_css_wrap.html">getUserMedia and CSS</a></li>
</ul>
<h4>(2) 手動でシグナリングをやってみよう</h4>
<ul>
<li>基本の手動シグナリング <a target="_blank" href="basic2016/hand_signaling.html">手動シグナリング(Vanilla ICE)</a></li>
</ul>
<h4>手動でシグナリング番外編</h4>
<ul>
<li>Safari TP32でも動く、ontrack/addTrack対応版 <a target="_blank" href="basic2016/hand_signaling_track.html">ontrack/addTrack対応手動シグナリング</a></li>
<li>手動シグナリングでDataChannelを接続、その後はDataChannelでシグナリング <a target="_blank" href="basic2016/datachannel_signaling_track.html">DataChannelでtrack処理をシグナリング</a></li>
<li>adapter.jsを使って手動シグナリング <a target="_blank" href="basic2016/hand_signaling_adapter.html">adapter.jsで手動シグナリング</a></li>
<li>手動シグナリングでSDPを変更 <a target="_blank" href="basic2016/hand_signaling_modify.html">手動シグナリングでSDP変更</a></li>
</ul>
<h4>(3) WebSocketを使ったシグナリングサーバーを使おう</h4>
<ul>
<li>WebSocketを使ったシグナリング<a target="_blank" href="http://mganeko.github.io/webrtcexpjp/basic2016/ws_signaling_1to1_vanilla.html">自動シグナリング(Vanilla ICE)</a></li>
<li>WebSocketを使ったシグナリング<a target="_blank" href="http://mganeko.github.io/webrtcexpjp/basic2016/ws_signaling_1to1_trickle.html">自動シグナリング(Trickle ICE)</a></li>
<li>node.js用シグナリングサーバーのコード<a target="_blank" href="https://github.com/mganeko/webrtcexpjp/blob/master/basic2016/server/signaling.js">signaling.js</a></li>
<li>Chrome appの簡易WebSocketサーバー<a target="_blank" href="https://chrome.google.com/webstore/detail/simple-message-server/bihajhgkmpfnmbmdnobjcdhagncbkmmp">Simple Message Server</a></li>
</ul>
<h4>(4) シグナリングを拡張して、多人数でビデオチャットしよう</h4>
<ul>
<li>socket.ioを使って、多人数ビデオチャット<a target="_blank" href="http://mganeko.github.io/webrtcexpjp/basic2016/multi.html">多会議室、多人数対応ビデオチャット</a> (※このまま動くのはFirefoxのみ）</li>
<li>node.jsとsocket.ioを使った、多会議室、多人数対応のシグナリングサーバーのコード<a target="_blank" href="https://github.com/mganeko/webrtcexpjp/blob/master/basic2016/server/signaling_room.js">signaling_room.js</a></li>
</ul>
<h4>(5) 番外編：Firebaseで楽々シグナリング </h4>
<ul>
<li>Firebaseを使ってシグナリングを行う多人数ビデオチャット<a target="_blank" href="basic2016/multi_firebase.html">Firebaseを使った多人数ビデオチャット</a> (Chrome, Firefoxどちらも動作）</li>
<li>Firebaseを使ってシグナリング、adapter.jsでEdge同志の通信も可能<a target="_blank" href="basic2016/multi_firebase_adapter.html"> adapter.js を利用して、Edge同志でも多人数ビデオチャット</a> (Chrome, Firefoxどちらも動作）</li>
</ul>
<h4>(6) 番外編：シグナリングサーバー不要 - BroadcastChannelを使ったシグナリング </h4>
<ul>
<li>BroadcastChannelを使ったシグナリングを行う多人数ビデオチャット<a target="_blank" href="basic2016/multi_bc.html">
BroadcastChannelを使った多人数ビデオチャット</a> (同一マシンのChrome間, Firefox間で動作）
</li>
</ul>
<h4>(7) 番外編：最新のWebRTCのtrack系処理を、手動＋データチャネルシグナリングで観察してみる </h4>
<ul>
<li>手動シグナリング+DataChannelシグナリングでtrackを操る<a target="_blank" href="basic2016/datachannel_signaling_track.html">
addTrack()/removeTrack()を使い、ontrack(), onremovetrack()に対応</a>
</li>
<li>
Qiitaの記事：<a target="_blank" href="https://qiita.com/massie_g/items/1316eb8c6e0d171307f5">最新のWebRTCのtrack系処理を、手動＋データチャネルシグナリングで観察してみる</a>
</li>
</ul>
<h4>(8) 番外編： addTrack()/ontrack()、multi-stream時代の DataChannelシグナリング (2018.08) </h4>
<ul>
<li>
<a target="_blank" href="basic2016/dc_signaling_multistream.html">
DataChannelのよる1:1シグナリング、multi-stream、addTrack()/ontrack()対応</a> (同一マシンのChrome間, Firefox間で動作）
</li>
<ul>
<li>
BroadcastChannelを使って初期シグナリングでDataChannelを確立、その後はDataChannelを介してシグナリング
</li>
<li>
※BroadcastChannelのチェックを外せば、手動シグナリングも可能（Chrome - Firefox間）
</li>
<li>
addTrack()/removeTrack(), peer.ontrack(), stream.onremovetrack()を利用
</li>
<li>
Firefoxと, Chrome 70〜で利用できる、Unified Planを用いたmulti-streamに対応
</li>
</ul>
</ul>
<hr />
<h3>WebRTC Meetup Tokyo #10 サンプル</h3>
Chrome 50 で動作確認
<ul>
<li>音声も含んだ多段中継の実験 <a target="_blank" href="self/relay.html">Chrome Peer Relay with sound</a></li>
<li>映像のディレイの実験 <a target="_blank" href="self/relay_delay.html">Chrome Peer Relay for video delay</a></li>
<li>SDPのbandwidth制限を用いた、MediaRecorderのビットレート調整の実験 <a target="_blank" href="self/record_bandwidth.html">Chrome MediaRecorder with Peer bandwidth</a></li>
<li>SDPのコーデック指定を用いて、MediaRecorderのVP9録画実験 <a target="_blank" href="self/record_relay_vp9.html">Chrome MediaRecorder with Peer VP9</a></li>
<li>オプション指定でのMediaRecordeのVP9録画サンプル <a target="_blank" href="self/record_vp9.html">Chrome MediaRecorder with VP9 option</a></li>
</ul>
<hr />
<h3>Promise版 手動シグナリング</h3>
Firefox 46, Chrome 51 で確認
<ul>
<li>Promiseを使った、Vanilla ICEの手動シグナリング <a target="_blank" href="hand/vanilla_promise.html">Firefox hand signaling with promise</a></li>
</ul>
<h3>Canvas.captureStream() を使った擬似Simulcast(手動シグナリング)</h3>
Firefox Nightly 49同士, Chrome 51同士で確認 (Firefox - Chrome間では動作しない）
<ul>
<li>Canvas.captureStream()の擬似Simulcast 送信側 <a target="_blank" href="hand/canvas_pseudo_simulcast.html">WebRTC Canvas pseudo simulcast sender</a></li>
<ul>
<li>audio x 1, video x 3 (camera x 1, canvas x 2) を最初からマルチストリーム通信</li>
</ul>
<li>擬似Simulcast 受信側 <a target="_blank" href="hand/receive_pseudo_simulcast.html">WebRTC pseudo simulcast receiver</a></li>
<li>videoTrackを切り替えるデモ(送信側) <a target="_blank" href="hand/switch_pseudo_simulcast.html">Webrtc psesudo simulcast switcher</a> (Firefox 49)</li>
<ul>
<li>受信は擬似Simulcast 受信側 <a target="_blank" href="hand/receive_pseudo_simulcast.html">WebRTC pseudo simulcast receiver</a>を利用</li>
</ul>
</ul>
<br />
</html>