1. 개요
WebRTC (Web Real-Time Communication)는 웹 브라우저 간에 플러그인 도움 없이 상호 통신할 수 있도록 설계된 JavaScript API이다. WebRTC는 음성 통화, 영상 통화, P2P 파일 공유 등으로 활용 될 수 있다.
https://webrtc.org/getting-started/overview
https://github.com/googlecodelabs/webrtc-web
2. 위의 예제를 다운로드 받아 실행하면서 배워 보기로 하자.
윈도우즈(10)에 node.js를 https://nodejs.org/en/ 에서 다운로드 받고 설치한다.
PowerShell에서 node -v 명령어를 이용하여 제대로 설치 되었는지 확인한다.
반드시 node.js를 사용할 이유는 없다. 일반 Apache 서버에서도 잘 동작을 한다.
3. Express를 설치 한다. Express는 Node.js에서 가장 유명한 웹 프레임워크 모듈이다.
express를 이용하면 간단하게 라우팅이 가능한 웹 서버를 만들 수 있다.
윈도우에서 > npm install -g express 를 실행한다.
또한 > npm install -g express-generator 설치한다.
이제 프로젝트를 만든다.
> npm install
> npm start
> express myapp
https://github.com/googlecodelabs/webrtc-web 에서 다운 받은 파일을
express project인 myapp\public\webrtc-web-master 로 복사 저장한다.
웹 브라우저에서 http://localhost:3000/webrtc-web-master/step-01/ 를 입력하면 웹캠의 화면이 보인다.
<!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 autoplay playsinline></video>
<script src="js/main.js"></script>
</body>
</html>main.js 파일은 다음과 같다.
//main.js
'use strict';
// On this codelab, you will be streaming only video (video: true).
const mediaStreamConstraints = {
video: true,
};
// Video element where stream will be placed.
const localVideo = document.querySelector('video');
// Local stream that will be reproduced on the video.
let localStream;
// Handles success by adding the MediaStream to the video element.
function gotLocalMediaStream(mediaStream) {
localStream = mediaStream;
localVideo.srcObject = mediaStream;
}
// Handles error by logging a message to the console with the error message.
function handleLocalMediaStreamError(error) {
console.log('navigator.getUserMedia error: ', error);
}
// Initializes media stream.
navigator.mediaDevices.getUserMedia(mediaStreamConstraints)
.then(gotLocalMediaStream).catch(handleLocalMediaStreamError);
MediaDevices.getUserMedia() 함수는 WebRTC와 관련이 있으며 Chrome 21, Opera 18, Firefox 17 이후 버전에서 지원된다. 이 함수는 사용자의 카메라와 마이크 스트림을 접근할 수 있는 수단을 제공합니다. 플러그인 없이 웹캠과 마이크 입력처리할 수 있다. 그냥 브라우저 안에서 호출하여 사용한다. https 가 아닌 경우 크롬 브라우저에서 블럭킹을 할 수 있으므로 서버를 https로 전환하거나 또는 크롬에서 보안을 일시 해제한다. 주소 창에서 chrome://flags/#unsafely-treat-insecure-origin-as-secure 입력하고 그리고 원하는 싸이트의 주소의 보안을 해제하여 준다.
