Webrtc & Twilio와 함께 실시간 화상 채팅방 만들기

이 기사는 Wern Ancheta와 Tim Severien의 동료 검토의 혜택을 받았습니다. 컨텐츠를 향상시킨 Sitepoint의 동료 검토 자에게 감사합니다! 내 이전 기사 인 "The Dawn of Webrtc"를 작성하는 간단한 사진 부스 앱을 보여 주면서이 기사는 WEBRTC (Web Real-Time Communications) API를 사용하여 기능적 화상 채팅방을 만들도록 안내합니다. WebRTC는 웹 및 모바일 개발자가 직접적인 API를 사용하여 고화질 비디오 및 오디오 통화 응용 프로그램을 구축 할 수 있도록합니다. 의료, 교육, 고객 서비스 및 소셜 미디어를 포함한 광범위한 산업은 차세대 응용 프로그램을 위해 WEBRTC를 활용하고 있습니다. Facebook Messenger, Whatsapp 및 Snapchat과 같은 플랫폼을 통해 무의식적으로 Webrtc를 사용했을 것입니다.

주요 학습 포인트 : Twilio의 프로그래밍 가능한 비디오 API를 사용하여 실시간 비디오 및 오디오를 응용 프로그램에 통합하여 사용자 참여를 향상시킵니다.

Twilio를 사용한 개발 간소화

WEBRTC와 유사한 기술은 커뮤니케이션에 혁명을 일으키고 있습니다. 개발자는 향상된 통신 기능을 모든 애플리케이션에 쉽게 통합 할 수 있습니다. Facebook, Snapchat, Tango 및 WhatsApp과 같은 주요 플랫폼과 마찬가지로 라이브 오디오 및 비디오를 통합했습니다. 프로세스는 놀랍게도 단순하고 빠르며 비용 효율적입니다. WebRTC의 Google 오픈 소스 특성은 라이센스 비용을 제거합니다. 그러나 Turn/Stun, Signaling 및 MCU와 같은 WEBRTC 구성 요소를 탐색하는 것은 어려울 수 있습니다.

많은 PAAS 제공 업체는 WebRTC 솔루션을 제공합니다. BLACC Spot Media에서의 경험을 바탕으로 Twilio가 입증 된 효과를 추천합니다. 이 기사는 플랫폼에 중점을 둡니다.

Twilio Video : 강력한 도구 Twilio는 간단한 API 및 SDK를 통해 커뮤니케이션 도구 제품군을 제공합니다. 그들의 프로그래밍 가능한 비디오를 사용하면 웹 및 모바일 앱에서 HD 멀티 파티 비디오 및 오디오 경험이 가능합니다. Twilio는 WebRTC Space의 리더이며 지속적으로 제품을 향상시킵니다. 향후 향상에는 모바일 화면 공유 및 개선 된 다당 기능이 포함됩니다.

채팅방 구축

• 이 데모에는 Twilio 계정이 필요합니다 (무료 계정에 가입하고 "프로그래밍 가능한 비디오"를 선택). 당신은 필요합니다 :

Credential	Description
Twilio Account SID	Your main Twilio account identifier (found on your dashboard).
Twilio Video Config SID	Enables video capabilities in the access token (generate one on your dashboard).
API Key	Used for authentication (generate one on your dashboard).
API Secret	Used for authentication (generate one on your dashboard).

우리는 또한 사용자 관리에 FireBase를 사용합니다. (필요한 경우 무료 계정에 가입하십시오). 설정 후이 데모를 서버에 배포 할 수 있습니다.

데모

코드는 Github에서 사용할 수 있으며 라이브 데모는 BLACC Spot Media에서 호스팅됩니다. WebRTC는 현재 데스크탑에서 Google Chrome, Mozilla Firefox 및 Opera를 지원합니다. rtcpeerconnection을 사용할 수있는 브라우저 호환성을 확인하십시오 서버 배포 (Chrome 47 이상 SSL 필요)의 경우 무료 SSL 인증서를 위해 Let 's Encrypt를 사용하십시오. 디지털 해양 튜토리얼은 설치를 지원할 수 있습니다 PHP 코드 (token.php) 이 PHP 스크립트는 Twilio 인증 및 토큰 생성을 처리합니다 html 코드 (index.html)

이 html은 채팅방 인터페이스의 기본 구조를 제공합니다.

JavaScript 코드 (App.js)

이 JavaScript는 WEBRTC 기능, 사용자 상호 작용 및 FireBase 통합을 처리합니다. (참고 : 이것은 Brevity를위한 상당히 단축 된 버전입니다. 전체 코드는 Github에서 사용할 수 있습니다.)

. 생략 된 기능을 포함한 전체 JavaScript 코드는 원본 기사에 연결된 GitHub 저장소에서 사용할 수 있습니다. 결론

WebRTC는 의사 소통을 변화시키고 있습니다. Twilio 및 Firebase는 실시간 커뮤니케이션 응용 프로그램의 개발을 단순화합니다. 오늘 자신만의 혁신적인 솔루션 구축을 시작하십시오! 더 많은 webrtc 튜토리얼 및 리소스를 보려면 Webrtc.tutorials (출시시)를 방문하십시오.

(원래 입력의 FAQS 섹션은 길이 제약으로 인해 생략되었지만이 개정 된 출력으로 쉽게 다시 통합 할 수 있습니다.)

위 내용은 Webrtc & Twilio와 함께 실시간 화상 채팅방 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!