webrtcでの簡易ビデオチャットについて

WebRTCを利用して簡易ビデオチャットを構成したいが
参考にしているサイトのソースを手直ししながら色々試しているが、素人のため、記述がそもそもよくわからない

やりたいことは、下記のとおりです。

自分のIDを取得し、サーバーのDBにIDを記録する。
相手のID情報をDBに検索にいき、値がなければ、繰り返し
DBを参照しにいって、見つかったら繰り返しを抜け、接続のフロー
見つからないとき、中断ボタンなどを押すと、接続自体をやめる

ビデオチャットの終わりは、切断ボタンを押したらカメラを停止し、同時にDB上の自分のIDを消す。

DBへの接続などは、他のソースで実現しているが、

自分の取得したIDを変数に代入する
（このあとサーバーにPOST）
この相手のID取得を繰り返す
値が得られたら次のフロー
繰り返し中に割り込みで中断すると繰り返しを抜け、中止

という動きと、

なぜか切断ボタンを押してもカメラが終了しない

などscript の記述の順番も含め、
もろもろよくわかっておりません。

どなたかお助けを・・・

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>PeerJS sample</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script type="text/javascript" src="http://cdn.peerjs.com/0.3/peer.min.js"></script> <script> var key = "key"; var myid = "myid"; var toid = "toid"; var myvideoid; var tovideoid; document.getElementById("key").innerHTML = key; document.getElementById("my_id").innerHTML = myid; document.getElementById("to_id").innerHTML = toid; document.getElementById("my_videoid").innerHTML = myvideoid; document.getElementById("to_videoid").innerHTML = tovideoid; functioin disconnect() { localMediaStream.stop(); } </script> <script> navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; var myStream; var peer = new Peer({key: 'xxxxxxxxxx'}); //ここは peerの取得した ID固定値が入ります。 function connect() { //相手のIDを手入力で入力された情報を取得する部分 //ここをDBから相手のIDを取得するように変え変数に代入する var setOthersStream = function(stream){ $('#others-video').prop('src', URL.createObjectURL(stream)); }; var setMyStream = function(stream){ myStream = stream; $('#video').prop('src', URL.createObjectURL(stream)); }; //ここで自分のIDを取得？ //サーバーのDBに自分IDを登録したい peer.on('open', function(id){ $('#peer-id').text(id); }); //callボタンが押されたときに呼び出される？ // peer.on('call', function(call){ call.answer(myStream); call.on('stream', setOthersStream); }); //ここはいつ？ $(function(){ navigator.getUserMedia({audio: true, video: true}, setMyStream, function(){}); $('#call').on('click', function(){ var call = peer.call($('#others-peer-id').val(), myStream); call.on('stream', setOthersStream); }); }); peer.on('error', function(e){ console.log(e.message); }); } </script> </head> <body> <input type="button" name="connect" value="接続" onclick="connect()"> <input type="button" name="disconnect" value="切断" onclick="disconnect()"> <p>あなたのID : <span id="peer-id"></span></p> <div id="dial"> <input type="text" id="others-peer-id" placeholder="相手のIDを入力" /><button id="call">コール</button> </div>

<tr>
	<td>myid</td>
	 <td><span id="my_id"></span></td>
</tr>
<tr>
	<td>toid</td>
	<td><span id="to_id"></span></td>
</tr>
<tr>
	<td>myvideoid</td>
	<td><span id="my_videoid"></span></td>
</tr>
<tr>
	<td>tovideoid</td>
	<td><span id="to_videoid"></span></td>
</tr>

</table> </body> </html>