Experts.jp日本に、もっとエキスパートを。(6)こんにちは、がねこまさしです。以前WebRTCに関する連載を書かせていただきましたが、今回はそのフォロー記事を書きたいと思います。4月に記事をベースにしたハンズオンを行ったり、別のイベントで参加者の方とお話しさせていただく機会がありました。すると、みなさんいろいろな部分で引っ掛かってしまうケースが多いことが分かりました。私の記事の説明不足も多いので、以下のつまずきやすいポイントについて、この機会に改めて補足させていただきます。カメラがつながらない手動シグナリングがうまくいかないシグナリングサーバーでつながらないFirefoxでも使いたいカメラがつながらない第1回のHTML5でWebRTCを使ってみよう!「カメラを使ってみよう」編ではまずカメラにアクセスします。ところが、カメラにつながらないケースが時々発生しているようです。ブラウザが違うケース記事に書いたソースコードは、Chrome用になっていますので、Chromeでお試しください。FirefoxもWebRTCに対応していますが、JavaScriptの書き方がちょっと違います。※Chrome/Firefox両方に対応させる書き方もあります。この記事の最後でご説明します。権限の制限に引っ掛かっているChromeでWebRTCを使ってカメラにアクセスするには、HTML/JavaScriptをローカルディスクから読み込む(file://~)ではなく、Webサーバーから読み込まなくてはなりません(http://~、https://~)。お手数ですが、ApacheやnginxといったWebサーバー、あるいはpython,ruby,node.js,go等を使ってテスト用サーバーを動かしてください。HTMLファイルは、Webサーバー側に配置してくださいね。例として簡易WebサーバーをNode.jsで作った場合のサンプルをこちらに掲載します。※HTML5エキスパートの方のソースを一部拝借させていただきました。して保存し、htmlファイルも(この例ではhand.html)同じディレクトリに保存してください。http.jsのように簡易Webサーバーを起動してください。アクセスしてくださいね。うっかり「拒否」してしまったブラウザがカメラやマイクにアクセスする許可を求めてきた際に、うっかり「拒否」してしまった場合、カメラの映像は取得できません。そんな場合は、アドレスバーの右端に「カメラに×印」が表示されます。ここで「カメラに×印」のアイコンをクリックすると、カメラのアクセス許可状態を変更するメニューが現れます。「カメラやマイクへのアクセスを要求しているか確認する」を選択し、[完了]をクリックすると、リロードを促されます。[再読み込み]ボタンをクリックして、再度挑戦してみてください。カメラを認識しないケースそもそもブラウザがカメラを認識していないことがあります。確実ではありませんが、次の手順で認識してくれることもあります。再挑戦USBの抜き差しが一番可能性が高く、後ろに行くにしたがって、成功する可能性は下がる印象です。手動シグナリングが上手く行かない第2回の「WebRTCに触ってみたいエンジニア必見!手動でWebRTC通信をつなげてみよう」では、SDPとICEを手動でコピー&ペーストしてPeer-to-Peer通信を確立しました。ところが実際にやってみると、うまくいかないケースが多々ありました。実感としては約半数のケースでうまくいかず、ただ黒い画面が表示されるだけでした。正確な原因はよく分かっていませんが、コピーする範囲(選択した範囲)が1文字でもずれていると、正しく接続できないことは確かです。そのため、対象の文字列を自動で選択するようにちょっとだけ改良しました。記事の最後に「手動シグナリングの改良版ソース(2014年4月21日追加)」として改良したソースを載せていますので、うまくいかなかった人もこちらで再チャレンジしてみてください。この機会に同一LAN上の別のマシン間でも手動シグナリングを試しました。テキストファイル経由でSDP/ICEを交換して、無事通信することができました。シグナリングサーバーでつながらない第3回の「WebRTC初心者でも簡単にできる!Node.jsで仲介(シグナリング)を作ってみよう」では、Node.jsを使ってシグナリングサーバーを作りました。こちらもnode.jsをよく触っている方に、勘違いさせてしまったようです。Node.jsでもexpressなどのフレームワークを使って、Webアプリケーションを作ることが多いです。今回もシグナリングサーバーでWebサーバーも兼ねていて、HTMLもそこから取得できると思われた方がいたようです。第3回の記事では、Node.jsでWebSocketを使ったシグナリングサーバーのみ作成しています。お手数ですが、Webサーバーは別途用意してくださいね。先ほどと同じく、Node.jsで簡易Webサーバーを作ることも可能ですので、お好みでどうぞ。Firefoxでも使いたいFirefoxでもWebRTCが使えますが、私が書いた記事のソースはChromeにしか対応していません。Chrome/Firefox共通で使える様にクロスブラウザ対応にしてみましょう。クロスブラウザ対応する書き方はいろいろありますが、今回はGoogleで用意しているadapter.jsを使ってみます。題材には、第3回のシグナリングサーバーを使った1対1の通信を用います。adapter.jsを使うには、まずHTMLの最初でJavaScriptを読み込みます。src="https://webrtc.googlecode.com/svn/trunk/samples/js/base/adapter.js"></script></head>次に、ブラウザ固有のクラス、メソッドを置き換えます。RTCPeerConnection具体的には、次の箇所になります。event.stream)}すると、このようにChromeとFirefox間で通信ができるようになります。おわりにありがたいことに実際にWebRTCの記事を試してくださった方々の言葉を聞くチャンスがあり、そこで出てきた疑問に答えるために、今回の記事を書かせていただきました。貴重なフィードバックをいただいた方々にお礼申し上げます。ありがとうございました。一連の記事についてでも、そうでなくても、WebRTCに関する質問やご意見があれば、どんどんお寄せください。私の分かる範囲でまた補足記事を書かせていただきます。