WEBRTC 화상 채팅 애플리케이션 구축-JS 튜토리얼-php.cn

사용자 정의 WEBRTC 응용 프로그램 구축의 복잡성으로 인해이 기사는 단계별 빌드 튜토리얼을 제공하지 않습니다. 대신, 신뢰할 수있는 애플리케이션을 구축하는 데 필요한 라이브러리 및 서버 유형을 살펴 보겠습니다. 자체 응용 프로그램을 작성할 때 참조 할 수있는 완전한 샘플 응용 프로그램 링크를 제공하겠습니다.

우리는 주로 SimpleWebrtc 플랫폼에 중점을 둘 것입니다. 나중에, 우리는 동일한 목표를 달성하는 데 도움이되는 다른 상업 및 오픈 소스 대안을 간단히 다룰 것입니다.

키 포인트

WEBRTC를 사용하면 타사 플러그인없이 웹 브라우저 내에서 직접 포인트-포인트 실시간 통신을 허용하며 Chrome, Firefox 및 Safari와 같은 최신 브라우저를 지원합니다.

WEBRTC의 서명 (피어 투 피어 연결을 설정하는 데 중요한)은 Stun 및 Turn 서버에 의존하여 NAT (네트워크 주소 변환) 및 방화벽을 우회하여 다양한 네트워크 구성의 연결을 보장합니다.

SimpleWebrtc는 WEBRTC 애플리케이션을 구축하고 배포 할 수있는 포괄적 인 플랫폼을 제공하며 SDK, 서비스 호스팅 및 기술 지원을 제공하여 개발자가 사용자 정의 비디오 채팅 솔루션을보다 쉽게 구현할 수 있도록합니다.

Daily.co 및 기타 상업 플랫폼과 같은 Simplewebrtc의 대안은 완전 브랜드 솔루션에 대한 빠른 설정의 요구를 충족시키기 위해 다양한 수준의 사용 편의성 및 사용자 정의 옵션을 제공합니다. WEBRTC 애플리케이션의 배포에는 네트워크 안정성, 보안 및 브라우저 호환성 고려 사항이 필요하며 상용 플랫폼은 사용자 정의 개발과 관련된 많은 복잡성을 단순화합니다.

WEBRTC (Web Real-Time Communication)는 웹 브라우저 간의 포인트 간 실시간 통신을 허용하여 실시간 비디오, 오디오 및 네트워크를 통해 데이터 스트림을 전송하는 오픈 소스 프로젝트입니다. Google Chrome, Mozilla Firefox, Safari, Opera 및 기타 크롬 기반 브라우저는이 기술을 기본적으로 구현했습니다. 사용자는 타사 플러그인이나 응용 프로그램을 설치하지 않고 기술에 액세스 할 수 있기 때문에 좋은 소식입니다.

이전 브라우저 버전 및 Internet Explorer와 같은 기존 브라우저에는이 기술이 없습니다. 사용자는 최신 브라우저를 사용해야합니다. 지원되는 브라우저의 전체 목록을 볼 수 있습니다. 2021 년 1 월, W3C (World Wide Web Alliance)는 WEBRTC 1.0 사양을 후보 추천 상태에서 권장 상태로 전환했습니다. 이 기술이 10 년 전에 처음 출시되었다는 점을 고려하면 특별한 성과입니다.

WEBRTC 사양은 브라우저가 로컬 미디어 장치에 액세스하는 방법과 실시간 프로토콜 세트를 사용하여 미디어 및 공통 응용 프로그램 데이터를 브라우저로 전송하는 방법을 다룹니다. 이전 기사에서 다루어 진 JavaScript API 세트를 통해이를 수행합니다. 이 사양은 또한 모든 커뮤니케이션이 암호화되고 원치 않는 제 3자가 스트림에 도청 할 수 없도록합니다.

WEBRTC는 브라우저 간의 연결을 시작하는 과정 인 신호와 같은 모든 것을 다루지 않는다는 점에 유의해야합니다. 잠재적 인 새로운 기술적 한계를 피하기 위해 컨텐츠 의이 부분은 사양에서 생략됩니다. 두 번째 이유는 WEBRTC가 주로 클라이언트 기술이기 때문에 서버 기술을 사용하여 세션과 같은 문제를 처리하는 것이 가장 좋습니다.

