Adawarp.jsを使ってみてビデオチャットを作ってみた。（ローカルサーバー不要ver）

#About Adawarp.js
WebRTCを簡単＆柔軟に扱えるプラットフォーム

#WebRTCとは
WebRTCは、ブラウザや専用アプリ同士でリアルタイムに映像、音声、データを送受信できる画期的な新技術です。Adawarpを使えば、サーバを準備することなく、そして一切の登録をする必要もなくビデオチャットを作ることができます。

#開発環境
Mac OS

# 準備するもの
Firefoxの最新版
テキストエディタ

#Setup
01: Firefoxの最新版をここからインストールします。
[https://www.mozilla.org/en-US/firefox/new/](https://www.mozilla.org/en-US/firefox/new/)
<img width="990" alt="Screen Shot 2016-11-18 at 07.53.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/145134/951bc8c0-44de-d8ba-bc4c-879fee8c59e1.png">
:warning:Chromeでやる際にはローカルサーバーを立てる必要があります。それは次回以降紹介します。

02: テキストエディタを開きます。
<img width="819" alt="text.png" src="https://qiita-image-store.s3.amazonaws.com/0/145134/510c7a29-d9c0-3c11-1a48-2f32d09afded.png">

03: メニューバー -> テキストエディタ -> 環境設定を開きます。
<img width="459" alt="Screen Shot 2016-11-18 at 08.22.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/145134/9d62726f-c379-e124-9f5c-c96abac73681.png">

04: New Document -> FormatをPlain textにチェック  
<img width="436" alt="Screen Shot 2016-11-18 at 08.22.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/145134/ab9e572f-5693-ba88-ee29-8971d8e6d07b.png">

05: Open and Save -> When Opening a FileをDisplay HTML file as HTML codeにチェック
<img width="433" alt="Screen Shot 2016-11-18 at 08.23.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/145134/09b95273-e1cc-df81-a743-dd529eb241b5.png">


06: このコードをコピペします。

```html:videchat.html
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
  <script src="https://unpkg.com/adawarp@latest/dist/adawarp.js"></script>
</head>
<body>
<h1>ADAWARP video chat</h1>
<div>
  <video id="my-video" style="width: 300px;" autoplay muted></video>
  <video id="peer-video" style="width: 300px;" autoplay></video>
</div>
MyID: <span id="id1">-</span><br>PeerID: <span id="id2">-</span><br>
<input type="text" placeholder="PeerID" id="peer-id-input"><br>
<button onclick="callStart()">Start Call</button>
<button onclick="callEnd()">End Call</button>
<script>
  const peer = new Adawarp(); let localStream, connectedCall;
  navigator.mediaDevices.getUserMedia({audio: true, video: true}).then(stream => {
    localStream = stream;
    document.getElementById("my-video").src = URL.createObjectURL(stream);
  }, () => { alert("get user media Error!"); }) ;
  peer.on('open',() => {document.getElementById("id1").innerHTML = peer.id});
  peer.login();
  peer.on('call', function(call){ call.answer(localStream); callOn(call); });
  function callStart(){
    var peer_id = document.getElementById("peer-id-input").value;
    var call = peer.call(peer_id, localStream);
    callOn(call);
  }
  function callOn(call) {
    call.on('stream', stream => {
      document.getElementById("id2").innerHTML = call.peer;
      connectedCall = call;
      var url = URL.createObjectURL(stream);
      document.getElementById("peer-video").src = url;
    });
  }
  function callEnd() { connectedCall.close(); }
</script>
</body>
</html>
```

07: videochat.htmlとしてDesktopに保存します。
<img width="617" alt="Screen Shot 2016-11-18 at 08.31.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/145134/c6665ccc-1996-859e-96be-f70ef5a72a70.png">


08: Desktopのvideochat.htmlを右クリック→このアプリケーションで開く→Firefoxを選択
<img width="531" alt="open.png" src="https://qiita-image-store.s3.amazonaws.com/0/145134/e5628f88-9702-99a5-2c69-ef982bdf98b2.png">

09: カメラとマイクを許可してください。
<img width="583" alt="Screen Shot 2016-11-18 at 08.32.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/145134/f2337327-4e9d-08e2-6520-ac7ad4b004f1.png">

10: Face Cameraであなたの顔が写ったら成功です！  
<img width="604" alt="Screen Shot 2016-11-18 at 08.34.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/145134/7fbe0645-3c26-07fa-2136-737724f389d5.png">

11: もう一度新しいページを開いて、前のページのIDにStart Callしてみましょう。
<img width="669" alt="Screen Shot 2016-11-18 at 08.36.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/145134/ef47f39c-6c47-e4c6-4e96-66d7e673b035.png">

画面が2つ写って、音がハウリングしていたら成功です！  
このIDはグローバルなので、他のPCで立ち上げたvideochat.htmlからもアクセスすることが出来ます！

#Next Step
Chromeで動作させるために、簡単なローカルサーバーの立て方をご紹介します。