html5 カメラ起動 capture属性について

カメラ起動

input要素のtype属性がファイル・アップロード状態になっていて、そのaccept属性が指定されている場合に、capture属性 の項の規則が適用されます。

ユーザ向きカメラを用いて写真を撮影し、撮影された写真をHTMLフォームでアップロードする場合

<form action="server.cgi" method="post" enctype="multipart/form-data">
  <input type="file" name="image" accept="image/*" capture="user">
  <input type="submit" value="Upload">
</form>

周囲向きビデオ・カメラを用いて、動画をキャプチャーする場合

<form action="server.cgi" method="post" enctype="multipart/form-data">
  <input type="file" name="video" accept="video/*" capture="environment">
  <input type="submit" value="Upload">
</form>

より高度なユースケースの場合は、マークアップでcapture属性を指定

<input type="file" accept="image/*" capture>
<canvas></canvas>

XMLHttpRequestのスクリプトでファイル・アップロードを処理します

var input = document.querySelector('input[type=file]'); 

input.onchange = function () {
  var file = input.files[0];

  upload(file);
  drawOnCanvas(file);   
  displayAsImage(file); 
};

function upload(file) {
  var form = new FormData(),
      xhr = new XMLHttpRequest();

  form.append('image', file);
  xhr.open('post', 'server.php', true);
  xhr.send(form);
}

クライアント・サイドで画像編集を行うことを目的としている場合などには、画像をアップロードせずにクライアント・サイドに表示ができる

unction drawOnCanvas(file) {
  var reader = new FileReader();

  reader.onload = function (e) {
    var dataURL = e.target.result,
        c = document.querySelector('canvas'), 
        ctx = c.getContext('2d'),
        img = new Image();

    img.onload = function() {
      c.width = img.width;
      c.height = img.height;
      ctx.drawImage(img, 0, 0);
    };

    img.src = dataURL;
  };

  reader.readAsDataURL(file);
}

img要素を用いて画像の表示のみ

function displayAsImage(file) {
  var imgURL = URL.createObjectURL(file),
      img = document.createElement('img');

  img.onload = function() {
    URL.revokeObjectURL(imgURL);
  };

  img.src = imgURL;
  document.body.appendChild(img);
}