WebRTCの有効な使い方

これはマイネットエンターテイメント Advent Calendar 9日目の記事です。

みなさまこんにちは。
山の中で動物たちと暮らしていたところを連れてこられて、気がついたら東京でソーシャルゲームの開発をしていました。
人生って何が起こるかわかりませんね。

#WebRTC導入のきっかけ
さてさて、もう暦は１２月。随分と寒くなってまいりました。
自分は狩猟免許も持っていますので、この時期は山に罠を仕掛けに行きます。

しかしここで一つ問題が。
罠を仕掛けたら、見回りに行かないといけないのです。

仕掛けるのはただでさえ山奥なのに、この時期とかもう寒いし。
虫とかいるし、あんまり出たくないじゃあないですか。
ウチの裏こんな感じですし。

そこでどうにか家からWebRTCを使って監視環境を作ることにしました。

#WebRTCって
ブラウザ間でビデオチャットやファイル共有などP２Pでいろいろ通信できるようになるAPIです。
NAT越えのサーバが必要にありますがgoogleなどからも提供されている（stun.l.google.com:19302）ので自前のサーバがなくても大丈夫です。
あと数年前から微妙に流行りそうで流行らない感じ。

こいつで格安スマホを使ってお家からでも山中の罠の様子が監視できるようにします。

#用意したもの
AWS S3(html置くのに利用)
SimpleWebRTC(WebRTC用のライブラリ)

TURN/STUN サーバ用意するのも大変なのでSimpleWebRTCを利用させてもらいました。

#使い方
まずsimplewebrtcを読み込みます

index.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://simplewebrtc.com/latest-v2.js"></script>

続いてオブジェクトの作成

index.html

var webrtc = new SimpleWebRTC({
                remoteVideosEl: 'remoteVideo',
                autoRequestMedia: true
            });

「trap」というビデオ窓に入れます

webrtc.on('readyToCall', function () {
    webrtc.joinRoom('trap');
});

最後に相手側の映像を映す要素を置きます。

<div id='remoteVideo'></div>

もう一方のブラウザでページを開いて、ビデオ映像が共有されていれば準備OKです！
あとは格安SIMかなんかのスマホを罠の近くに仕掛けに行きましょう！

#まとめ
1.足跡を探します。
2.ヌタ場を見つけます。
3.罠を仕掛けます。
4.SimpleWebRTCをいれたページを用意します。
5.ページを開きっぱで罠の近くにスマホを設置します。
6.帰ってスリープモードになってないことを祈って寝ます。

以上です！
さあ準備ができたら出かけましょう！

次回はtaka3110さんです！よろしくお願いします！！

##参考
「SimpleWebRTC」
https://github.com/andyet/SimpleWebRTC
「Getting Started with WebRTC」
https://www.amazon.com/Getting-Started-WebRTC-Rob-Manson/dp/1782166300
「大日本猟友会」
http://www.moriniikou.jp/