/webrtcexpjp

WebRTC Experiments Japan / WebRTC 実験室

Primary LanguageHTMLMIT LicenseMIT

WebRTC 実験室

WebRTC 関連の実験(HTML, JavaScript)を公開します。(MIT ライセンス)

GitHub Pages はこちら

Qiita記事のサンプル

WebRTCを試すときにオッサンが映り続ける問題に対処する

Qiitaの記事はこちら

  • ローカルの映像/音声ファイルをメディアストリームに変換 file_to_stream.html

WebRTCオッサン問題を超えて。ローカルファイルを自在に操りたい

Qiitaの記事はこちら

  • ローカルの映像/音声ファイルをメディアストリームに変換するとき、2つの映像を切り替えられるようにする switch_to_stream.html

  • ローカルの映像/音声ファイルを2種類切り替えながら表示する(VJ的なもの)。録画も可能 switch_to_stream_rec.html

すべてのオッサンをWebRTCで配信される前に360度映像から消し去りたい

Qiitaの記事はこちら

  • カメラの映像に静止画でマスクをかけて、自分の姿を消す。顔検出も試してみた mask_face.html

ブラウザの BroadcastChannel を使ってシグナリング

Qiitaの記事はこちら

HTML5Experts.jp WebRTC入門2016 のサンプル

WebRTC入門2016はこちら

(1)カメラを使ってみよう

(2)手動でシグナリングをやってみよう

手動シグナリング番外編

(3) WebSocketを使ったシグナリングサーバーを使おう

(4) シグナリングを拡張して、多人数でビデオチャットしよう

(5) 番外編：Firebaseで楽々シグナリング

(6) 番外編：シグナリングサーバー不要 - BroadcastChannelを使ったシグナリング

  • BroadcastChannelを使ったシグナリングを行う多人数ビデオチャット basic2016/multi_bc.html
  • BroadcastChannelを使った多人数ビデオチャット (同一マシンのChrome間, Firefox間で動作）

(7) 番外編：最新のWebRTCのtrack系処理を、手動＋データチャネルシグナリングで観察してみる

(8) 番外編： addTrack()/ontrack()、multi-stream時代の DataChannelシグナリング (2018.08)

  • DataChannelのよる1:1シグナリング、multi-stream、addTrack()/ontrack()対応 basic2016/dc_signaling_multistream.html
  • BroadcastChannelを使って初期シグナリングでDataChannelを確立、その後はDataChannelを介してシグナリング
  • ※BroadcastChannelのチェックを外せば、手動シグナリングも可能（Chrome - Firefox間）
  • addTrack()/removeTrack(), peer.ontrack(), stream.onremovetrack()を利用
  • Firefoxと, Chrome 70〜で利用できる、Unified Planを用いたmulti-streamに対応

WebRTC Meetup 10 のサンプル

Chrome 50 で動作確認

Promise版 手動シグナリング

Firefox 46, Chrome 51 で確認

Canvas.captureStream() を使った擬似Simulcast(手動シグナリング)

Firefox Nightly 49同士, Chrome 51同士で確認 (Firefox - Chrome間では動作しない）