2.2, 오디오 및 비디오 캡처 (A)

제 서론이 섹션은 데이터 스트림 카메라 및 마이크에서 수집을 실현하는 디스플레이. 추천 도서 방법 : + 이해 실제 작업.

　 이 절에서 사용되는 API - "navigator.mediaDevices.getUserMedia (제약)", "제약은"매개 변수가있는 곳, 방법도 약속을 반환합니다. 이 데모를 연습하기 위해, 나는 새로운 demo2.2.html, 달성하기 위해 다음 코드를 만들었습니다.

<! - demo2.2.html -> 
<HTML> 
    <HEAD> 
        <메타 캐릭터 = "UTF-8"> 
        <TITLE> 데모 2.2音视频采集</ TITLE> 
    </ head> 
    <body> 
        <비디오 자동 재생 playsinline 아이디 = "myVideo를"> </ 비디오> 
    </ BODY> 
　　<스크립트 SRC = " https://webrtc.github.io/adapter/adapter-latest.js "> </ script> 
    <스크립트 SRC = "./ JS / demo2.2.js "> </ script> 

</ HTML>

코드에서, 우리는 body 태그 비디오 태그를 추가, ID는 실시간 비디오 스트림에 카메라를 통해 획득 한 표시, "myVideo를"입니다. demo2.2.js 논리 코드를 해당 JS. JS에서, 첫째, 유용성의 판단은 다음과 사물을한다.

'엄격한 사용' 
localVideo하자 ( "myVideo를을"= document.getElementById를을 );
경우 (! navigator.mediaDevices || navigator.mediaDevices.getUserMedia는) 
{ 
    던질  새로운 오류 ( "에서 getUserMedia가 지원되지 않습니다" ); 
}

에서 getUserMedia, webkitGetUserMedia, mozGetUserMedia : 사양 중 webrtc1.0하기 전에, 다양한 브라우저 벤더가, 다른 브라우저의 힘의 API가 동일한 이름이 아닌 자신의 WebRTC API를 실현하기 시작했다,에서 getUserMedia는 세 가지 이름이있다, 말했다 . 관련 개발자 이러한 경우를 고려해야합니다. 그래서, 코드는 그렇게 될 수 있습니다.

CONST에서 getUserMedia = navigator.mediaDevices.getUserMedia | navigator.mediaDevices.webkitGetUserMedia | navigator.mediaDevices.mozGetUserMedia

구글은 도서관 적응 --adapter.js 유지 있도록 그래서, 개발자들에게 불편을 가져올 것이다. 주소 : https://webrtc.github.io/adapter/adapter-latest.js (어댑터의 최신 버전) "에 언제든지 최신 코드 변경 어댑터 - latest.js 때문에 실제 프로젝트 개발에서", : 가장은 버전, 형식의 버전 잠금 https://webrtc.github.io/adapter/adapter-NNNjs 예를 들어, https://webrtc.github.io/adapter/adapter-1.0.2.js을 .

　　다음, 쓰기가 콜백 함수가 성공 흐름을 얻기 위해, 코드는 다음과됩니다.

송출 localVideoElement = document.getElementById를 ( "myVideo를을"); // 읽기 비디오 요소

// 미디어 스트림의 성공을 가져 오기 
기능 {(가 mediaStream에) getLocalMediaStreamSuccess를

　　localVideoElement .srcObject = 미디어 스트림에 객체에 // 직접 할당;가 mediaStream에 
}

// 로컬 미디어가 실패 스트림하기 콜백

함수 getLocalMediaStreamException (에러) {

　을 console.log ( 'navigator.getUserMedia 오류 :'오류);

}

그런 다음에서 getUserMedia, 다음 코드를 호출 시작합니다.

// 오디오 및 비디오 캡처 구성 
CONST의 mediaStreamConstraints = { 
    비디오 : true로 , // 비디오 캡처 
    오디오 : true로 , // 오디오 캡처 
} 
. navigator.mediaDevices.getUserMedia (mediaStreamConstraints) 그 때는 (getLocalMediaStreamSuccess) 캐치 (gotLocalMediaStreamError)

다음과 같이 전체 코드는 다음과 같습니다

Demo2.2.js //은 
'엄격한 사용' 
localVideoElement하자 = document.getElementById를 ( "myVideo를" );
 IF (! Navigator.mediaDevices || Navigator.mediaDevices.getUserMedia) {
     던져  새로운 새로운 오류 ( "에서 getUserMedia에 도로가 지원되지 않습니다" ) ; 
} 

// 로컬 미디어를 성공적으로 콜백 스트리밍 받기 
기능 (가 mediaStream에) getLocalMediaStreamSuccess를 { 
    localVideoElement.srcObject = 가 mediaStream에; 
} 

// 로컬 미디어가 실패 콜백 스트리밍 가져 오기 
기능 getLocalMediaStreamException (오류) { 
    을 console.log ( 'navigator.getUserMedia 오류 :' 오류); 
} 

// 오디오 및 비디오 컬렉션 구성
const를 mediaStreamConstraints = { 
    비디오 : 사실 , 
    오디오 : 사실 , 
}; 
navigator.mediaDevices.getUserMedia (mediaStreamConstraints) 
    그 때는 (getLocalMediaStreamSuccess). 캐치 (gotLocalMediaStreamError)