HTML5를 사용하여 오디오 및 비디오 정보 캡처 개요 및 예-HTML 튜토리얼-php.cn

이 글에서는 주로 HTML5를 사용하여 오디오 및 비디오 정보를 캡처하는 방법에 대한 개요와 예를 소개합니다. 이제는 모든 사람과 공유합니다. 도움이 필요한 친구들은 이를 참조할 수 있습니다.

오디오 및 비디오 정보 캡처는 항상 웹 개발에서 뜨거운 주제였습니다. 여기에 navigatior.getUserMedia() 메소드를 사용하여 웹 애플리케이션이 사용자의 카메라 및 마이크 장치에 액세스할 수 있도록 하는 새로운 API가 있습니다.이 기사 개요

For 오랜 시간 동안, 오디오 및 비디오 정보를 캡처하는 것은 웹 개발에서 항상 어려운 점이었습니다. 수년 동안 우리는 이러한 요구를 충족하기 위해 브라우저 플러그인에 의존해 왔습니다.
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 속성에 새 속성 값을 추가하기로 결정했습니다.
개발자가 사용자가 카메라를 통해 사진을 찍는 기능을 구현하고 싶다면 아래와 같이 코드를 작성하면 됩니다.

코드 복사

코드는 다음과 같습니다.

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

로그인 후 복사

비디오 데이터 및 오디오 데이터를 녹음하는 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

<input type="file" accept="video/*;capture=camcorder"> 
<input type="file" accept="audio/*;capture=microphone">

로그인 후 복사

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

코드 복사

코드는 다음과 같습니다.

<device type="media" onchange="update(this.data)"></device> 
<video autoplay></video> 
<script> 
function update(stream) { 
document.querySelector(&#39;video&#39;).src = stream.url; 
} 
</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(&#39;您的浏览器支持getUserMedia方法&#39;); 
} 
else { 
alert(&#39;您的浏览器不支持getUserMedia方法&#39;); 
}

로그인 후 복사

获取访问设备的权限
为了访问客户端摄像头设备与麦克风设备,我们首先需要获取权限。getUserMedia方法的第一个参数是一个用于指定媒体类型的对象。例如,当你想访问摄像头设备时,第一个参数应该为{video:true},为了同时访问摄像头设备与麦克风设备,需要使用{video:true,audio:true}参数,代码如下所示：

复制代码

代码如下:

<video autoplay id="video"></video> 
<script> 
var onFailSoHard = function() { 
alert(&#39;设备拒绝访问&#39;); 
}; 
//不使用供应商前缀 
navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) { 
var video = document.getElementById(&#39;video&#39;); 
video.src = window.URL.createObjectURL(localMediaStream); 
//请注意:当使用getUserMedia方法时,在Chrome浏览器中不触发onloadedmetadata事件 
video.onloadedmetadata = function(e) { 
//后续代码略 
}; 
}, onFailSoHard); 
</script>

로그인 후 복사

在这段代码中,结合了video元素的使用。请注意我们没有使用video元素的src属性值,而是为video元素指定了一个引用媒体文件的URL地址,同时将代表了从摄像头中所获取到的视频数据的LocalMediaStream对象转换为一个Blob URL。
在这段代码中,同时为video元素使用autoplay属性,如果不使用该属性,则video元素将停留在所获取的第一帧画面处。
请注意：在Chrome浏览器中,如果只使用{audio:true},则引发BUG,在Opera浏览器中,同样不能使用audio元素。
如果你想让多个浏览器同时支持getUserMedia方法,请使用如下所示的代码：

复制代码

代码如下:

window.URL = window.URL || window.webkitURL; 
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || 
navigator.mozGetUserMedia || navigator.msGetUserMedia; 
var video = document.getElementById(&#39;video&#39;); 
if (navigator.getUserMedia) { 
navigator.getUserMedia({audio: true, video: true}, function(stream) { 
video.src = window.URL.createObjectURL(stream); 
}, onFailSoHard); 
} 
else { 
alert(&#39;您的浏览器不支持getUserMedia方法&#39;); 
}

로그인 후 복사

安全性
在有些浏览器中,当调用getUserMedia方法时,显示一个提示窗口,询问用户是否允许或拒绝访问他们的摄像头或麦克风。
拍照
在Canvas API中,可以使用ctx.drawImage(video,0,0)方法将video元素中的某一帧画面输出到canvas元素中。当然,既然我们已经将捕捉到的用户摄像头中的图像信息输出到video元素中,当然也可以将图像信息通过video元素输出到canvas元素中,即实现实时拍照功能,代码如下所示。

复制代码

代码如下:

<video autoplay></video> 
<img src="" id="img" ></img> 
<canvas style="display:none;" id="canvas" ></canvas> 
var video = document.getElementById(&#39;video&#39;); 
var canvas = document.getElementById(&#39;canvas&#39;); 
var ctx = canvas.getContext(&#39;2d&#39;); 
var localMediaStream = null; 
function snapshot() { 
if (localMediaStream) { 
ctx.drawImage(video, 0, 0); 
document.getElementById(&#39;img&#39;).src = canvas.toDataURL(&#39;image/png&#39;); 
} 
} 
video.addEventListener(&#39;click&#39;, snapshot, false); 
//不使用供应商前缀 
navigator.getUserMedia({video: true}, function(stream) { 
video.src = window.URL.createObjectURL(stream); 
localMediaStream = stream; 
}, onFailSoHard);

로그인 후 복사

应用CSS滤镜
目前为止,可以在Chrome 18以上版本的浏览器中使用CSS滤镜。
通过CSS滤镜的使用,我们可以对video元素中捕捉的视频添加各种图像滤镜效果。

复制代码

代码如下:

<style> 
#video3 { 
width: 307px; 
height: 250px; 
background: rgba(255,255,255,0.5); 
border: 1px solid #ccc; 
} 
.grayscale { 
-webkit-filter: grayscale(1); 
} 
.sepia { 
-webkit-filter: sepia(1); 
} 
.blur { 
-webkit-filter: blur(3px); 
} 
... 
</style> 
<video id="video" autoplay></video> 
<script> 
var idx = 0; 
var filters = [&#39;grayscale&#39;, &#39;sepia&#39;, &#39;blur&#39;, &#39;brightness&#39;, &#39;contrast&#39;, &#39;hue-rotate&#39;, 
&#39;hue-rotate2&#39;, &#39;hue-rotate3&#39;, &#39;saturate&#39;, &#39;invert&#39;, &#39;&#39;]; 
function changeFilter(e) { 
var el = e.target; 
el.className = &#39;&#39;; 
var effect = filters[idx++ % filters.length]; // loop through filters. 
if (effect) { 
el.classList.add(effect); 
} 
} 
document.getElementById(&#39;video&#39;).addEventListener(&#39;click&#39;, changeFilter, false); 
</script>

로그인 후 복사