해당 글은 https://codelabs.developers.google.com/ 의 듀토리얼을 기반으로 작성하였습니다.
프로젝트에서 WebRTC를 사용하기 위해 아래의 단계를 거쳐 학습 한 후 직접적으로 적용해보려고 한다.
[학습 Contents]
1. 내 웹페이지에 웹캠을 통해 출력된 비디오를 노출시킨다.
2. 내 웹페이지에 웹캠을 통해 출력된 오디오를 출력시킨다.
3. Socket을 이용하여 서로 다른 2개의 브라우저에서 화면과 음성을 공유하여 볼 수 있도록 노출시칸다.
4. Spring 프로젝트에 Node Server를 연결하여 웹캠으로 통신을 할 수 있도록 구성한다.
오늘은 1번에 해당하는 것을 해볼 것이다.
다만 듀토리얼이 꽤나 오래전이다. WebRTC를 처음에 구글에서 소개한게 2013년 쯔음 인 것 같다. 시간이 흐르면서 기본 예제들을 공유하거나 하던 사이트들은 유료 라이브러리 업체로 탈바꿈 하기도 했고, 이제 더 이상 서버에서 호스팅하지 않은 듀토리얼들도 존재했다. 그래서 최대한 가져올 수 있는 부분만 가져와 보려고 한다.
샘플코드 받기
git clone https://github.com/googlecodelabs/webrtc-web구글 코드랩의 깃허브에서 클론하거나 직접 소스코드를 다운로드하여 가져온다.
파일을 확인해보니 총 6가지의 스탭으로 이루어져 있다.
Step 01 - 웹캠에서 비디오 스트리밍
학습목표
- 웹캠에서 비디오 스트림을 가져옵니다.
- 스트림 재생을 조작합니다.
- CSS와 SVG를 사용하여 비디오를 조작하십시오.
우선 WebRTC용 워크스페이스를 하나 만들었다.
그리고 CSS/JS 폴더를 만들어주었다.
그 다음 step-01 파일에 있는 html,css,js 파일을 그대로 갔다 넣었다.
그리고 VS Code의 live server 익스텐션을 이용하여 실행했더니 바로 웹캡이 연결되어 실행되었다.
(실행결과)
단순 Copy & Paste 로 해결되면 얼마나 좋을까. 코드를 분석해볼 시간이다.
(코드분석)
Index.html
<!DOCTYPE html>
<html>
<head>
<title>RUCKUS with WebRTC</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<h1>RUCKUS with WebRTC</h1>
<video autoplay playsinline></video>
<!-- autoplay와 playsinline은 기본 속성이라고 한다. 안그러면 재생이 안된다고 한다.
근데 playsinline인 지워도 잘 나오긴 했다. -->
<script src="js/main.js"></script>
</body>
</html>main.js
'use strict';
// On this codelab, you will be streaming only video (video: true).
// 이 코드에서는 단순히 비디오 스트리밍만 할 것이고, 그 설정은 video: true로 하면 된다. false로 바꾸면 안나온다.
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.
// 연결에 에러가 발생시 해당 메세지를 콘솔로그로 출력한다. then cathc 프로미스를 통해 출력.
function handleLocalMediaStreamError(error) {
console.log('navigator.getUserMedia error: ', error);
}
// Initializes media stream.
// 미디어 스트림을 초기화한다.
navigator.mediaDevices.getUserMedia(mediaStreamConstraints)
.then(gotLocalMediaStream).catch(handleLocalMediaStreamError);
작동원리
getUserMedia() : 를 호출하면 브라우저는 사용자에게 카메라 액세스 권한을 요청한다. 성공하게 되면 MediaStream 이 반환되고 srcObject 속성을 통해 미디어 요소에서 사용할 수 있다.
'Framework & Library > WebRTC' 카테고리의 다른 글
| WebRTC 듀토리얼 클론/분석 - RTCDataChannel을 사용하여 데이터 교환 (0) | 2021.06.18 |
|---|---|
| WebRTC 듀토리얼 클론/분석 - RTCPeerConnection으로 비디오 스트리밍 (0) | 2021.06.17 |
| WebRTC 개념 정리 (0) | 2021.06.14 |
