WebRTCをPromiseってみる。PRESSMAN*TechWebRTCをPromiseってみる。>プログラミングWebRTCをPromiseってみる。2015/08/22この記事は2年以上前ですので、内容が古い可能性がありますWebRTCって何?WebRTCはブラウザとブラウザ直結で動画や音声、データのやりとりをする規格です。WebRTC使うとブラウザだけでテレビ電話が出来てしまいます。実装状況は?色々幸せそうな未来が見えますが、例によってブラウザにより実装状況が違います。Chrome,Firefoxは実装済み。EdgeはObjectRTCとして実装する予定ですし、IEはそのうち葬られるでしょう。SafariはWebkitには実装されてるみたいなんですが・・・・。そのうち主要なブラウザで実装されそうですが、動画の規格で実装状況が違うという、Videoタグで聞いたような話が。一応、両方実装してねみたいなことにはなっているみたいです。今回やることそんなわけで、明るい未来が見えるので、今のうちにWebRTCを触ってみましょう。ゴールは1対1でテレビ電話をする、1対1でチャットをするです。SkyWayを利用します。サーバーが必要かというと、だって、接続先わからないからそれを斡旋してくれる人が必要じゃんってことです。その他、自分のIPアドレスを教えてくれるサーバーもいたりしますが、詳しいことはこのスライドが詳しいです。つながってしまえば間にサーバーが入ることなくP2Pになります。SkyWayのサイトにはこのサンプルもあるのですが、テレビ電話をするのではなく、WebAPIのプログラムを知りたいので自分で書いてみます。Promiseって何?非同期処理でコールバック地獄を回避するための、いい感じなJavascriptのネイティブ関数です。ES6からの実装ですがjQueryやその他それっぽい感じの実装は今までも色々ありました。最新のブラウザは使えるので安心です!(というか、さっさとIEなくしちゃえばいいのに・・・・。関係無いけどMacでもEdge出せばいいのに。)やってみようSkyWayにあるPeerJSのドキュメントを読みながらテキトーに実装するとあっという間にチャットだけは出来ましたがPromise使ったり動画表示したりで躓きました。ソースは下記URLにあります。https://github.com/pman-taichi/webrtc###SkyWayのAPIキーを取得SkyWayのサーバーを利用するにはAPIキーを取得する必要があるので取得します。あとは、WebRTCのAPIラッパーであるPeerJSをSkyWay用にカスタマイズしたライブラリを使います。https://skyway.io/dist/0.3/peer.min.js###処理の順番Promise使っているのでどう言う順番で何をするのかわかりやすくなっています。//Peerオブジェクトのイベントにアクションをセットする。console.log(message);});###カメラやマイクへの接続を取得(getUserMedia)Peerオブジェクトを取得してからでもいいんですが、getUserMediaでカメラとマイクへの接続を取得しています。このときブラウザには確認のアラートがでます。ここの部分のコードはここのコードまんまです。ユーザーが許可してくれるとlocalMediaStreamを引数にsuccessCallbackがよばれるので、そこでPromiseのresolveを呼んでいます。この関数を呼び出すとこの処理は正常に終わったよとなってthenでつなげた次の処理へ移ります。localMediaStreamを通信したいユーザーに渡すっぽい。};SkyWayのサーバーにつないで相手と通信するのにつかうPeerオブジェクトを作ります。生成されるとopenイベントがよばれるのでコールバックを設定しておきます。コールバックの引数にはサーバでふられたIDが入っています。これは相手と接続するために使うIDです。Peerオブジェクトを作るときに任意のIDを設定することもできます。その場合重複したりしたらどうなるのかなんかまではやっていません。次の処理へはIDじゃなくてPeerオブジェクトを渡していますが、PeerオブジェクトからIDは取得出来るので大丈夫です。このときサーバーとの間でなにが行われているかはdebugのレベルを上げてあげるとコンソールに表示されます。websocketのコネクションが生成されているみたいです。###Peerオブジェクトのイベントにアクションをセットする。ここはなんかイマイチな実装です(言い訳するなら、とりあえず出来ればいいや的な)。呼び出されたら自分のメディアストリームを渡して応答する。};これは簡単にいうと、電話がかかってきたら何をするかってことです。相手からの呼び出しはデータ用と動画、音声用の呼び出しがあるのでそれぞれに処理を記述します。データ用の呼び出しがあったらその接続のイベントに対してまたアクションを設定します。その内容はopenConnに記述されています。接続が開いたら、チャットに必要なフォームやボタンを作る。接続にデータが届いたらそのデータを表示する。動画・音声で呼び出されたらまず相手に自分のメディアストリームを渡します。これを使って相手はこちらのカメラからのデータを受け取ります。そのあとの処理はstreamCallに記述してありますが、こちらも簡単に相手のメディアストリームが届いたらvideoのDOMを作るそれにメディアストリームを設定するブラウザに表示する再生開始だけです。setPeerEventでは非同期で処理する部分もないのでPromiseオブジェクトを返さずにPeerをreturnして次へ渡しています。###ユーザーIDの一覧を取得peerオブジェクトを使ってSkyWayのサーバーから使用しているAPIキーで接続している全ユーザーのIDを取得します。これも非同期処理なのでPromise使っています。全ユーザーIDを受信したらそれをリストにして次の処理へ渡しています。前の処理から受け取ったIDリストを表示します。そのときに各IDをクリックしたらそのIDのユーザーへ接続する処理を仕込んでおきます。ここは他と違って下記の様に。他にも色々やり方はありますが、peerとlistの両方を渡したかったためです。};以上でおしまいです。テストするにはカメラ付きのPCが2台ないと出来ないと思いきや、同じブラウザ内でも出来ます。Androidでも動くのを確認しました。iOSはダメです・・・。複数拠点でもできますが、3つくらい開くとめちゃくちゃ遅いです。複数の場合はなんかやらなきゃいけないみたいなので、本格的に使うことが出てきたらやってみたいと思います。私たちと一緒に働きませんか?「WebRTCをPromiseってみる。WordPressが大好きな方、仕事を通してさらにスキルを磨きたい方を募集しています。募集職種をご覧の上、お気軽にお問い合わせください。あなたとお会いできるのを楽しみにしています。採用情報を見る-プログラミング-JavaScriptauthor関連記事mrtgでサーバーを監視しよう弊社の使っているサーバーセンターは24時間有人監視していますし、例えばネットワーク負荷の状況が知りたければいつでも教えてくれます。...この記事をシェアする:OAuthをPHPでイチから書いてみた(その2)その1で認証画面を表示するところまでたどり着きました。この時点ではリクエストトークンは未認証の状態です。認証画面でこれから認証してもらうわけですし当たり前ですね。...この記事をシェアする:Ajaxの同期処理時におけるブラウザによる違い。XMLHttpRequestを同期モードで動かして既に送られていた非同期リクエストのレスポンスが同期リクエストのレスポンス前に返ってきたらどうなるかのブラウザ毎の挙動を調べました。Confirm」を導入することで、WordPressプラグインの有効・停止時に確認ダイアログを表示することができます。現用で動いているWordPressで、プラグインを間違って停止にしない対策のために作成しました。Pack編)企業サイト作成の際にありがちな、Wordpressのテーマやプラグインのカスタマイズ例を挙げていくシリーズの第2弾。何でもやりますが、一応プログラマです。かけ算から生まれる可能性へ。