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]'); // see Example 4
  
  input.onchange = function () {
    var file = input.files[0];
  
    upload(file);
    drawOnCanvas(file);   // see Example 6
    displayAsImage(file); // see Example 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'), // see Example 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/* に設定され、capture 属性が 例 1 または 例 4 のように指定されている場合、ファイルピッカーは 以下に示すように レンダリングできます。

属性が指定されていない場合、ファイルピッカーは 以下に表すようにレンダリングできます。