HTML5의 WebRTC 새로운 기능에 대한 자세한 설명
- 黄舟원래의
- 2017-03-30 11:27:155330검색
1. 개요
WebRTC는 "Web Real Time Communication"의 약어로, 주로 브라우저가 동영상, 오디오 및 데이터.
WebRTC는 세 가지 API로 나누어집니다.- MediaStream(일명 getUserMedia)
- RTCPeerConnection
- RTCDataChannel
소개
먼저 브라우저가 getUserMedia 메소드를 지원하는지 확인하세요.navigator.getUserMedia ||
(navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia || navigator.msGetUserMedia);
if (navigator.getUserMedia) {
//do something
} else {
console.log('your browser not support getUserMedia');
}Chrome 21, Opera 18 및 Firefox 17은 현재 이 방법을 지원하지 않습니다. 위 코드의 msGetUserMedia는 향후 호환성을 보장하기 위한 것입니다. getUserMedia 메소드는 세 가지 매개변수를 허용합니다. getUserMedia(streams, success, error);는 다음을 의미합니다.
- 스트림: 어떤
멀티미디어 장치에 객체
성공: - 콜백 함수 오류: 콜백 함수, 멀티미디어 장치를 얻지 못했을 때 호출
- 사용법은 다음과 같습니다.
navigator.getUserMedia({
video: true,
audio: true}, onSuccess, onError);위 코드는 카메라와 마이크에서 실시간 정보를 얻는 데 사용됩니다.
웹페이지에서 getUserMedia를 사용하는 경우 브라우저는 사용자에게 정보 제공 여부를 묻습니다. 사용자가 거부하면 onError 콜백 함수가 호출됩니다.
오류가 발생하면 콜백
함수의매개변수는 Error 개체이며, 여기에는 다음 값을 갖는 코드 매개변수가 있습니다.
- PERMISSION_DENIED: 사용자가 정보 제공을 거부합니다.
- NOT_SUPPORTED_ERROR: 브라우저가 지정된 미디어 유형을 지원하지 않습니다.
- MANDATORY_UNSATISHIED_ERROR: 지정된 미디어 유형이 미디어 스트림을 수신하지 못했습니다.
- 2.2 카메라 이미지 표시
사용자의 카메라로 촬영한 이미지를 웹 페이지에 표시하려면 먼저 웹 페이지에 비디오 요소를 배치해야 합니다. 이 요소에는 이미지가 표시됩니다.
<video id="webcam"></video>
그런 다음 코드를 사용하여 이 요소를 가져옵니다.
function onSuccess(stream) {
var video = document.getElementById('webcam');
//more code}마지막으로 이 요소의 src
속성을 데이터 스트림에 바인딩하면 카메라에서 캡처한 이미지를 표시할 수 있습니다. function onSuccess(stream) {
var video = document.getElementById('webcam');
if (window.URL) {
video.src = window.URL.createObjectURL(stream);
} else {
video.src = stream;
}
video.autoplay = true; //or video.play();} 주요 목적은 사용자가 카메라를 사용하여 자신의 사진을 찍을 수 있도록 하는 것입니다.
2.3 마이크 사운드 캡처
브라우저를 통해 사운드를 캡처하는 것은 비교적 복잡하며 Web Audio API를 사용해야 합니다.
function onSuccess(stream) {
//创建一个音频环境对像
audioContext = window.AudioContext || window.webkitAudioContext;
context = new audioContext();
//将声音输入这个对像
audioInput = context.createMediaStreamSources(stream);
//设置音量节点
volume = context.createGain();
audioInput.connect(volume);
//创建缓存，用来缓存声音
var bufferSize = 2048;
// 创建声音的缓存节点，createJavaScriptNode方法的
// 第二个和第三个参数指的是输入和输出都是双声道。
recorder = context.createJavaScriptNode(bufferSize, 2, 2);
// 录音过程的回调函数，基本上是将左右两声道的声音
// 分别放入缓存。
recorder.onaudioprocess = function(e){
console.log('recording');
var left = e.inputBuffer.getChannelData(0);
var right = e.inputBuffer.getChannelData(1);
// we clone the samples
leftchannel.push(new Float32Array(left));
rightchannel.push(new Float32Array(right));
recordingLength += bufferSize;
} // 将音量节点连上缓存节点，换言之，音量节点是输入
// 和输出的中间环节。
volume.connect(recorder);
// 将缓存节点连上输出的目的地，可以是扩音器，也可以
// 是音频文件。
recorder.connect(context.destination);
}3. 실시간 데이터 교환
WebRTC의 다른 두 API인 RTCPeerConnection은 브라우저 간의 지점 간 연결에 사용되며 RTCDataChannel은 지점 간 연결에 사용됩니다. 데이터 통신.
RTCPeerConnection에는 Chrome 브라우저의 경우 webkitRTCPeerConnection, Firefox 브라우저의 경우 mozRTCPeerConnection이라는 브라우저 접두사가 있습니다. Google은 브라우저 간의 차이점을 추상화하기 위해 함수 라이브러리 Adapter.js를 유지관리합니다.
var dataChannelOptions = {
ordered: false, // do not guarantee order
maxRetransmitTime: 3000, // in milliseconds};
var peerConnection = new RTCPeerConnection();
// Establish your peer connection using your signaling channel herevar dataChannel =
peerConnection.createDataChannel("myLabel", dataChannelOptions);
dataChannel.onerror = function (error) {
console.log("Data Channel Error:", error);
};
dataChannel.onmessage = function (event) {
console.log("Got Data Channel Message:", event.data);
};
dataChannel.onopen = function () {
dataChannel.send("Hello World!");
};
dataChannel.onclose = function () {
console.log("The Data Channel is Closed");
};4. 참조 링크
[1] Andi Smith, WebRTC 시작하기
[2] Thibault Imbert, getUserMedia 및 웹 오디오를 사용하여 마이크에서 .WAV로
[3] Ian Devlin,
HTML5비디오 및 캔버스 요소와 함께 getUserMedia API 사용[4] Eric Bidelman, 오디오 캡처 및 HTML5 비디오
[5] Sam Dutton, WebRTC 시작하기
[6] Dan Ristic, WebRTC 데이터 채널
[7] Ruanyf, WebRTC
위 내용은 HTML5의 WebRTC 새로운 기능에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!