1. 개요

WebRTC는 "Web Real Time Communication"의 약어로, 주로 브라우저가 동영상, 오디오 및 데이터.

WebRTC는 세 가지 API로 나누어집니다.

MediaStream(일명 getUserMedia)
RTCPeerConnection
RTCDataChannel

getUserMedia는 주로 비디오 및 오디오 정보를 얻는 데 사용되며 후자의 두 API는 브라우저 간의 데이터 교환에 사용됩니다.

2.getUserMedia

2.1

소개

먼저 브라우저가 getUserMedia 메소드를 지원하는지 확인하세요.

navigator.getUserMedia || 
    (navigator.getUserMedia = navigator.mozGetUserMedia ||  navigator.webkitGetUserMedia || navigator.msGetUserMedia);

if (navigator.getUserMedia) {
    //do something
} else {
    console.log(&#39;your browser not support getUserMedia&#39;);
}

로그인 후 복사

Chrome 21, Opera 18 및 Firefox 17은 현재 이 방법을 지원하지 않습니다. 위 코드의 msGetUserMedia는 향후 호환성을 보장하기 위한 것입니다.

getUserMedia 메소드는 세 가지 매개변수를 허용합니다.

getUserMedia(streams, success, error);

로그인 후 복사

는 다음을 의미합니다.

스트림: 어떤
멀티미디어 장치에 객체
<가 포함되어 있는지 나타냅니다. 🎜>
콜백 함수
, 멀티미디어 장치를 성공적으로 얻었을 때 호출

navigator.getUserMedia({
    video: true,
    audio: true}, onSuccess, onError);

로그인 후 복사

위 코드는 카메라와 마이크에서 실시간 정보를 얻는 데 사용됩니다.

웹페이지에서 getUserMedia를 사용하는 경우 브라우저는 사용자에게 정보 제공 여부를 묻습니다. 사용자가 거부하면 onError 콜백 함수가 호출됩니다.

오류가 발생하면 콜백

함수의

매개변수는 Error 개체이며, 여기에는 다음 값을 갖는 코드 매개변수가 있습니다.

사용자의 카메라로 촬영한 이미지를 웹 페이지에 표시하려면 먼저 웹 페이지에 비디오 요소를 배치해야 합니다. 이 요소에는 이미지가 표시됩니다.

<video id="webcam"></video>

로그인 후 복사

그런 다음 코드를 사용하여 이 요소를 가져옵니다.

function onSuccess(stream) {    
var video = document.getElementById(&#39;webcam&#39;);    
//more code}

로그인 후 복사

마지막으로 이 요소의 src

속성

을 데이터 스트림에 바인딩하면 카메라에서 캡처한 이미지를 표시할 수 있습니다.

function onSuccess(stream) {    
var video = document.getElementById(&#39;webcam&#39;);    
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(&#39;recording&#39;);        
        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. 참조 링크