구글코드랩스에서 제공하는 WebRTC 예제입니다.
https://codelabs.developers.google.com/codelabs/webrtc-web/#0
다음 링크에서 소스코드를 다운받을 수 있습니다.
https://github.com/googlecodelabs/webrtc-web
그리고 크롬 브라우저에서 Web Server 앱을 설치합니다.
설치한 후, 주소창에서 chrome://apps로 이동해 Web Server 앱을 선택해서 실행해 줍니다.
실행된 창에서 다음 같이 세팅해 줍니다.
폴더는 다운로드한 소스코드에서 work이라는 폴더로 지정해주면 됩니다.
Web Server URL(s) : http://127.0.0.1:8887 클릭해서 창을 띄우시면 다음과 같은 화면을 보실 수 있습니다.
현재는 기능이 구현되지 않아 보시는 바와 같이 텍스트만 출력하고 있습니다.
work폴더에 보시면 아시겠지만 index.html, main.css, main.js, adapter.js 이상 4개의 파일로 구성되어져 있습니다.
먼저, 다음 파일들을 열어서 코드를 추가로 입력해 줍니다.
'F12' 누르고 브라우저 상에서 작업하셔도 되고, 저 같은 경우 노트패드에서 작업했습니다.
* index.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 autoplay playsinline></video>
<script src="js/main.js"></script>
</body>
</html>
* 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);
다 입력하고 저장한 후에 'F5'번 키를 눌러 리로드 합니다.
처음 한번은 브라우져에서 카메라 접근 퍼미션 메세지가 뜰겁니다.
확인하면 MediaStream이 반환되며, 웹캠을 통해 영상이 출력되는걸 확인할 수 있습니다.
그리고 Ctrl+Shift+J 를 눌러 콘솔창에서 커맨드를 입력해서 결과를 확인해 봅니다.
localStream.getVideoTracks()
localStream.getVideoTracks()[0].stop()
그리고 main.css에서 다음과 같이 다양한 이미지 옵션을 추가하거나 수정할 수 있습니다.
body {
font-family: sans-serif;
}
video {
max-width: 100%;
width: 720px;
}
video {
filter: blur(4px) invert(1) opacity(0.5);
}
video {
filter: hue-rotate(180deg) saturate(200%);
}
'WebRTC' 카테고리의 다른 글
| [WebRTC] 로컬 PeerConnecton 비디오 스트림 출력 (0) | 2020.01.20 |
|---|---|
| [WebRTC] 개념정리 (1) | 2020.01.07 |