HTML5_html5 튜토리얼 팁을 사용하여 오디오 및 비디오 정보 캡처 개요 및 예

이 기사 개요
오디오 및 비디오 정보를 캡처하는 것은 웹 개발에서 오랫동안 어려운 문제였습니다. 수년 동안 우리는 이러한 요구를 충족시키기 위해 브라우저 플러그인에 의존해 왔습니다.
HTML 5에는 GPS 장치에 액세스하는 Geolocation API, 가속도계 장치에 액세스하는 Orientation API, GPU 장치에 액세스하는 WebGL API, 오디오 재생 장치에 액세스하는 Web Audio API 등 하드웨어 장치에 액세스할 수 있는 많은 API가 있습니다. . 개발자가 JavaScript 스크립트 코드를 작성하여 기본 하드웨어 장치에 직접 액세스할 수 있기 때문에 이러한 API는 매우 강력합니다.
이 기사에서는 navigatior.getUserMedia() 메소드를 사용하여 웹 애플리케이션이 사용자의 카메라 및 마이크 장치에 액세스할 수 있도록 하는 새로운 API를 소개합니다.

미디어 데이터 캡처 기술 개발의 역사
지난 몇 년 동안 웹 애플리케이션에서 클라이언트 로컬 장치에 액세스해야 하는 필요성이 대두되기 시작하여 W3C 조직에서 조직을 결정했습니다. 이 요구 사항을 실현하기 위한 통합 표준을 개발하기 위한 DAP(Device APIS POLICY) 실무 그룹입니다.
2011년에 무슨 일이 일어났는지 살펴보겠습니다.

HTML 페이지 파일에서 미디어 데이터 캡처
DAP 워킹 그룹에서 개발할 첫 번째 표준은 웹의 HTML 페이지에서 미디어 데이터를 캡처하는 방법입니다. 응용 프로그램. 그들은 파일 유형()의 입력 요소를 오버로드하고 accept 속성에 새 속성 값을 추가하기로 결정했습니다.
개발자가 사용자가 카메라를 통해 사진을 찍는 기능을 구현하고 싶다면 아래와 같이 코드를 작성하면 됩니다.

코드 복사

코드는 다음과 같습니다.

비디오 데이터와 오디오 데이터를 녹음하는 코드는 유사합니다:

코드 복사

코드는 다음과 같습니다.

이 코드에서는 파일 컨트롤(파일 유형의 입력 요소)을 사용하세요. 사진 촬영을 완료하거나 미디어 데이터를 기록하는 기능을 제공합니다. 그러나 이러한 코드에는 일부 관련 요구 사항(예: 캡처한 비디오 데이터를 캔버스 요소에 렌더링하거나 캡처한 비디오 데이터에 WEBGL 필터를 적용하는 등)을 구현하는 기능이 아직 부족하기 때문에 개발자 애플리케이션에서 널리 사용되지 않았습니다.
지원되는 브라우저:
Android 3.0 브라우저
Android용 Chrome(0.16)
Firefox Mobile 10.0
장치 요소
파일 제어를 사용하는 경우 미디어 데이터를 캡처하고 처리합니다. 기능이 매우 제한되어 있으므로 모든 장치를 지원할 수 있는 새로운 표준이 등장했습니다. 이 표준은 장치 요소를 사용합니다.
Opera 브라우저는 장치 요소를 통해 비디오 데이터를 캡처하는 최초의 브라우저입니다. 거의 같은 날 WhatWG 조직은 navigator.getUserMedia() 메서드를 사용하여 미디어 데이터를 캡처하기로 결정했습니다. 일주일 후 Opera는 navigator.getUserMedia() 메소드를 지원하는 새로운 브라우저를 출시했습니다. 나중에 Microsoft Tools는 이 방법을 지원하는 IE 9 브라우저를 출시했습니다.
device 요소의 사용법은 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

<script> <br />function update(stream) { <br />document.querySelector('video').src = stream.url <br />} <br /></script>
지원되는 브라우저:
안타깝게도 현재까지 기기 요소를 지원하는 공식 브라우저 버전은 없습니다.
WEBRTC
최근 WebRTC(Web Real Time Communication: 웹 실시간 통신) API의 등장으로 미디어 데이터 캡처 기술이 큰 발전을 이루었습니다. Google, Opera, Mozilla 및 기타 회사는 브라우저에 이를 구현하기 위해 열심히 노력하고 있습니다.
WebRTC API는 클라이언트의 로컬 카메라 또는 마이크 장치에 액세스하는 기능을 제공하는 getUserMedia 메소드와 밀접하게 관련된 API입니다.
지원 브라우저:
현재까지 Chrome 18 버전의 브라우저에서는 chrome://flags 페이지에서 WebRTC를 설정한 후 사용할 수 있습니다. Chrome 21 버전의 브라우저에서는 이 API를 사용하고 있습니다. 기본적으로 더 이상 설정이 필요하지 않습니다. WebRTC API는 Opera 12 및 Firefox 17 이상의 브라우저에서 기본적으로 지원됩니다.
getUserMedia 메소드 사용
getUserMedia 메소드를 사용하면 플러그인에 의존하지 않고 클라이언트의 로컬 카메라 장치 및 마이크 장치에 직접 액세스할 수 있습니다.
브라우저 지원 감지
아래 방법을 사용하여 브라우저가 getUserMedia 메소드를 지원하는지 감지할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

