HTML Media Capture

A. 예제

이 섹션은 표준이 아닙니다.

아래 예제는 유저의 호스팅 기기의 미디어 캡쳐 기능을 이용하여 특정 MIME 타입의 미디어를 캡쳐하는 유저가 선호하는 방법에 대한 힌트를 제공하는 예제입니다. HTML form을 사용하는 간단한 선언적 예제와 스크립팅을 포함한 더 고급 예제도 제시합니다.

• 기기의 유저 방향 카메라를 사용하여 사진을 찍고 HTML form을 시용하여 찍은 사진을 업로드합니다.
  Example 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>

• 혹은 기기의 로컬 비디오 카메라를 사용하여 비디오를 캡쳐하려면 아래와 같이 할 수 있습니다.
  Example 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>

• 혹은 기기의 로컬 마이크를 사용하여 오디오를 캡쳐하려면 아래와 같이 할 수 있습니다. (선호하는 외장 모드를 정의되지 않은 상태에서, 구현체에서 정의한 기본 외장 모드로 진입합니다)
  Example 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 속성을 정의할 수 있습니다.
  Example 4

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

  XMLHttpRequest를 이용한 스크립트로 파일 업로드를 제어할 수 있습니다.
  Example 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 요소를 사용하여 클라이언트 이미지 편집 목적으로 사용할 수 있습니다.
  Example 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);
  }

  단순히 이미지를 보여주고싶다면 img 요소와 createObjectURL() 메서드를 사용하면 됩니다.
  Example 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/*로 정의되어있고 Example 1이나 Example 4처럼 capture 속성이 정의되었다면, 파일 피커는 다음과 같이 나옵니다.

속성이 정의되지않았다면, 파일 피커는 다음과 같이 렌더링될 수 있습니다.