About Adawarp.js

WebRTCを簡単＆柔軟に扱えるプラットフォーム

WebRTCとは

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

開発環境

Mac OS

準備するもの

Firefoxの最新版
テキストエディタ

Setup

01: Firefoxの最新版をここからインストールします。
https://www.mozilla.org/en-US/firefox/new/

Chromeでやる際にはローカルサーバーを立てる必要があります。それは次回以降紹介します。

02: テキストエディタを開きます。

03: メニューバー -> テキストエディタ -> 環境設定を開きます。

04: New Document -> FormatをPlain textにチェック

05: Open and Save -> When Opening a FileをDisplay HTML file as HTML codeにチェック

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

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に保存します。

08: Desktopのvideochat.htmlを右クリック→このアプリケーションで開く→Firefoxを選択

09: カメラとマイクを許可してください。

10: Face Cameraであなたの顔が写ったら成功です！

11: もう一度新しいページを開いて、前のページのIDにStart Callしてみましょう。

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

Next Step

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