답변 5개
채택된 답변
+20 포인트
11년 전
2014년 현재 시점에서 WebRTC 를 많이 선택해 나가는 편입니다.
아직 완성되지는 않았지만 HTML5 Connectivity 이부분으로서 표준이며 많은 장치들이 지원합니다.
http://webrtc.org 에서 시작 할 수 있으며,
http://withcenter.com 에서 WebRTC 솔루션, LMS 솔루션, 화상 회의, 화상 채팅, 전자칠판을 개발 했습니다. 물론 오픈소스이구요. GPL 로 배포됩니다.
제가 쓴 화상 회의 솔루션 개발 강좌를 보시면 좋습니다.
웹 브라우저에서 다른 사람과 화상 채팅을 하는 소스는 아래와 같습니다.
아래 소스 코드를 보시면 비교적 간단하다는 것을 알 수 있습니다. ( 하지만 실제 서비스를 위한 구현을 하려면 보다 많이 어렵습니다. )
Chrome, FireFox, Opera 등이 지원하며 iOS 진영에서는 아직 마땅한 것이 없지만 Bowser 등의 지원을 합니다.
Anroid 에서 크롬을 까면 되며,
Android 4.4 kitcat 부터는 기본 브라우저가 Chrome 이어서 보다 손 쉽게 이용 할 수 있습니다.
</div>
<div><span id="docs-internal-guid-6bbba1c8-a447-cff6-c3c3-c848dc1c54ce"><p dir="ltr" style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt"><span style="font-size: 15px; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap"><!DOCTYPE html></span></p>
<p dir="ltr" style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt"><span style="font-size: 15px; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap"><html></span></p>
<p dir="ltr" style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt"><span style="font-size: 15px; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap"> <head></span></p>
<p dir="ltr" style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt"><span style="font-size: 15px; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap"> <script src="<a href="http://simplewebrtc.com/latest.js" target="_blank" rel="noopener noreferrer">http://simplewebrtc.com/latest.js</a>"></script> </span></p>
<p dir="ltr" style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt"><span style="font-size: 15px; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap"> </head></span></p>
<p dir="ltr" style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt"><span style="font-size: 15px; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap"> <body></span></p>
<p dir="ltr" style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt"><span style="font-size: 15px; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap"> <div id="localVideo"></div></span></p>
<p dir="ltr" style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt"><span style="font-size: 15px; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap"> <div id="remotesVideos"></div></span></p>
<p dir="ltr" style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt"><span style="font-size: 15px; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap"><span class="Apple-tab-span" style="white-space: pre"> </span><span class="Apple-tab-span" style="white-space: pre"> </span></span></p>
<p dir="ltr" style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt"><span style="font-size: 15px; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap"><span class="Apple-tab-span" style="white-space: pre"> </span><span class="Apple-tab-span" style="white-space: pre"> </span><script></span></p>
<p dir="ltr" style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt"><span style="font-size: 15px; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap"><span class="Apple-tab-span" style="white-space: pre"> </span><span class="Apple-tab-span" style="white-space: pre"> </span>var webrtc = new SimpleWebRTC({</span></p>
<p dir="ltr" style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt"><span style="font-size: 15px; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap"> // the id/element dom element that will hold "our" video</span></p>
<p dir="ltr" style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt"><span style="font-size: 15px; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap"> localVideoEl: 'localVideo',</span></p>
<p dir="ltr" style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt"><span style="font-size: 15px; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap"> // the id/element dom element that will hold remote videos</span></p>
<p dir="ltr" style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt"><span style="font-size: 15px; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap"> remoteVideosEl: 'remotesVideos',</span></p>
<p dir="ltr" style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt"><span style="font-size: 15px; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap"> // immediately ask for camera access</span></p>
<p dir="ltr" style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt"><span style="font-size: 15px; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap"> autoRequestMedia: true</span></p>
<p dir="ltr" style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt"><span style="font-size: 15px; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap">});</span></p>
<p dir="ltr" style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt"><span style="font-size: 15px; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap">// we have to wait until it's ready</span></p>
<p dir="ltr" style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt"><span style="font-size: 15px; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap">webrtc.on('readyToCall', function () {</span></p>
<p dir="ltr" style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt"><span style="font-size: 15px; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap"> // you can name it anything</span></p>
<p dir="ltr" style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt"><span style="font-size: 15px; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap"> webrtc.joinRoom('jaeho');</span></p>
<p dir="ltr" style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt"><span style="font-size: 15px; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap">});</span></p>
<span style="font-size: 15px; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap"></span>
<p dir="ltr" style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt"><span style="font-size: 15px; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap"></script></span></p>
<p dir="ltr" style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt"><span style="font-size: 15px; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap"> </body></span></p><span style="font-size: 15px; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap"></html></span></span></div>
<div><span><span style="font-size: 15px; font-family: Arial; background-color: transparent; vertical-align: baseline; white-space: pre-wrap">
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
11년 전
아프리카티브를 이용하시면 됩니다.
돈써가며 만들어봤자...
수천명이상이 사용하고 있는 현재의 아프리카티비보다 질이 좋을수 없습니다.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인