1. 개요
Signaling Server를 사용하지 않고 같은 컴퓨터에서 RTCPeerConnection를 이용하여 스트림 영상을 전달한다.
https://github.com/googlecodelabs/webrtc-web의 step-02 예제이다. 이해가 편하도록 약간의 편집을 하였다.
- 2개의 peer 사이에 다음과 같은 절차로 데이터를 주고 받는다.
3. html 파일
<!DOCTYPE html>
<html>
<head>
<title>Realtime communication with WebRTC</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<h1>Realtime communication with WebRTC</h1>
<video id="localVideo" autoplay playsinline></video>
<video id="remoteVideo" autoplay playsinline></video>
<div>
<button id="startButton">Start</button>
<button id="callButton">Call</button>
<button id="hangupButton">Hang Up</button>
</div>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="js/main.js"></script>
</body>
</html>4. js 파일
'use strict';
// Set up media stream constant and parameters.
// In this codelab, you will be streaming video only: "video: true".
// Audio will not be streamed because it is set to "audio: false" by default.
let localStream;
let remoteStream;
let localPeerConnection;
let remotePeerConnection;
let startTime = null;
const mediaStreamConstraints = {
video: true,
};
// Set up to exchange only video.
const offerOptions = {
offerToReceiveVideo: 1,
};
// Define peer connections, streams and video elements.
const localVideo = document.getElementById('localVideo');
const remoteVideo = document.getElementById('remoteVideo');
// Define action buttons.
const startButton = document.getElementById('startButton');
const callButton = document.getElementById('callButton');
const hangupButton = document.getElementById('hangupButton');
// Set up initial action buttons status: disable call and hangup.
callButton.disabled = true;
hangupButton.disabled = true;
// Handles start button action: creates local MediaStream.
function startAction() {
startButton.disabled = true;
navigator.mediaDevices.getUserMedia(mediaStreamConstraints)
.then(gotLocalMediaStream).catch(handleLocalMediaStreamError);
trace('getUserMedia()');
}
// Handles call button action: creates peer connection.
function callAction() {
callButton.disabled = true;
hangupButton.disabled = false;
//trace('Starting call.');
startTime = window.performance.now();
// Get local media stream tracks.
const videoTracks = localStream.getVideoTracks();
const audioTracks = localStream.getAudioTracks();
if (videoTracks.length > 0) {
trace(`Using video device: ${videoTracks[0].label}.`);
}
if (audioTracks.length > 0) {
trace(`Using audio device: ${audioTracks[0].label}.`);
}
const servers = null; // Allows for RTC server configuration.
// Create peer connections and add behavior.
trace('Created local peer connection object localPeerConnection.');
localPeerConnection = new RTCPeerConnection(servers);
localPeerConnection.addEventListener('icecandidate', handleConnection);
localPeerConnection.addEventListener(
'iceconnectionstatechange', log_handleConnectionChange);
trace('Created remote peer connection object remotePeerConnection.');
remotePeerConnection = new RTCPeerConnection(servers);
remotePeerConnection.addEventListener('icecandidate', handleConnection);
remotePeerConnection.addEventListener(
'iceconnectionstatechange', log_handleConnectionChange);
remotePeerConnection.addEventListener('addstream', gotRemoteMediaStream);
// Add local stream to connection and create offer to connect.
trace('localPeerConnection addStream() Added local stream to localPeerConnection.');
localPeerConnection.addStream(localStream);
trace('localPeerConnection createOffer() starting..');
localPeerConnection.createOffer(offerOptions)
.then(createdOffer).catch(log_setSessionDescriptionError);
}
// Handles hangup action: ends up call, closes connections and resets peers.
function hangupAction() {
localPeerConnection.close();
remotePeerConnection.close();
localPeerConnection = null;
remotePeerConnection = null;
hangupButton.disabled = true;
callButton.disabled = false;
trace('Ending call.');
}
// Add click event handlers for buttons.
startButton.addEventListener('click', startAction);
callButton.addEventListener('click', callAction);
hangupButton.addEventListener('click', hangupAction);
// Sets the MediaStream as the video element src.
function gotLocalMediaStream(mediaStream) {
localVideo.srcObject = mediaStream;
localStream = mediaStream;
trace('Received local stream.');
callButton.disabled = false; // Enable call button.
}
// Handles error by logging a message to the console.
function handleLocalMediaStreamError(error) {
trace(`navigator.getUserMedia error: ${error.toString()}.`);
}
// Handles remote MediaStream success by adding it as the remoteVideo src.
function gotRemoteMediaStream(event) {
trace('Remote peer connection received remote stream.');
const mediaStream = event.stream;
remoteVideo.srcObject = mediaStream;
remoteStream = mediaStream;
}
localVideo.addEventListener('loadedmetadata', log_VideoLoaded);
remoteVideo.addEventListener('loadedmetadata', log_VideoLoaded);
remoteVideo.addEventListener('onresize', log_ResizedVideo);
// Define RTC peer connection behavior.
// Connects with new peer candidate.
function handleConnection(event) {
const peerConnection = event.target;
const iceCandidate = event.candidate;
if (iceCandidate) {
const newIceCandidate = new RTCIceCandidate(iceCandidate);
const otherPeer = getOtherPeer(peerConnection);
trace(`${getPeerName(peerConnection)} addIceCandidate()`);
otherPeer.addIceCandidate(newIceCandidate)
.then(() => {
log_handleConnectionSuccess(peerConnection);
}).catch((error) => {
log_handleConnectionFailure(peerConnection, error);
});
trace(`${getPeerName(peerConnection)} ICE candidate:\n` +
`${event.candidate.candidate}.`);
}
}
// Define helper functions.
// Gets the "other" peer connection.
function getOtherPeer(peerConnection) {
return (peerConnection === localPeerConnection) ?
remotePeerConnection : localPeerConnection;
}
// Gets the name of a certain peer connection.
function getPeerName(peerConnection) {
return (peerConnection === localPeerConnection) ?
'localPeerConnection' : 'remotePeerConnection';
}
// offer creation and sets peer connection session descriptions.
function createdOffer(description) {
trace(`Offer from localPeerConnection:\n${description.sdp}`);
trace('localPeerConnection setLocalDescription() starting...');
localPeerConnection.setLocalDescription(description)
.then(() => {
log_setLocalDescriptionSuccess(localPeerConnection);
}).catch(log_setSessionDescriptionError);
trace('remotePeerConnection setRemoteDescription() starting...');
remotePeerConnection.setRemoteDescription(description)
.then(() => {
log_setRemoteDescriptionSuccess(remotePeerConnection);
}).catch(log_setSessionDescriptionError);
trace(' remotePeerConnection createAnswer() starting...');
remotePeerConnection.createAnswer()
.then(createdAnswer)
.catch(log_setSessionDescriptionError);
}
// answer to offer creation and sets peer connection session descriptions.
function createdAnswer(description) {
trace(`Answer from remotePeerConnection:\n${description.sdp}.`);
trace('remotePeerConnection setLocalDescription() starting...');
remotePeerConnection.setLocalDescription(description)
.then(() => {
log_setLocalDescriptionSuccess(remotePeerConnection);
}).catch(log_setSessionDescriptionError);
trace('createdAnswer: localPeerConnection setRemoteDescription starting...');
localPeerConnection.setRemoteDescription(description)
.then(() => {
log_setRemoteDescriptionSuccess(localPeerConnection);
}).catch(log_setSessionDescriptionError);
}
///////////////////////////////////////////////////////////////////////
// Logs an action (text) and the time when it happened on the console.
///////////////////////////////////////////////////////////////////////
function trace(text) {
text = text.trim();
const now = (window.performance.now() / 1000).toFixed(3);
console.log(now, text);
}
// Logs ResizedVideo
function log_ResizedVideo(event) {
log_VideoLoaded(event);
if (startTime) {
const elapsedTime = window.performance.now() - startTime;
startTime = null;
trace(`Setup time: ${elapsedTime.toFixed(3)}ms.`);
}
}
// Logs VideoLoaded
function log_VideoLoaded(event) {
const video = event.target;
trace(`${video.id} videoWidth: ${video.videoWidth}px, ` +
`videoHeight: ${video.videoHeight}px.`);
}
// Logs that the connection succeeded.
function log_handleConnectionSuccess(peerConnection) {
trace(`${getPeerName(peerConnection)} addIceCandidate success.`);
};
// Logs that the connection failed.
function log_handleConnectionFailure(peerConnection, error) {
trace(`${getPeerName(peerConnection)} failed to add ICE Candidate:\n`+
`${error.toString()}.`);
}
// Logs changes to the connection state.
function log_handleConnectionChange(event) {
const peerConnection = event.target;
console.log('ICE state change event: ', event);
trace(`${getPeerName(peerConnection)} ICE state: ` +
`${peerConnection.iceConnectionState}.`);
}
// Logs error when setting session description fails.
function log_setSessionDescriptionError(error) {
trace(`Failed to create session description: ${error.toString()}.`);
}
// Logs success when setting session description.
function log_setDescriptionSuccess(peerConnection, functionName) {
const peerName = getPeerName(peerConnection);
trace(`${peerName} ${functionName} completed.`);
}
// Logs success when localDescription is set.
function log_setLocalDescriptionSuccess(peerConnection) {
log_setDescriptionSuccess(peerConnection, 'setLocalDescription');
}
// Logs success when remoteDescription is set.
function log_setRemoteDescriptionSuccess(peerConnection) {
log_setDescriptionSuccess(peerConnection, 'setRemoteDescription');
}
반응형