그동안 웹에서 오디오와 비디오의 캡쳐는 재생과는 전혀 다른 범주의 기능처럼 인식되어 왔습니다. HTML5는 다른 많은 기능과 마찬가지로 오디오 및 비디오의 재생뿐만이 아니라 오디오나 비디오 입력 스트림의 처리를 가능하도록 그 기능을 확장하였습니다. 이 튜토리얼은 이 기능들을 다루기 위한 기초적인 설정 방법부터 몇가지 일반적인 구현 사례를 설명합니다.
이번 번역은 이원제(+nuri nam)님께서 수고해주셨습니다. :)
"오랜 기간동안 웹 환경은 개발자에게 플래시나 실버라이트와 같은 플러그인을 이용하여 오디오와 비디오 캡쳐를 구현하도록 강요해왔습니다. HTML5는 이러한 플러그인 종속성을 없애고 이들 장치에 대한 입력 스트림을 직접 제어할 수 있도록 기능을 제공하고 있습니다. 입력 스트림을 제어한다는 것은 여러분의 웹 앱을 생각보다 더 크게 확장할 수 있습니다. WebRTC의 일반적인 사례처럼 비디오 컨퍼런스 서비스를 구현할 수도 있지만 조금만 더 아이디어를 덧붙인다면 네이티브에서 구현해왔던 얼굴/모션의 검출 등으로 얼마든지 확장할 수 있습니다."
TL;DR;
지난 세월동안 오디오와 비디오 캡쳐는 외부 플러그인들을 사용할 수 밖에 없었습니다. HTML5는 다양한 하드웨어에 대한 접근을 표준 규격으로 정의하고 있으며 오디오와 비디오의 캡쳐 역시 예외는 아닙니다. 이와 관련해서 그동안 다양한 규격들이 W3C에서 시도되어 왔지만 현재 getUserMedia()를 통해 대다수의 작업을 할 수 있도록 정리되었습니다. 이제 여러분은 getUserMedia()를 통해 사용자의 카메라와 마이크를 웹앱에서 접근할 수 있습니다.
> 멀티미디어 디바이스의 접근
사용자의 멀티미디어 디바이스의 입력 스트림을 제어하기 위해서 다음과 같은 기능들이 필요할 것입니다.
- 미디어에 대한 권한 요청
- 웹캠과 마이크에 접근하기 위해서는 먼저 어떤 디바이스에 어떠한 방식으로 접근하는지에 대한 권한을 getUserMedia()를 이용하여 요청해야 합니다.
- 미디어 기능 요구사항 설정
- 필요하다면 getUserMedia()의 호출 시 접근하고자 하는 미디어 스트림에 대해 필요한 요구사항들(해상도, 비트레이트 등)을 설정할 수 있습니다.
- 미디어 소스의 검색과 선택
- 크롬의 경우 버전 30 이후부터는 getUserMedia()에서 입력 스트림으로 사용가능한 소스를 검색할 수 있도록 MediaStreamTrack.getSources() API를 지원합니다.
- 이 API를 이용하면 현재 디바이스에 지원하고 있는 접근 가능한 입력 스트림 소스에 대한 리스트를 액세스할 수 있으며 이를 통해 적합한 디바이스를 선택할 수 있습니다.
getUserMedia()를 사용할 때 일부 브라우저는 카메라와 마이크에 대한 접근에 대한 사용자 허가를 요청하는 상태바를 표시할 수 있으며 getUserMedia()가 지원되지 않거나 API 호출이 실패하였을때 다른 형태의 미디어로 대체하는 과정이 필요할 수 있습니다.
> 입력 스트림을 통한 몇가지 구현 사례들
디바이스의 입력 스트림에 성공적으로 접근한 뒤에 <video>나 <audio> 태그의 소스로 사용할 수도 있지만 이를 통해 다음과 같이 추가적인 기능을 구현할 수도 있습니다.- 사진 찍기
- <canvas> API의 ctx.drawImage()를 이용하여 입력 스트림을 정적인 사진 이미지 형태로 활용하여 사진 촬영 기능으로 사용할 수 있습니다.
- 효과 적용
- CSS Filters를 사용해서 <video>에 대한 효과를 적용할 수 있습니다.
- 비디오 스트림을 WebGL Texture로 이용할 수 있습니다.
- 크롬의 경우 getUserMedia()의 스트림을 Web Audio API로 연결하여 오디오를 직접 제어할 수 있습니다.
이제 웹앱의 범주를 확장하기 위한 다양한 시도들 중의 하나인 getUserMedia()를 이용하여 다양한 어플리케이션의 개발을 시도해보시기 바랍니다. 자세한 내용은 튜토리얼을 참조하세요.
번역 링크
- HTML5에서 오디오 및 비디오 캡쳐하기
참고 글
- WebRTC 시작하기
- 원문 - Getting started with WebRTC
- 번역 - WebRTC 시작하기, live!
- WebRTC 데이터채널: 고성능 데이터 교환을 위한 WebRTC 데이터 채널
댓글 없음:
댓글 쓰기