function hasGetUserMedia() {
/ /참고: Opera 브라우저에서는 접두사
return이 사용되지 않습니다!!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia)
}
if (hasGetUserMedia()) {
alert('귀하의 브라우저는 getUserMedia 메소드를 지원합니다.');
}
else {
alert('귀하의 브라우저는 getUserMedia 메소드를 지원하지 않습니다.');
}

기기 접근 권한 받기
클라이언트 카메라 기기와 마이크 기기에 접근하기 위해서는 먼저 권한을 받아야 합니다. getUserMedia 메소드의 첫 번째 매개변수는 미디어 유형을 지정하는 객체입니다. 예를 들어 카메라 장치에 접근하려면 첫 번째 매개변수가 {video:true}여야 합니다. 카메라 장치와 마이크 장치에 동시에 접근하려면 {video:true,audio: true} 매개변수는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

<script> <br />var onFailSoHard = function() { <br />alert('장치 액세스 거부됨'); 🎜>}; <br />//공급업체 접두어 사용 안 함 <br />navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) { <br />var video = document.getElementById('video') ; <br />video.src = window.URL.createObjectURL( localMediaStream); <br />//참고: getUserMedia 메소드를 사용할 때 onloadedmetadata 이벤트는 Chrome 브라우저에서 트리거되지 않습니다. <br />video.onloadedmetadata = function( e) { <br />//다음 코드는 생략됩니다<br />} ; <br />}, onFailSoHard) <br /></script>

비디오 요소가 결합되었습니다. video 요소의 src 속성 값을 사용하지 않고, video 요소에 미디어 파일을 참조하는 URL 주소를 지정하고, 카메라에서 얻은 비디오 데이터를 나타내는 LocalMediaStream 객체를 Blob URL로 변환한다는 점에 유의하시기 바랍니다.
이 코드에서는 autoplay 속성이 video 요소에도 사용됩니다. 이 속성을 사용하지 않으면 video 요소가 획득된 첫 번째 프레임에 유지됩니다.
참고: Chrome 브라우저에서 {audio:true}만 사용하면 Opera 브라우저에서도 오디오 요소를 사용할 수 없습니다.
여러 브라우저에서 getUserMedia 메소드를 동시에 지원하려면 아래 코드를 사용하세요.

코드 복사 코드는 다음과 같습니다.

window.URL = window.URL || window.webkitURL
navigator.getUserMedia = navigator.getUserMedia || |
navigator.msGetUserMedia;
var video = document.getElementById('video');
if (navigator.getUserMedia)({audio: true, video: true}, function (stream) {
video.src = window.URL.createObjectURL(stream);
}, onFailSoHard)
}
else {
alert('Your 브라우저는 getUserMedia 메소드를 지원하지 않습니다.')
}


보안
일부 브라우저에서는 getUserMedia 메소드가 호출되면 사용자에게 카메라 또는 마이크에 대한 액세스를 허용할지 거부할지 묻는 프롬프트 창이 표시됩니다.
사진 찍기
Canvas API에서는 ctx.drawImage(video,0,0) 메소드를 사용하여 video 요소의 특정 프레임을 canvas 요소로 출력할 수 있습니다. 물론, 사용자의 카메라에서 캡쳐된 이미지 정보를 video 요소로 출력하였기 때문에, 물론 video 요소를 통해 이미지 정보를 canvas 요소로 출력할 수도 있습니다. 즉, 실시간 사진 촬영을 구현하는 것입니다. 함수 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

< ;/video> ;


var video = document.getElementById('video');
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d'); var localMediaStream = null;
function snapshot() {
if (localMediaStream) {
ctx.drawImage(video, 0, 0)
document.getElementById('img').src = canvas .toDataURL( 'image/png');
}
}
video.addEventListener('click', snapshot, false)
//공급업체 접두사 사용 안 함
navigator.getUserMedia ({video : true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
localMediaStream = stream;
}, onFailSoHard)

CSS 필터 적용 지금까지 CSS 필터는 Chrome 18 이상의 브라우저에서 사용할 수 있습니다.
CSS 필터를 사용하면 비디오 요소에 캡처된 비디오에 다양한 이미지 필터 효과를 추가할 수 있습니다.

코드 복사코드는 다음과 같습니다.

script>
var idx = 0;
varfilters = ['회색조', '세피아', '흐림', '밝기', '대비', '색상 회전',
'색상 회전2 ', 'hue-rotate3', 'saturate', 'invert', ''];
functionchangeFilter(e) {
var el =
el.className = ''; 🎜>var effect =filters[idx %filters.length]; // 필터를 반복합니다.
if (효과) {
el.classList.add(효과)
}
document.getElementById('video').addEventListener('click',changeFilter, false)