ヒデオチャット色々
WebRTCでヒデオチャットする場合
ネットワーク依存の問題
FirewallとProxy以外はSTUNサーバーがあれば
恐らくだいたい繋がる
そのSTUNサーバー自体も
Googleが下記のように公開してくれているので
stun.l.google.com:19302
stun1.l.google.com:19302
stun2.l.google.com:19302
stun3.l.google.com:19302
stun4.l.google.com:19302
RTCPeerConnection作成時に
下記のようなオプションを作成して
|
1 2 3 4 5 6 7 |
private dataOptions: any = { ordered: true, maxRetransmitTime: 3000, iceServers: [ {'url': 'stun:stun.l.google.com:19302'} ] }; |
渡してやれば勝手にルート情報の収集を行ってくれる
自前でSTUNサーバーを作るのも
もの凄くハードルが低いので後々の継続性を考えると
Googleのお世話にならなくても良い気はする
実際の映像配信では
１対１、多対多、１対多（1箇所からの配信）
の３パターンに恐らくなると信じている
１対１のパターンを書けば
まぁ後はイメージが出来るが
１対１をベースに
多対多の場合はPeerConnectionをID管理し
接続先を個別に制御すればOK
peerconnection自体を
websocketのセッションIDとかを使用して
下記のようにID指定して保存する内容に全て変更すれば
同一のクライアントからの要求に対応できる
|
1 2 3 |
private addConnection(id, peer): void { this.webRtcConnect[id] = peer; } |
１対多の場合は受信側からOffer要求を出してもらい
・送信側はOfferは返すが、Offerの受け取りはしない
・受信側はAnswerは返すが、Answerの受け取りはしない
送信側はcreateOfferする時に
第3引数に下記オプションを指定し
戻りの映像ストリームを無効にする
|
1 2 3 4 5 6 |
options = { 'mandatory': { 'OfferToReceiveAudio': false, 'OfferToReceiveVideo': false } }; |
peerconnection作成時にも
相互通信か受信モード時のみ
「onaddstream」イベントに反応するように変更
|
1 2 3 4 5 6 |
if (this.checkMode(['mutual', 'reception'])) { peer.onaddstream = (event) => { this.RemoteStream[id] = event.stream; this.playVideo('remote', id); }; } |
さらに、受信側からOffer要求が来た時に
videoタグを生成しないようにする
以前はクロスブラウザとか高頻度の仕様変更で
自力対応はしんどい状況だったみたい
現状は割とスッキリしているんかな？
webrtc-adapterとかのライブラリもあったけど
必要性をあまり感じなかった
ある程度色々出来る状態になってきたから
お絵かきヒデオチャットはさておき
1方向ストリームを活用した
監視カメラとか訪問者確認とか
WPA化出来るならば他にも活用方法が広がるし
何か色々できそうな気はする
webrtcは深いわ
