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와 같이 지정된 경우, 파일 선택기는 아래에 제시된 것처럼 렌더링될 수 있다:

속성이 지정되지 않은 경우, 파일 선택기는 아래에 나타난 것처럼 렌더링될 수 있다: