Framework & Library/WebRTC4 WebRTC 듀토리얼 클론/분석 - RTCDataChannel을 사용하여 데이터 교환 해당 글은 https://codelabs.developers.google.com/ 의 듀토리얼을 기반으로 작성하였습니다. 이번에는 RTCDataChannel을 이용하여 데이터를 교환하는 것을 해보려고 한다. Step 03 - RTCDataChannel을 사용하여 데이터 교환 (코드분석) 'use strict'; var servers; var localConnection; var remoteConnection; var sendChannel; var receiveChannel; var pcConstraint; var dataConstraint; var dataChannelSend = document.querySelector('textarea#dataChannelSend'); // 텍스트 입력 영역 var d.. 2021. 6. 18. WebRTC 듀토리얼 클론/분석 - RTCPeerConnection으로 비디오 스트리밍 해당 글은 https://codelabs.developers.google.com/ 의 듀토리얼을 기반으로 작성하였습니다. 프로젝트에서 WebRTC를 사용하기 위해 아래의 단계를 거쳐 학습 한 후 직접적으로 적용해보려고 한다. [학습 Contents] 1. 내 웹페이지에 웹캠을 통해 출력된 비디오를 노출시킨다. 2. 내 웹페이지에 웹캠을 통해 출력된 오디오를 출력시킨다. 3. Socket을 이용하여 서로 다른 2개의 브라우저에서 화면과 음성을 공유하여 볼 수 있도록 노출시칸다. 4. Spring 프로젝트에 Node Server를 연결하여 웹캠으로 통신을 할 수 있도록 구성한다. 오늘도 1번에 해당하는 것을 이어서 해볼 것이다. Step 02 - RTCPeerConnection으로 비디오 스트리밍 [학습목표.. 2021. 6. 17. WebRTC 듀토리얼 클론/분석 - 웹캠으로 비디오 스트리밍 하기 해당 글은 https://codelabs.developers.google.com/ 의 듀토리얼을 기반으로 작성하였습니다. 프로젝트에서 WebRTC를 사용하기 위해 아래의 단계를 거쳐 학습 한 후 직접적으로 적용해보려고 한다. [학습 Contents] 1. 내 웹페이지에 웹캠을 통해 출력된 비디오를 노출시킨다. 2. 내 웹페이지에 웹캠을 통해 출력된 오디오를 출력시킨다. 3. Socket을 이용하여 서로 다른 2개의 브라우저에서 화면과 음성을 공유하여 볼 수 있도록 노출시칸다. 4. Spring 프로젝트에 Node Server를 연결하여 웹캠으로 통신을 할 수 있도록 구성한다. 오늘은 1번에 해당하는 것을 해볼 것이다. 다만 듀토리얼이 꽤나 오래전이다. WebRTC를 처음에 구글에서 소개한게 2013년 쯔.. 2021. 6. 15. WebRTC 개념 정리 프로젝트에서 화상채팅 서비스를 구현해야하는 부분을 담당하게 되었다. 막연히 WebRTC쓰면되겠지 뭐~ 라고 생각했는데, 관련 자료들을 서칭해보니 생각보다 기초 지식을 탄탄하게 습득하고 넘어가야 할 것 같다는 판단이 들었다. (시그널링은 무엇이며, peerconnection?은 뭐고... 어떤식으로 동작하는지 등등) 하여 내가 이해하는 과정에서 두서없이 막 정리해보려고 한다. 아무생각 없이 영상부터 봐보자. 먼저 GoogleDevelopers 유투브 채널에 올라온 영상을 보면서 천천히 익혀보려고 한다. (영어는 100% 이해안되지만 댓글에 The only video that provides so much valuable information for beginners at WebRTC. WebRTC의 초보자.. 2021. 6. 14. 이전 1 다음
