모바일 디바이스에서 native app을 만들지 않고 웹브라우저에서 제공되는 기능을 통해,
카메라를 실행시켜 사진/동영상을 찍고 해당 데이터를 java script를 통해 접근/제어할 수 있음.
W3C API에서 Media Capture에 관련된 건 2가지가 있는데,
하나는 단순 미디어 데이터 접근에 관한 것이고, 나머지 하나는 스트림 수준에서 접근하는 것.
http://mobilehtml5.org/ 에서 확인해 본 결과,
미디어 데이터에만 접근할 수 있는 HTML Media Capture의 경우,
현재 iOS와 Android 브라우저에서 지원이 되지만,
스트림 수준에서 접근할 수 있는 통칭 getUserMedia API는 Chrome/FireFox에서만 지원되고 있음.
그러므로 이 포스팅에서는 단순 HTML Media Capture에 대한 간단한 예제만 다룸.
모든 테스트는 iOS8 Safari 브라우저에서만 해봤음.
1. 웹 페이지에서 버튼을 눌러 사진촬영 후 <img> 태그에 촬영한 사진 보여주기.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Camera</title>
<script src="/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
if (!('url' in window) && ('webkitURL' in window)) {
window.URL = window.webkitURL;
}
$('#camera').change(function(e){
$('#pic').attr('src', URL.createObjectURL(e.target.files[0]));
});
});
</script>
</head>
<body>
<input type="file" id="camera" name="camera" capture="camera" accept="image/*" />
<br />
<img id="pic" style="width:100%;" />
</body>
</html>
2. 웹 페이지에서 버튼을 눌러 동영상촬영 후 <video> 태그에서 재생버튼을 눌러 촬영한 동영상 보여주기.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Camera</title>
<script src="/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
if (!('url' in window) && ('webkitURL' in window)) {
window.URL = window.webkitURL;
}
$('#camcorder').change(function(e){
$('#mov').attr('src', URL.createObjectURL(e.target.files[0]));
// iOS Safari에서는 autoplay가 안먹히므로 알림
alert('동영상 재생버튼을 누르시오');
});
});
</script>
</head>
<body>
<input type="file" id="camcorder" name="camcorder" capture="camcorder" accept="video/*" />
<br />
<video id="mov"></video>
</body>
</html>
3. 사진과 동영상을 PHP쪽에 넘겨보면 사진은 .jpg, 동영상은 .MOV로 나옴.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Camera</title>
</head>
<body>
<form method="post" enctype="multipart/form-data" action="camera.php">
<input type="file" id="camera" name="camera" capture="camera" accept="image/*" />
<input type="file" id="camcorder" name="camcorder" capture="camcorder" accept="video/*" />
<br />
<input type="submit" value="전송" />
</form>
</body>
</html>
동영상은 별 의미가 없을 수도 있겠지만,
사진의 경우 <canvas>에 밀어넣고 이런저런 많은 응용을 할 수 있을 듯 하다.
'HTML/CSS' 카테고리의 다른 글
| [HTML5] canvas의 마우스 이벤트 통과시키기 (0) | 2012.10.31 |
|---|---|
| [HTML5] canvas로 double buffering 하기 (2) | 2012.05.15 |
| [HTML5] Notifications (브라우저에 트위터앱처럼 push 기능구현) (0) | 2010.12.31 |
| [HTML5] Web Messaging (cross-domain messaging, channel messaging) (0) | 2010.12.31 |
| [HTML5] 저장가능한 그림판 (canvas, localStorage) (6) | 2010.12.30 |