브라우저 신호가 작동하는 방법

WEBRTC는 웹 브라우저 간의 지점 간 통신으로 정의됩니다. 실제로 대부분의 브라우저는 NAT (Network Address Translation) 장치 (선택적 방화벽) 뒤에있는 컴퓨터에서 실행된다는 것입니다. NAT 장치 (일반적으로 라우터 또는 모뎀)를 사용하면 개인 IP 주소가있는 컴퓨터가 단일 공개 IP 주소를 통해 인터넷에 연결할 수 있습니다. NAT 장치는 IP 주소를 통해 인터넷에서 악의적 인 사용자의 직접 공격으로부터 개인용 컴퓨터를 보호합니다. 불행히도, 개인 IP 주소가있는 장치가 인터넷을 통해 다른 개인 IP 장치에 연결하는 것을 방지합니다. 이 과제를 극복하기 위해 인터넷 엔지니어링 태스크 포스 (IETF)는 ICE (Interactive Connection Spuctishment) 프로토콜을 제안하여 개인 IP 컴퓨터가 공개 네트워크의 다른 개인 컴퓨터를 발견하고 연결할 수 있도록했습니다.

여기에는 두 클라이언트가 쉽게 연결할 수있는 공개 신호 서버를 사용하는 것이 포함됩니다. 피어 컴퓨터는이 서버에 연결하여 데이터 소스 및 수신기가 요구하는 IP 주소 및 포트를 교환하는 데 사용합니다. 이 정보를 사용하면 서로 직접 연결하고 비디오, 오디오 및 데이터 전송을 시작할 수 있습니다.

이것은 애니메이션 데모입니다 :

이미지 설명 : Webrtc 신호 webrtc 신호 전달을 설정하려면 ICE 프레임 워크를 사용하면 다음 두 가지 유형의 서버를 제공해야합니다.

> 1 Stun (NAT의 세션 트래버스 유틸리티) 서버 기능 위에서 설명한대로 기능합니다. 컴퓨터가 연락처 정보를 교환 할 수있는 회의 공간을 제공합니다. 정보 교환이 완료되면 피어 컴퓨터간에 연결이 설정되며 Spun 서버는 나머지 대화를 남깁니다.

이것은 클라이언트에서 실행되는 샘플 스크립트로서 브라우저가 STUN 서버를 통해 연결을 시작할 수 있습니다. 이 스크립트는 서버 중 하나가 실패 할 때 여러 가지 스턴 서버 URL을 제공 할 수 있습니다.

스턴 서버를 통해 설정된 연결은 가장 이상적이고 비용 효율적인 유형의 WEBRTC 커뮤니케이션입니다. 사용자는 운영 비용이 거의 발생하지 않습니다. 불행히도, 각 피어는 다른 유형의 NAT 장치를 사용하기 때문에 일부 사용자의 연결이 설정되지 않을 수 있습니다. 이 경우 ICE 프로토콜을 사용하려면 Turn Server라는 다른 유형의 신호 서버를 제공해야합니다.

> 2. 서버를 돌리십시오 턴 (릴레이 NAT로 이동) 서버는 STUN 서버의 확장입니다. 전임자와 다른 점은 전체 커뮤니케이션 세션을 처리한다는 것입니다.

기본적으로 동료 간의 연결을 설정 한 후 한 피어로부터 스트림을 받고 다른 피어에게 전달하고 그 반대도 마찬가지입니다. 이러한 유형의 통신은 더 비싸고 호스트는 턴 서버를 실행하는 데 필요한 처리 및 대역폭로드를 지불해야합니다.

다음은 먼저 Stun Server와 관련된 전체 신호 프로세스와 턴 서버를 폴백으로 포함하는 그래픽 설명입니다.

이미지 설명 : 전체 WEBRTC 프로세스의 완전한 아키텍처 다이어그램을 보여줍니다.

