Home > Blog > HTML5

각카테고리별 기술문서를 올려놓았습니다.

HTML5

Capturing Audio & Video in HTML5 ( 이어서...) (0)

페이지 정보

작성자 :maverick 작성일 :15-03-16 14:40 조회 :4,128회

본문

내용이 짤려 버렸네.... 이어서 내용 갑니다..

 

발췌 : http://www.html5rocks.com/ko/tutorials/getusermedia/intro/

======================================================

 

 

사진 찍기

<canvas> API의 ctx.drawImage(video, 0, 0) 함수는 <video> 프레임들을<canvas>로 쉽게 그려줍니다. 우리는 getUserMedia()를 통해 비디오 입력을 가지고 있기 때문에,쉽게 실시간 포토부스 어플리케이션을 만들 수 있습니다:

<video autoplay></video>
<img src="">
<canvas style="display:none;"></canvas>

<script>
  var video = document.querySelector('video');
  var canvas = document.querySelector('canvas');
  var ctx = canvas.getContext('2d');
  var localMediaStream = null;

  function snapshot() {
    if (localMediaStream) {
      ctx.drawImage(video, 0, 0);
      // "image/webp" works in Chrome.
      // Other browsers will fall back to image/png.
      document.querySelector('img').src = canvas.toDataURL('image/webp');
    }
  }

  video.addEventListener('click', snapshot, false);

  // Not showing vendor prefixes or code that works cross-browser.
  navigator.getUserMedia({video: true}, function(stream) {
    video.src = window.URL.createObjectURL(stream);
    localMediaStream = stream;
  }, errorCallback);
</script>
 intro

Capture Stop

Applying Effects

CSS Filters

CSS Filters를 사용해서 <video>에 여러가지 재미있는 효과들을 적용할 수 있습니다:

<style>
video {
  width: 307px;
  height: 250px;
  background: rgba(255,255,255,0.5);
  border: 1px solid #ccc;
}
.grayscale {
  +filter: grayscale(1);
}
.sepia {
  +filter: sepia(1);
}
.blur {
  +filter: blur(3px);
}
...
</style>

<video autoplay></video>

<script>
var idx = 0;
var filters = ['grayscale', 'sepia', 'blur', 'brightness',
               'contrast', 'hue-rotate', 'hue-rotate2',
               'hue-rotate3', 'saturate', 'invert', ''];

function changeFilter(e) {
  var el = e.target;
  el.className = '';
  var effect = filters[idx++ % filters.length]; // loop through filters.
  if (effect) {
    el.classList.add(effect);
  }
}

document.querySelector('video').addEventListener(
    'click', changeFilter, false);
</script>

Click the video to cycle through CSS filters

Capture video Stop

WebGL Textures

비디오 캡쳐의 놀라운 사용 예는 WebGL Texture로 실시간으로 입력그리는 것 입니다. (다른 사람들에게는 쉽겠지만) 저는 WebGL에 관해 전혀 모르기 떄문에, Jerome Etienne의 튜토리얼 과 데모를 확인하는 것을 추천해드립니다. 예제에서는 실시간 입력을 WebGL Texture로 그리기 위해 getUserMedia()와 Three.js를 어떻게 사용하는지 알려줍니다.

Web Audio API와 함께 getUserMedia 사용하기

내 꿈들중 하나는 오픈 웹기술만으로 브라우저상의 AutoTune을 만드는 것 입니다!

크롬은 getUserMedia()에서 실시간 효과들을 위한 Web Audio API로 실시간 마이크 입력을 지원합니다. 마이크 입력에서 Web Audio API로 연결하는 방법은 다음과 같습니다:

window.AudioContext = window.AudioContext ||
                      window.webkitAudioContext;

var context = new AudioContext();

navigator.getUserMedia({audio: true}, function(stream) {
  var microphone = context.createMediaStreamSource(stream);
  var filter = context.createBiquadFilter();

  // microphone -> filter -> destination.
  microphone.connect(filter);
  filter.connect(context.destination);
}, errorCallback);

Demos:

더 많은 정보는 Chris Wilson's post에서 확인하시기 바랍니다.

결론

일반적으로, 웹에서 장치에 접근하는 것은 힘든 일이 었습니다. 많은 사람들이 시도했고, 일부만이 성공했습니다. 대부분의 이전 아이디어들은 폐쇄적이거나 널리 적용되지 못하였습니다.

실제 문제는 웹의 보안 모델과 현실세계의 보안 모델이 매우 다르다는 것입니다. 예를 들어, 모든 Joe Shmoe web site가 내 비디오 카메라에 임의로 접근하는 것을 원하지 않을 것입니다. 그것을 허용하기란 정말 어려운 일입니다.

PhoneGap같은 중계 프레임워크는 경계를 만든 것에 도움을 줄 것이지만, 그건 임시방편일 뿐입니다. 웹앱이 데스크탑 앱과 경쟁하기 위해서는 기본장치로의 접근이 필요합니다.

getUserMedia()는 새로운 장치들에 접근하는 첫번째 파도일 뿐입니다. 저는 가까운 미래에 더 많은 것들을 계속 볼 수 있기를 기원합니다!

Additional resources

Demos

 

댓글목록

등록된 댓글이 없습니다.

주소 : 서울시 서초구 서초동 사임당로8길 16 성재빌딩 2층, 담당자(이철원부장) : 010-4235-9876 , maverick@knowledgepoint.co.kr

사업자번호 : 120-87-90108, 전화번호 : 070-4325-4033, FAX : 02-6937-1035

Copyrights 2012(c). All rights reserverd knowledgepoint.co.LTD