Colin's Blog
[javascript] 모바일 디바이스의 카메라와 사진 기능 활용하기

현대 모바일 디바이스는 강력한 카메라와 사진 관련 기능을 제공합니다. 이러한 기능들을 활용하여 사용자들은 풍부한 사진 체험을 할 수 있습니다.

카메라 접근하기

모바일 디바이스의 카메라에 접근하기 위해서는 웹 브라우저의 navigator.mediaDevices.getUserMedia() 메서드를 사용해야 합니다. 이를 통해 웹 앱에서 카메라에 접근하여 실시간으로 비디오 스트림을 받을 수 있습니다.

navigator.mediaDevices.getUserMedia({ video: true })
  .then(function(stream) {
    // 비디오 스트림을 화면에 표시하는 로직을 작성합니다.
  })
  .catch(function(error) {
    console.error('카메라 접근에 실패했습니다.', error);
  });

사진 촬영하기

사진을 촬영하기 위해서는 HTML5의 <input type="file"> 엘리먼트를 사용할 수 있습니다. 이를 통해 사용자가 사진을 선택하고 웹 앱으로 업로드할 수 있습니다.

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

또한, JavaScript를 사용하여 프로그래밍적으로 사진을 촬영할 수도 있습니다. 이를 위해 HTML5의 canvas 엘리먼트와 getUserMedia() 메서드를 조합하여 사용할 수 있습니다.

navigator.mediaDevices.getUserMedia({ video: true })
  .then(function(stream) {
    const video = document.createElement('video');
    video.srcObject = stream;
    video.play();

    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    
    // 사진을 캡처하는 로직을 작성합니다.
    // 캡처한 이미지는 canvas.toDataURL() 메서드를 사용하여 데이터 URL로 변환할 수 있습니다.
  })
  .catch(function(error) {
    console.error('카메라 접근에 실패했습니다.', error);
  });

사진 편집하기

웹 앱에서 촬영한 사진을 편집하기 위해서는 이미지 처리 라이브러리를 활용할 수 있습니다. 예를 들어, fabric.js나 CamanJS와 같은 라이브러리를 사용하여 사진 편집 기능을 추가할 수 있습니다.

// fabric.js 사용 예시
const canvas = new fabric.Canvas('canvas');

fabric.Image.fromURL('image.jpg', function(img) {
  canvas.add(img);
});

// CamanJS 사용 예시
Caman('#canvas', 'image.jpg', function() {
  this.brightness(10).render();
});

결론

모바일 디바이스의 카메라와 사진 기능을 활용하여 웹 앱에 다양한 사진 체험을 제공할 수 있습니다. 카메라 접근, 사진 촬영, 사진 편집 등의 기능을 활용하여 사용자들에게 더욱 흥미로운 사진 체험을 선사해 보세요.

참고 자료

© 2018 Colin. All rights reserved.