기술 지원 사용자 정의 응용 프로그램 개발 및 WEBRTC 컨설팅 서비스 단일 테넌트 및 지역 인프라 talky : Simplewebrtc 와 전적으로 구축 된 무료 화상 채팅 응용 프로그램 다음은 고객이 개발하고 출시하는 데 도움이되는 일부 사용자 정의 비디오 채팅 프로젝트의 스크린 샷입니다.

그림 설명 : talky

사진 설명 : 웹 튜터링 앱

단순한 WebRTC 플랫폼에서 제공하는 주요 WebRTC 서비스는 다음과 같습니다. 엔드-투-엔드 암호화

최대 30 명의 동시 사용자를 지원합니다 무한실

가격 측면에서 그들은 다음 계획을 제공합니다.

소규모 그룹 : 최대 5 명, 매달 $ 5부터 시작하여 대형 그룹 : 최대 30 명, 매달 $ 3부터 시작하여

소규모 그룹 계획의 장점은 엔드 투 엔드 암호화를 사용할 수 있지만 대규모 그룹 계획은 할 수 없다는 것입니다. 소규모 그룹 계획에서 세션의 60-80%는 피어 투 피어 연결이며 미디어 스트림은 서버에 닿지 않습니다. 그러한 세션에 대한 대역폭 소비에 대한 비용은 없습니다.

대규모 그룹 계획의 경우 트래픽은 SFU (선택적 전달 장치)라는 서버를 통해 라우팅되며 모든 트래픽은 계량됩니다.

대부분의 상업적 대안 (나중에 간단히 설명 할 것임)은 에 의해 청구된다는 점에 유의해야한다. 언뜻보기에는 매우 저렴 해 보입니다. 그러나 피어 투 피어 연결 비용을 청구하며 SimpleWebrtc는 무료로 제공됩니다.

(기사의 길이로 인해 다음 내용이 단순화되고 핵심 정보 및 코드 예제가 유지됩니다. 전체 원본 텍스트는 원본 문서를 참조하십시오.) > 전제 조건 SimpleWebrtc 클라이언트 라이브러리는 React 및 Redux 생태계에 의존합니다. 기본 기술이 필요합니다 :

반응 redux 비동기식 Redux 라이브러리 - Redux Thunk, Redux Saga 및 Redux Observables와 같은

계정을 설정

간단한 webrtc.com의 등록 페이지를 받고 새 계정을 등록하십시오. 2GB 대역폭을 얻을 수 있으며 뉴스 레터에 가입하면 추가 3GB의 대역폭이됩니다. 이 할당량은 화상 채팅 응용 프로그램을 개발하고 테스트하기에 충분해야합니다. 등록 후 이메일 주소를 확인해야합니다. 이 단계를 완료하면 API 키를받을 대시 보드 페이지에 있어야합니다. 이 API 키를 사용하면 자신의 사용자 정의 WEBRTC 응용 프로그램을 구축 할 수 있습니다. 다음 섹션에서는 SimpleweBRTC 팀이 구축 한 전체 샘플 응용 프로그램을 실행합니다.

샘플 애플리케이션을 빌드하고 실행합니다 (코드 샘플이 간소화 됨) 배포 (단순화 된 배포 단계) 간단한 대안으로 대안 (대안에 대한 간단한 소개)

결론

어쨌든, 상용 플랫폼을 사용하여 WebRTC와 라이브 화상 채팅 솔루션을 구축하는 것이 더 쉽습니다. 오픈 소스 경로를 채택하는 것은 가능하지만 모든 사용자가 신뢰할 수있는 연결을 위해 자체 턴 서버를 호스팅해야합니다. 두 경우 모두, 우리가 본 샘플 응용 프로그램의 상대적 복잡성을 감안할 때 빌드 프로세스는 시간이 많이 걸릴 수 있습니다.

스스로에게 묻는 주요 질문은 자신의 맞춤형 실시간 솔루션을 구축하는 것이 시간의 가치가 있는지 여부입니다. WebRTC를 핵심 비즈니스로 사용하지 않는 한, 먼저이 기술을 처리 한 경험이있는 회사와 상담해야 할 수도 있습니다.