WebRTC でリアルタイムビデオチャットを実装しようとして頓挫した

大なごやJSの手を動かしてまねっこするシリーズ

先日の大なごやJSのまねっこシリーズ第2弾で、今回は @girigiribauerさんが発表されてたWebRTCを使い、サーバサイドでWebSocket（node実装）を組み合わせてリアルタイムビデオチャットを作成し…ようとして挫折しました

第1弾は、grunt+phantomjs+jasmineで自動テストのほうですコチラ

今回の内容は、未遂で終わった動かない中途のコードですが、githubのリポジトリにしておきました。情報出そろって気が向いたら動くようにする….かも…。あくまでsanboxちゅーことでご容赦を。

• ahomu/webrtc-sandbox · GitHub

なんか仕様コロコロ変わりすぎで情報漁りにくいし、現実的に使い所がそんなに多い技術でもなさそうだったので、適当なところで諦めてしまいました('A`;)

WebRTCと動機

WebRTC自体は、videoやaudioを扱うStreamAPIと、ブラウザ間P2Pを実現するPeerConnectionAPIで構成される、リアルタイム通信のための仕様です。StreamAPIからビデオ入力うけとってCanvasとかでゴニョゴニョするだけでも、そこそこ面白い感じです。

今回の主目的は、どちらかといえばWebRTCではなく、WebSocketのリハビリ＆Herokuにアプリつくる練習な感じでした。ところがHerokuがWebSocketに対応しておらず、socket.ioでxhr-pollingしろって話だったので頓挫。Herokuへのデプロイは諦めています。

Using Socket.IO with Node.js on Heroku | Heroku Dev Centerに書いてあるとおりでございます・・・(´・ω・｀)

WebSocket周りについて

以前にTwitterのストリームを捕まえて配信するのに、Socket.ioを利用してWebScoket周りをどうこうしていましたが、今回はもうちょっと生々しそうなのを使いました。

はじめに目を付けたのは、websocket-serverですが、実際はバージョン違いで使えず。

仕様の後方互換性に難

• okame-log – websocketでエラー「Error during WebSocket handshake」+ Worlize/WebSocket-Node

WebSocketsのバージョン違い（Protocol Version 13）で、draft仕様の互換性に問題があるようです。ナマで使うならnpmに登録されているwebsocketという無印感のある名称のパッケージを利用するとよさそうです。

これで利用できるようにはなったのですが、メッセージの種類を簡単に振り分けできることを踏まえると、素直にSocket.ioを使わない手はないんじゃないかと。Herokuでxhr-polling強制のsocket.ioを勧められたことですしね。

WebRTC周りについて

はじめ参考にしてたところは以下ですが、色々とナンカチガウ。

• Documentation | Ericsson Labs
• Node.jsのSocket.IO+WebRTCでP2Pの動画チャットを作ってみた。 - alumicanの日記
• webRTCでP2Pの動画チャットを頑張れば試せるデモ作ってみた。 - alumicanの日記
• GoogleのWebRTCサンプル

仕様変更

最初のトラップはこれ。わりと最近の仕様変更。試していたのがGoogle Chromeのdev channel にある現在Ver. 22であって、APIの実装も前のめりなこともあり、その仕様変更の影響下でした。たぶん多少Chromeのバージョン落とせば上記のコードでもいずれかは動くのだと思う。

• Changes to our WebRTC API implementation - WebRTC

んで、上記に記されている変更で主だったところは...

• webkitGetUserMediaのメディアの指定が、formatされたstringではなく、整理されたobjectに変更された
• createOfferとcreateAnswerの引数が、has_audioとhas_videoのそれぞれboolean値をふくむオブジェクト（MediaHints）として必須になった
• webkitPeerConnectionがwebkitDeprecatedPeerConnectionに変わり、新しい仕様のがwebkitPeerConnection00として用意されていた。（Chrome22時点ではDeprecatedのAPI自体が存在しない）

webkitPeerConnection00の00ってなんやねん、とか思いつつ、色々変わっている。特に大きいのが三番目のwebkitPeerConnection00にシフトしたところ。

JSEP

• draft-uberti-rtcweb-jsep-02 - Javascript Session Establishment Protocol

これに従った仕様になったのが大きい。前述の古いサンプルでは出てこなかったメソッドがサンプルに多く出現します。setRemoteDescriptionやstartIceがそうです。P2P接続の確立手順がちょいと変わったんではなかろうか。

新旧のAPIを比較して検証していないので、正確性に欠ける情報であることに注意してください。

頓挫

というところまで分かって、P2Pのセッションがオープンされるところまでは現在のコードで到達できたのですが、動画のstreamを共有するに至りませんでした。

WebRTCを利用する条件にルーターのNATテーブルの扱いがどーのこーの、という話が混ざってきた辺りで、さくっと頓挫を決断した次第。なんにせよ、仕様がコロコロ変わっている分野ではあるので、感触だけ得てさっさと引き返しました。半年ぐらいしたらリベンジしたいところ。

---