ビデオチャットをめんどくさがってる人のためのWebRTC入門

## ちょっと触ってみたいだけなんだよ。

メリ〜クリスマ〜ス！！！！（まだ早い）

![クリスマスなので！](http://img.dfm.lrv.jp/webrtc/xmas.png)

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`に設定。

```js
navigator.getUserMedia ( {video:true, audio:false}, successCallback, errorCallback );
```

これだけで、カメラが使えます。

> WebRTC カメラ編 Hello World 終了〜 パチパチパチ〜

ちゃんと知りたい方は、先輩方が良い記事書いてくれてるので読んでくださいね！（超手抜きw）

- [Navigator.getUserMedia / Mozilla Developer Network](https://developer.mozilla.org/ja/docs/Web/API/Navigator.getUserMedia)
- [HTML5でWebRTCを使ってみよう！「カメラを使ってみよう」編 by がねこまさしさん](http://html5experts.jp/mganeko/5098/)

### iPhoneだとできないんですよね。

iPhoneはまだWebRTCに対応してないので、getUserMediaも使えません。
しかし。

> iPhoneのSafariでもカメラ（WebRTCじゃない）

を紹介しておきます。

```html
<input type=file accept="video/*">
```
。。。。カメラアプリに連携して、撮って、アップロードできるだけですが。。。

> インチキの方が美徳。かっこイイ。

と思えるナイスガイは是非！

## ケース2. マイクで音が拾えればいい！という人にとってのWebRTC入門

これも、getUserMediaでできます。

```js
navigator.getUserMedia ( {video:false, audio:true}, successCallback, errorCallback );
```

あとは、カメラと一緒なんで省略します。

> だって深入りすると、Web Audio API とか説明しなきゃだし、説明できないし。。。。w

あと、カメラのところに書いた、iPhoneでのインチキは、マイクにも使えます。

```html
<input type=file accept="video/*">
```

> ビデオって音も録れるからね！キヒヒw

## ケース3. なんでもいいから、ブラウザだけでP2P通信がしたい！という人にとってのWebRTC入門

もちろん、WebRTCは映像や音声がリアルタイムで送れるからカッコイイ！と思うかもしれません。
でも、 **ちょっと触ってみたいだけの人** にとっては、

> ブラウザだけでP2Pやったんだから、ホラ！WebRTCやってみたヨ！

と言いたいわけです。

> 送るものは何でもいいし、中でどんなことが起こってるかはどうでもいい。
> というか、むしろ、できるだけそんなところには触れずに生きていたい！

そんなニーズに超簡単に応えてくれるのが[PeerJS(http://peerjs.com/)](http://peerjs.com/)です。
上記PeerJSのサイトの`Setup`のところと、`Data connections`のところに注目。

以下、ちょっとだけ引用させていただくと、

```html
<script src="http://cdn.peerjs.com/0.3/peer.js"></script>
```

HTMLで`peer.js`を読み込んでから、

```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」インストール手順](http://qiita.com/atskimura/items/80b2bb8fbc055cd4616f)を参考に自分で立ててもいいけど、今回、そうしたガチな人が対象の記事じゃないんで、ホスティングをお勧めします。

- [PeerServer Cloud service (PeerJS本家)](http://peerjs.com/peerserver)
- [SkyWay (NTTコミュニケーションズさんがやってるサービス。本家より機能拡張速い？！)](http://nttcom.github.io/skyway/)

どちらも簡単ですw

APIキーが払い出されるので、さきほどのサンプルの`new Peer()`に指定するだけでOK。

```js
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

![脱ぐの早い！](http://img.dfm.lrv.jp/webrtc/duck.png)

こうして、技術向上にかける工数を大幅に削減できたので、新たなインチキの探求に全力で取り組む所存です。みなさんも、是非そのようにw

それでは、みなさん、よいクリスマスを！（だからちょっと早いw）