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개가 있다.

덧글 1개

댓글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중

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