JavascriptでUSBカメラとマイクからビデオ録画

JavascriptでUSBカメラとマイクから音声付ビデオ録画を行う

Javascriptを使うとカメラやマイクに接続することができ、データを取得することができます。
以下を使うとカメラとマイクの使用許可を取得できます。小さい画像で録画したいので「出来れば320x240のサイズ」でお願いしています。
navigator.mediaDevices.getUserMedia({audio:true, video:{facingMode:"user",width:{ideal:320},height:{ideal:240}}})
使用許可が取得出来たらストリームを返してきます。
MediaRecorderのコンストラクタの引数にストリームを渡してインスタンスを作成します。
MediaRecorderオブジェクトのstart(ミリ秒を指定)メソッドで、指定したミリ秒録画されるごとにdataavailableイベントが発生してメディア（録画データ）を返してきます。
返してきたメディア（録画データ）を配列に追加していき、録画停止（recorder.stop）で、配列に保存しておいたメディアをダウンロードさせます。

実際のサンプル

デフォルトで「ミュート」設定になっています。（ミュートを解除すれば音が出ます）

ソースコード

<button id="start" onclick="startRecording()">録画開始</button><br>
<button id="stop" onclick="endRecording()" disabled>録画停止</button><br>
<video id="video" autoplay playsInline muted controls></video><br>
<a id="dl"></a>

<script>
var chunks,recorder;
function startRecording(){
  chunks=[];
  navigator.mediaDevices.getUserMedia({audio:true, video:{facingMode:"user",width:{ideal:320},height:{ideal:240}}}).then(
    function(stream){
      document.querySelector("#stop").removeAttribute("disabled");
      document.querySelector("#start").setAttribute("disabled","");
      recorder = new MediaRecorder(stream);
      recorder.ondataavailable = function(el){
        if (el.data.size>0){chunks.push(el.data)};
      }
      recorder.onstop = onStop;
      recorder.start(1000);//1000ミリ秒録画されるごとにdataavailableイベントが発生する
    }
  );
}
function endRecording(){
  if(recorder){recorder.stop();}
}
function onStop(){
  if (!chunks.length){return;}
  document.querySelector("#stop").setAttribute("disabled","");
  document.querySelector("#start").removeAttribute("disabled");
  var obj=new Blob(chunks,{type:recorder.mimeType});
  var dl=document.querySelector("#dl");
  dl.href=URL.createObjectURL(obj);
  if(recorder.mimeType.match(/x-matroska/)){
    dl.download="test.mkv";
  }else if(recorder.mimeType.match(/mp4/)){
    dl.download="test.mp4";
  }else if(recorder.mimeType.match(/mpg/)){
    dl.download="test.mpg";
  }else{
    dl.download="test.webm";
  }
  dl.innerHTML="ダウンロード（"+dl.download+"）";
  document.querySelector("#video").src=URL.createObjectURL(obj);
}
</script>