HTML5-웹 RTC
W3C (World Wide Web Consortium)에서 소개 한 Web RTC. 이는 음성 통화, 화상 채팅 및 P2P 파일 공유를위한 브라우저 간 애플리케이션을 지원합니다.
시험 해보고 싶다면? Chrome, Opera 및 Firefox에서 웹 RTC를 사용할 수 있습니다. 시작하기 좋은 곳은 여기에 있는 간단한 화상 채팅 응용 프로그램 입니다. Web RTC는 아래와 같이 세 가지 API를 구현합니다.
MediaStream − 사용자의 카메라와 마이크에 액세스합니다.
RTCPeerConnection − 음성 또는 영상 통화 시설에 액세스하십시오.
RTCDataChannel − P2P 통신에 액세스합니다.
MediaStream
MediaStream은 동기화 된 미디어 스트림을 나타냅니다. 예를 들어 HTML5 데모 섹션에서 HTML5 비디오 플레이어를 클릭하거나 여기를 클릭 하십시오 .
위의 예제에는 stream.getAudioTracks () 및 stream.VideoTracks ()가 포함되어 있습니다. 오디오 트랙이 없으면 빈 배열을 반환하고 비디오 스트림을 확인합니다. 웹캠이 연결된 경우 stream.getVideoTracks ()는 웹캠의 스트림을 나타내는 하나의 MediaStreamTrack 배열을 반환합니다. 간단한 예는 채팅 애플리케이션이며, 채팅 애플리케이션은 웹 카메라, 후면 카메라, 마이크에서 스트림을 가져옵니다.
MediaStream의 샘플 코드
function gotStream(stream) {
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext = new AudioContext();
// Create an AudioNode from the stream
var mediaStreamSource = audioContext.createMediaStreamSource(stream);
// Connect it to destination to hear yourself
// or any other node for processing!
mediaStreamSource.connect(audioContext.destination);
}
navigator.getUserMedia({audio:true}, gotStream);
화면 캡처
mediaStreamSource를 사용하는 Chrome 브라우저에서도 가능하며 HTTPS가 필요합니다. 이 기능은 Opera에서 아직 사용할 수 없습니다. 샘플 데모는 여기 에서 사용할 수 있습니다.
세션 제어, 네트워크 및 미디어 정보
웹 RTC는 브라우저 간의 P2P 통신이 필요했습니다. 이 메커니즘에는 신호, 네트워크 정보, 세션 제어 및 미디어 정보가 필요했습니다. 웹 개발자는 SIP 또는 XMPP 또는 양방향 통신과 같은 브라우저 간 통신을 위해 다른 메커니즘을 선택할 수 있습니다. XHR의 샘플 예는 여기에 있습니다 .
createSignalingChannel ()의 샘플 코드
var signalingChannel = createSignalingChannel();
var pc;
var configuration = ...;
// run start(true) to initiate a call
function start(isCaller) {
pc = new RTCPeerConnection(configuration);
// send any ice candidates to the other peer
pc.onicecandidate = function (evt) {
signalingChannel.send(JSON.stringify({ "candidate": evt.candidate }));
};
// once remote stream arrives, show it in the remote video element
pc.onaddstream = function (evt) {
remoteView.src = URL.createObjectURL(evt.stream);
};
// get the local stream, show it in the local video element and send it
navigator.getUserMedia({ "audio": true, "video": true }, function (stream) {
selfView.src = URL.createObjectURL(stream);
pc.addStream(stream);
if (isCaller)
pc.createOffer(gotDescription);
else
pc.createAnswer(pc.remoteDescription, gotDescription);
function gotDescription(desc) {
pc.setLocalDescription(desc);
signalingChannel.send(JSON.stringify({ "sdp": desc }));
}
});
}
signalingChannel.onmessage = function (evt) {
if (!pc)
start(false);
var signal = JSON.parse(evt.data);
if (signal.sdp)
pc.setRemoteDescription(new RTCSessionDescription(signal.sdp));
else
pc.addIceCandidate(new RTCIceCandidate(signal.candidate));
};