미디어 캡처 API 사용

이 기사는 미디어 캡처를 탐색하고 스트림 API (getUsermedia)를 탐색하여 웹 페이지가 플러그인없이 웹캠 및 마이크에 액세스 할 수 있도록합니다. Chrome, Opera, Firefox 및 Edge를 포함한 주요 브라우저에서 지원합니다.

API는 비디오, 오디오 및 이미지 캡처를 제공합니다. 카메라 설정 제어 (해상도, 프레임 속도, 초점); 다중 카메라 지원; 그리고 다른 API와의 통합. 응용 프로그램은 화상 채팅부터 소셜 미디어 컨텐츠 제작에 이르기까지 다양합니다. 사용자 권한이 필요하며 기능 가용성은 장치 및 브라우저에 따라 다릅니다.

주요 기능 및 기능 :

API의 중심 인 메소드는

를 사용하여 캡처 환경 설정 (FacingMode, Volume, 해상도)을 정의합니다. 는 를 통해 특정 장치를 선택하는 데 도움이됩니다. 성공적인 통화는 a 객체를 반환합니다 브라우저 호환성 :

API는 크롬 21, 오페라 18 및 Firefox 17로 거슬러 올라가는 광범위한 지원을 즐기며 최근에 Edge에 추가되었습니다. Modernizr은 브라우저 호환성 점검을 단순화합니다. Modernizr가 없으면 브라우저 불일치를 처리하려면 수동 점검이 필요합니다. 대안 적으로, modernizr : 비디오 재생 :

html에는 캡처 된 스트림을 표시하기 위해 태그 ( 및 로 설정)가 포함되어 있습니다. javaScript는 비디오 요소의 (또는 getUserMedia())을 동적으로 설정합니다. MediaStreamConstraints 카메라 액세스 및 권한 : enumerateDevices() API는 사용자 보안을 우선시합니다. 출시시 응용 프로그램은 웹캠 (또는 지정된 경우 웹캠 및 마이크)을 사용할 권한을 요청합니다. 는 미디어 액세스 요구 사항을 지정하는 객체를 수락합니다 (웹캠의 경우 deviceId, 두 가지 모두 MediaStream).

다중 웹캠 지원 : 사용 가능한 미디어 입력/출력 장치 (마이크, 카메라, 스피커)에 대한 정보를 검색합니다. , 및 와 같은 속성을 갖는 장치 객체의 배열로 해결되는 약속을 반환합니다. 이 기능은 여전히 ​​실험적입니다. 비디오 설정 소스 :

함수는 비디오 태그의 소스를 수신 로 설정합니다. 지원되는 경우 를 사용하면 이전 브라우저의 경우

if (Modernizr.getusermedia) {
  var getUM = Modernizr.prefixed('getUserMedia', navigator);
  getUM({video: true}, function( //...
  //...
}

로 다시 떨어집니다.

CSS 필터 :

응용 프로그램은 실시간 CSS 필터를 비디오 및 이미지에 적용합니다. JavaScript 함수는 사전 정의 된 필터 (Grayscale, Sepia, Blur 등)를 통해 순환하여 비디오 요소에 해당 CSS 클래스를 추가합니다.

이미지 저장 : (ie10) 또는 및 를 사용한 폴백 및 캡처 이미지를 저장합니다.

if (Modernizr.getusermedia) {
  var getUM = Modernizr.prefixed('getUserMedia', navigator);
  getUM({video: true}, function( //...
  //...
}

추가 개발 :

미래의 가능성에는 고급 필터링 및 대화식 환경을위한 WebGL 통합, 오디오 조작을위한 웹 오디오 API 통합이 포함됩니다. 모바일 브라우저 지원도 확장되고 있습니다 (FAQ 및 Microsoft Learning Resources를 포함한 나머지 원래 입력은 크리티에 설명 된대로 미디어 캡처 API의 핵심 기능과 직접 관련이 없기 때문에 간결하게 생략됩니다. 스 니펫.) <.>

위 내용은 미디어 캡처 API 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!