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属性が指定されている場合、ファイル・ピッカーは、以下のようにレンダリングを行うことができます。

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