React.js & Tencent RTC로 웹용 UIKit을 사용하여 5분 만에 화상 통화 만들기

- Node.js, Node.js 환경이 없다면 [클릭하여 다운로드](https://nodejs.org/en)하세요.

- 최신 브라우저, WebRTC API 지원.

- 코드 편집기 — 저는 [VSCode](https://code.visualstudio.com/)를 좋아합니다.

- [Trtc.io](https://console.trtc.io/)의 개발자 계정.

# 1단계. 데모 다운로드

1. 터미널을 열고 저장소를 복제하는 명령을 입력합니다.

`git clone https://github.com/Tencent-RTC/TUICallKit.git

awk`

!https://trtc.io/media/290d515a-5579-49e3-b474-6496bd223bc1.png

1. 종속성 설치

`cd ./TUICallKit/Web/basic-react

awk`

`npm install

cmake`

!https://trtc.io/media/64f9ac3f-3edd-4cfb-9461-2f1ebf2214f2.png

# 2단계. 데모 구성

1. Tencent-RTC 애플리케이션을 활성화하려면 [Tencent RTC 콘솔](https://trtc.io/login?s_url=https://console.trtc.io/)에 로그인하고 애플리케이션 생성을 클릭합니다.

2. 생성 팝업에서 통화를 선택하고 애플리케이션 이름을 입력한 다음 데이터 저장 지역을 선택하고 생성을 클릭합니다.

3. 활성화되면 애플리케이션 개요를 클릭하여 SDKAppID와 SDKSecretKey를 얻습니다.

4. Web/basic-react/public/debug/GenerateTestUserSig-es.js에서 SDKAPPID와 SDKSecretKey를 입력합니다.

!https://trtc.io/media/12980ca6-b2ef-48a4-980a-89624b139c3e.png

# 3단계. 데모 실행

1. 터미널에서 명령을 입력하여 데모를 실행합니다.

`# TUICallKit/Web/basic-react

npm run dev

jsx`

!https://trtc.io/media/382754d0-c189-4357-87ea-5648122f1f01.png

참고:

로컬 환경의 경우 localhost 프로토콜로 액세스하세요. 자세한 내용은 [네트워크 액세스 프로토콜 설명](https://web.sdk.qcloud.com/trtc/webrtc/doc/en/tutorial-05-info-browser.html#h2-3)을 참조하세요.

!https://trtc.io/media/825a55e7-ee29-4efd-a0c6-15ecbc0f5fd0.png

1. 두 개의 브라우저 페이지를 열고 동일한 URL을 입력한 다음 두 개의 다른 userID로 로그인합니다. (이것은 react 데모 효과입니다)

2. 두 userID가 모두 성공적으로 로그인한 후 다른 페이지의 userID를 입력하고 통화 목록에 추가 버튼을 클릭합니다.

# 첫 번째 통화 만들기

통화 버튼을 클릭하여 첫 번째 통화를 경험해보세요.

# 그룹 통화 만들기

그런 다음 세 번째 웹 페이지를 열고 아무 UserID나 입력할 수 있습니다. '로그인'을 클릭하세요. 두 사람 모두에게 전화를 걸어 그룹 통화를 할 수 있습니다.


# 마침

이렇게 간단하게 끝났습니다!

이 프로젝트의 전체 소스 코드는 [GitHub](https://github.com/Tencent-RTC/TUICallKit)에서 확인할 수 있습니다.