トップへ(mam-mam.net/)

JavascriptでWEBカメラとマイクからビデオ録画するソースコード

検索:

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

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

実際のサンプル


↑録画開始を押すとマイクとカメラの許可を求められます。許可すると録画が開始されます。

ソースコード

<button id="start" onclick="startRecording()">録画開始</button><br>
<button id="stop" onclick="endRecording()" disabled>録画停止</button><br>
<div id="vdiv"></div>

<script>
var chunks,recorder,velm=null,da=null;
function startRecording(){
  chunks=[];
  //カメラとマイクの使用許可を取得(なるべく320x240のサイズのメディアで届けてほしいと知らせる)
  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;
      //1000ミリ秒録画されるごとにdataavailableイベントが発生
      recorder.start(1000);
    }
  );
}
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});
  if(velm==null){
    velm=document.createElement("video");
    velm.setAttribute("playsInline",true);
    velm.setAttribute("controls",true);
    document.getElementById("vdiv").appendChild(velm);
    document.getElementById("vdiv").appendChild(document.createElement("br"));
    da=document.createElement("a");
    document.getElementById("vdiv").appendChild(da);
  }
  
  da.href=URL.createObjectURL(obj);
  if(recorder.mimeType.match(/x-matroska/)){
    da.download="test.mkv";
  }else if(recorder.mimeType.match(/mp4/)){
    da.download="test.mp4";
  }else if(recorder.mimeType.match(/mpg/)){
    da.download="test.mpg";
  }else{
    da.download="test.webm";
  }
  da.innerHTML="ダウンロード("+da.download+")";
  velm.src=URL.createObjectURL(obj);
}
</script>