HTMLメディア・キャプチャー

A. 例

この項は、非規範的です。

次の例は、ホスティング・デバイスのメディア・キャプチャー性能を用いて、特定のMIMEタイプのメディアのキャプチャーを行うのがユーザにとって望ましいというヒントを与える方法を示しています。HTMLフォームを用いたシンプルな宣言文の例と、スクリプトの記述を含むより高度な例の両方を示しています。

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

  <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>

• あるいは、デバイス内の周囲向きビデオ・カメラを用いて、動画をキャプチャーする場合、
  例2

  <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>

• あるいは、デバイス内のマイクを用いて音声をキャプチャーする場合(優先向きモードが定義されていなければ、実装固有のデフォルトの向きモードにフォールバックする)
  例3

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

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

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

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

  var input = document.querySelector('input[type=file]'); // 例4を参照
  
  input.onchange = function () {
    var file = input.files[0];
  
    upload(file);
    drawOnCanvas(file);   // 例6を参照
    displayAsImage(file); // 例7を参照
  };
  
  function upload(file) {
    var form = new FormData(),
        xhr = new XMLHttpRequest();
  
    form.append('image', file);
    xhr.open('post', 'server.php', true);
    xhr.send(form);
  }

  例えば、FileReaderとcanvasの要素を用いてクライアント・サイドで画像編集を行うことを目的としている場合などには、画像をアップロードせずにクライアント・サイドに表示することもできます。
  例6

  function drawOnCanvas(file) {
    var reader = new FileReader();
  
    reader.onload = function (e) {
      var dataURL = e.target.result,
          c = document.querySelector('canvas'), // 例4を参照
          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);
  }

  あるいは、createObjectURL()メソッドやimg要素を用いて画像の表示のみを行います。
  例7

  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);
  }

input要素のaccept属性がimage/*に設定されていて、例1または例4のとおりにcapture属性が指定されている場合、ファイル・ピッカーは、以下のようにレンダリングを行うことができます。

属性が指定されていなければ、ファイル・ピッカーは、以下のようにレンダリングを行うことができます。