WebRTC Exp JP

WebRTC 実験室

githubはこちら

Qiita記事のサンプル

Qiitaの記事 WebRTCを試すときにオッサンが映り続ける問題に対処する
→そのサンプルローカルの映像/音声ファイルをメディアストリームに変換
Qiitaの記事 WebRTCオッサン問題を超えて。ローカルファイルを自在に操りたい
→そのサンプル 2つの映像ファイルを、効果をつけながら切り替え
Qiitaの記事すべてのオッサンをWebRTCで配信される前に360度映像から消し去りたい
→そのサンプルカメラの映像に静止画でマスクをかけて、自分の姿を消す。顔検出も試してみた

HTML5Experts.jp WebRTC入門2016サンプル

WebRTC入門2016はこちら

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

HTML5Experts.jpの記事はこちら

新しいAPIでカメラを使ってみよう mediaDevice.getUserMedia(Chromeはフラグ設定が必要）
新旧getUserMedia()をラップしてみよう wrap old/new getUserMedia
CSS3と組み合わせてみよう getUserMedia and CSS

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

基本の手動シグナリング手動シグナリング(Vanilla ICE)

手動でシグナリング番外編

Safari TP32でも動く、ontrack/addTrack対応版 ontrack/addTrack対応手動シグナリング
手動シグナリングでDataChannelを接続、その後はDataChannelでシグナリング DataChannelでtrack処理をシグナリング
adapter.jsを使って手動シグナリング adapter.jsで手動シグナリング
手動シグナリングでSDPを変更手動シグナリングでSDP変更

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

WebSocketを使ったシグナリング自動シグナリング(Vanilla ICE)
WebSocketを使ったシグナリング自動シグナリング(Trickle ICE)
node.js用シグナリングサーバーのコードsignaling.js
Chrome appの簡易WebSocketサーバーSimple Message Server

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

socket.ioを使って、多人数ビデオチャット多会議室、多人数対応ビデオチャット (※このまま動くのはFirefoxのみ）
node.jsとsocket.ioを使った、多会議室、多人数対応のシグナリングサーバーのコードsignaling_room.js

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

Firebaseを使ってシグナリングを行う多人数ビデオチャットFirebaseを使った多人数ビデオチャット (Chrome, Firefoxどちらも動作）
Firebaseを使ってシグナリング、adapter.jsでEdge同志の通信も可能 adapter.js を利用して、Edge同志でも多人数ビデオチャット (Chrome, Firefoxどちらも動作）

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

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

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

手動シグナリング+DataChannelシグナリングでtrackを操る addTrack()/removeTrack()を使い、ontrack(), onremovetrack()に対応
Qiitaの記事：最新のWebRTCのtrack系処理を、手動＋データチャネルシグナリングで観察してみる

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

DataChannelのよる1:1シグナリング、multi-stream、addTrack()/ontrack()対応 (同一マシンのChrome間, Firefox間で動作）

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

WebRTC Meetup Tokyo #10 サンプル

Chrome 50 で動作確認

音声も含んだ多段中継の実験 Chrome Peer Relay with sound
映像のディレイの実験　Chrome Peer Relay for video delay
SDPのbandwidth制限を用いた、MediaRecorderのビットレート調整の実験 Chrome MediaRecorder with Peer bandwidth
SDPのコーデック指定を用いて、MediaRecorderのVP9録画実験 Chrome MediaRecorder with Peer VP9
オプション指定でのMediaRecordeのVP9録画サンプル Chrome MediaRecorder with VP9 option

Promise版手動シグナリング

Firefox 46, Chrome 51 で確認

Promiseを使った、Vanilla ICEの手動シグナリング Firefox hand signaling with promise

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

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

Canvas.captureStream()の擬似Simulcast 送信側 WebRTC Canvas pseudo simulcast sender

audio x 1, video x 3 (camera x 1, canvas x 2) を最初からマルチストリーム通信

擬似Simulcast 受信側 WebRTC pseudo simulcast receiver
videoTrackを切り替えるデモ(送信側) Webrtc psesudo simulcast switcher (Firefox 49)

受信は擬似Simulcast 受信側 WebRTC pseudo simulcast receiverを利用