Technical WebRTC

WebRTC로 화상채팅 만들기-3편 1:1화상채팅 서비스 개발

이제 1:1 화상채팅 서비스를 직접 코딩해보자

https://codepen.io/corona89/project/editor/9d9a1745f894a12e4394b3ce6fdd67a1
여기에 소스코드를 올리고 싶지만 WordPress Editor를 잘 모르겠는 관계로 다른 사이트에 코드를 올린다
여기서 봐야될 코드는 아래와 같다.

[ 작성할 소스코드 ]
example3.html : UI 표현을 위한 html 문서
js/example3.js : 실제 작동하게될 Javascript 소스코드
server.js : sinaling 서버의 소스코드 (nodejs)

[ import되는 소스코드 ]
lib/adapter.js
js/example3.js
lib/ga.js

여기서 server.js의 경우 key값을 이용해 사용자 그룹을 만들고,
이를 이용하여 상대방에게 데이터를 전달하는 기능밖에 없기 때문에 딱히 설명을 하진 않겠다.
이 소스는 MIT 라이선스를 가지고 있으며 Rob Manson에 의해 만들어졌다.
주석은 필자가 새롭게 작성했다.
example3.html, example3.js 소스는 WebRTC github페이지의 예제를 변형했다.
( 현재 github 페이지에 있는 예제는 deprecated된 소스가 포함되어있으며, signaling 서버 연결에 대한 부분이 빠져있다. )

이렇게 소스코드를 작성하고나면 이게 무슨 내용인지 궁금할 것이다.
그에 대한 해설은 아래와 같다.
( Web 환경에서의 한계로 인해 보기 어려울수도 있다. 그럴경우 아래 링크에 들어가서 보면된다. )
http://www.xmind.net/m/8wvUBf

example3.html
이 소스코드는 딱히 설명할 내용이 없다.
간단하게 화면 구성을 보면 아래와 같다.

id가 각각 localVideo, remoteVideo인 Video 패널이 2개있고
id가 startButton, callButton, hangupButton인 Button이 3개가 있다.

댓글 남기기

이 사이트는 스팸을 줄이는 아키스밋을 사용합니다. 댓글이 어떻게 처리되는지 알아보십시오.

%d 블로거가 이것을 좋아합니다: