ちょっと触ってみたいだけなんだよ。
メリ〜クリスマ〜ス！！！！（まだ早い）
WebRTCのHello Worldって、ビデオチャットが簡単にできる！というものが多いですよね。
確かに、真剣にWebRTCを覚えたい人には、ビデオチャットを作ってみるのは良い手かもしれません。
WebRTCの機能を一通り覚えられるからです。
- getUserMediaの使い方
- mediaStreamの使い方
- peerConnection
- P2Pで繋がる仕組み（STUNとかTURNとかの仕組み）
こんな感じのことを、いっぺんに覚えられるはずです！しかし！
私は覚えらてない！
だがそろそろ、WebRTC Hello Worldは終わったと言いたい。
というわけで、今回、自分のために おもいっきりハードルを下げてみようと思います。
好きなところをちょっとつま食いしただけでも、WebRTC入門完了。
ここまで下げればいいだろ。さすがに。
ケース1. ビデオカメラを使いたいだけ！という人にとってのWebRTC入門
ブラウザだけでPCやスマホのカメラが使えます。
P2P通信したいわけじゃなくて、カメラが使いたいだけだ！
そういう人も多いですよね！
WebRTCには、getUserMediaというものがあります。
これを使えばカメラが使えるわけですね。
navigator.getUserMedia()の第一パラメータに指定するvideoをtrueに設定。
navigator.getUserMedia ( {video:true, audio:false}, successCallback, errorCallback );
これだけで、カメラが使えます。
WebRTC カメラ編 Hello World 終了〜 パチパチパチ〜
ちゃんと知りたい方は、先輩方が良い記事書いてくれてるので読んでくださいね！（超手抜きw）
iPhoneだとできないんですよね。
iPhoneはまだWebRTCに対応してないので、getUserMediaも使えません。
しかし。
iPhoneのSafariでもカメラ（WebRTCじゃない）
を紹介しておきます。
<input type=file accept="video/*">
。。。。カメラアプリに連携して、撮って、アップロードできるだけですが。。。
インチキの方が美徳。かっこイイ。
と思えるナイスガイは是非！
ケース2. マイクで音が拾えればいい！という人にとってのWebRTC入門
これも、getUserMediaでできます。
navigator.getUserMedia ( {video:false, audio:true}, successCallback, errorCallback );
あとは、カメラと一緒なんで省略します。
だって深入りすると、Web Audio API とか説明しなきゃだし、説明できないし。。。。w
あと、カメラのところに書いた、iPhoneでのインチキは、マイクにも使えます。
<input type=file accept="video/*">
ビデオって音も録れるからね！キヒヒw
ケース3. なんでもいいから、ブラウザだけでP2P通信がしたい！という人にとってのWebRTC入門
もちろん、WebRTCは映像や音声がリアルタイムで送れるからカッコイイ！と思うかもしれません。
でも、 ちょっと触ってみたいだけの人 にとっては、
ブラウザだけでP2Pやったんだから、ホラ！WebRTCやってみたヨ！
と言いたいわけです。
送るものは何でもいいし、中でどんなことが起こってるかはどうでもいい。
というか、むしろ、できるだけそんなところには触れずに生きていたい！
そんなニーズに超簡単に応えてくれるのがPeerJS(http://peerjs.com/)です。
上記PeerJSのサイトのSetupのところと、Data connectionsのところに注目。
以下、ちょっとだけ引用させていただくと、
<script src="http://cdn.peerjs.com/0.3/peer.js"></script>
HTMLでpeer.jsを読み込んでから、
var peer = new Peer('pick-an-id', {key: 'myapikey'});
var conn = peer.connect('another-peers-id');
conn.on('open', function(){
conn.send('hi!');
});
これだけで、データ送信ができちゃうのです！ワオ！
ちょっとまて。PeerServerが必要だぞ
すいません。大事なコトをはしょりました。
PeerJSを使うには、PeerServerが必要です。
オープンソースのWebRTCサーバー「PeerServer」インストール手順を参考に自分で立ててもいいけど、今回、そうしたガチな人が対象の記事じゃないんで、ホスティングをお勧めします。
どちらも簡単ですw
APIキーが払い出されるので、さきほどのサンプルのnew Peer()に指定するだけでOK。
var peer = new Peer('pick-an-id', {key: 'ココに払い出されたAPIキーを入れよう'});
こんな感じです。
ここでもiPhoneできない。
もう、iPhoneに何か恨みがあるワケではないのです。どっちかと言うとiPhone愛の方です。
そうです。何度も言いますが、iPhoneはまだWebRTCに対応してないので、PeerJSは使えません。
そこで、インチキの登場です。
WebSocketを使おう。できるだけ手抜きな方法でP2Pっぽく。
全然P2Pではないんですが、そもそも、Hiとか送りつけるだけなら、WebRTCを使う必要はあまりないんです。
P2P風として、下記のようなモノであれば、Hello World風ですね。
- ブラウザはWebSocketでサーバにデータを送る。自分が送ったものをなんとか解るようにしておこう。
- onmessageで誰かから何か届く。自分が送ったのも届く。自分が送ったのは送るときに解るようにしてるはずなので解れ。
- サーバ側は送りつけられたメッセージを全ての接続クライアントにブロードキャストする。3人目以降は繋がないが、何も考えずブロードキャストする。手抜きとか言うな。
あまりにインチキすぎるのでコードUpは差し控えますw
まとめ
ハードルを下げてクリアという姑息な作戦でWebRTCに見事入門してみました。
なんとなく、主要なところは押さえたはずですw
こうして、技術向上にかける工数を大幅に削減できたので、新たなインチキの探求に全力で取り組む所存です。みなさんも、是非そのようにw
それでは、みなさん、よいクリスマスを！（だからちょっと早いw）