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: このコードをコピペします。
<!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で動作させるために、簡単なローカルサーバーの立て方をご紹介します。