Call
  • Web
    • Overview
      • Product Introduction
      • Activate the Service
      • 가격
        • 무료시간
        • 오디오/비디오 통화 Call 월정액 패키지
        • 구독 패키지 기간 과금 설명
    • Get Started
      • Run Sample Code
      • Integration (React)
      • Integration (Vue3)
      • Secure authentication with userSig
    • Basic Features
      • UI Customization
      • Configuring Nickname and Avatar
      • GroupCall
      • 플로팅 윈도우
      • 사용자 정의 벨소리
      • 해상도 및 채우기 모드 설정
      • 통화 상태 모니터링
    • Advanced Features
      • 가상 배경
      • AI 노이즈 캔슬링
      • 클라우드 녹화
    • 인터페이스 문서
      • UIKit APIs
        • API Overview
        • TUICallKit
      • Engine APIs
        • TUICallEngine
        • TUICallEvent
    • 서버 API
      • 통화 상태 콜백
        • 통화 상태 콜백
        • 통화 이벤트 콜백
        • 콜백 구성
          • 콜백 구성 인터페이스 목록
          • 콜백 구성 생성
          • 콜백 구성 조회
          • 콜백 구성 업데이트
          • 콜백 구성 삭제
      • REST 인터페이스
        • REST 인터페이스 소개
        • callId를 통한 기록 획득
        • 조건에 따른 기록 획득
    • FAQs
      • All Platfroms
      • Web
      • ErrorCode
      • 배포 설명
  • Android
    • Overview
      • Product Introduction
      • Activate the Service
      • Pricing
        • Free Minutes
        • Call Monthly Packages
        • Billing Explanation for Subscription Package Duration
    • Get Started
      • Demo 실행
      • 통합
      • Secure authentication with userSig
    • Basic Features
      • UI 맞춤화
      • 오프라인 통화 푸시
      • Configuring Nicknames and Avatars
      • 그룹 통화
      • 플로팅 윈도우
      • 사용자 정의 벨소리
      • 통화 상태 모니터링
    • 더 많은 기능
      • 가상 배경
      • AI 노이즈 캔슬링
      • 클라우드 녹화
    • 인터페이스 문서
      • UIKit APIs
        • 인터페이스 개요
        • TUICallKit
        • TUICallObserver
        • 유형 정의
      • Engine APIs
        • TUICallEngine
    • 서버 API
      • 통화 상태 콜백
        • 통화 상태 콜백
        • 통화 이벤트 콜백
        • 콜백 구성
          • 콜백 구성 인터페이스 목록
          • 콜백 구성 생성
          • 콜백 구성 조회
          • 콜백 구성 업데이트
          • 콜백 구성 삭제
      • REST 인터페이스
        • REST 인터페이스 소개
        • callId를 통한 기록 획득
        • 조건에 따른 기록 획득
    • FAQs
      • All Platforms
      • Android
      • ErrorCode
      • 배포 설명
  • iOS
    • Overview
      • Product Introduction
      • Activate the Service
      • Pricing
        • Free Minutes
        • Call Monthly Packages
        • Billing Explanation for Subscription Package Duration
    • Get Started
      • Demo 실행
      • 통합
      • Secure authentication with userSig
    • Basic Features
      • UI 맞춤화
      • 오프라인 통화 푸시
        • VoIP
        • APN
      • 닉네임 및 아바타 설정
      • 그룹 통화
      • 플로팅 윈도우
      • 사용자 정의 벨소리
      • 통화 상태 모니터링
    • 더 많은 기능
      • 가상 배경
      • AI 노이즈 캔슬링
      • 클라우드 녹화
    • 인터페이스 문서
      • UIKit APIs
        • 인터페이스 개요
        • TUICallKit
        • TUICallObserver
        • 유형 정의
      • Engine APIs
        • TUICallEngine
    • 서버 API
      • 통화 상태 콜백
        • 통화 상태 콜백
        • 통화 이벤트 콜백
        • 콜백 구성
          • 콜백 구성 인터페이스 목록
          • 콜백 구성 생성
          • 콜백 구성 조회
          • 콜백 구성 업데이트
          • 콜백 구성 삭제
      • REST 인터페이스
        • REST 인터페이스 소개
        • callId를 통한 기록 획득
        • 조건에 따른 기록 획득
    • FQAs
      • All Platform
      • iOS
      • ErrorCode
      • 배포 설명
  • Flutter
    • Overview
      • 개요
      • 서비스 활성화
      • Pricing
        • Free Minutes
        • Call Monthly Packages
        • Billing Explanation for Subscription Package Duration
    • Get Started
      • Demo 실행
      • 통합
      • Secure authentication with userSig
    • Basic Features
      • UI 맞춤화
      • 오프라인 통화 푸시
        • 알림
        • VoIP(옵션)
      • 닉네임 및 아바타 설정
      • 그룹 통화
      • 플로팅 윈도우
      • 사용자 정의 벨소리
      • 통화 상태 모니터링
    • 더 많은 기능
      • 가상 배경
      • AI 노이즈 캔슬링
      • 클라우드 녹화
      • 뷰티 특수효과
    • 인터페이스 문서
      • 인터페이스 개요
      • TUICallKit
      • TUICallEngine
      • TUICallObserver
      • 유형 정의
    • 서버 API
      • 통화 상태 콜백
        • 통화 상태 콜백
        • 통화 이벤트 콜백
        • 콜백 구성
          • 콜백 구성 인터페이스 목록
          • 콜백 구성 생성
          • 콜백 구성 조회
          • 콜백 구성 업데이트
          • 콜백 구성 삭제
      • REST 인터페이스
        • REST 인터페이스 소개
        • callId를 통한 기록 획득
        • 조건에 따른 기록 획득
    • FQAs
      • All Platform
      • Flutter
      • ErrorCode
      • 업그레이드
      • 배포 설명
Call

Integration (Vue3)

TUICallKit 통합

본문에서는 TUICallKit 컴포넌트를 빠르게 통합하여 미리 만들어진 UI로 영상 통화 애플리케이션을 구축하는 방법을 보여줍니다.
컴포넌트를 사용해 보려면 TUICallKit 기본 demo를 참고하십시오.
시작하기 전에 데스크톱 브라우저가 TRTC를 지원하는지 확인하십시오. 자세한 내용은 [환경 요구 사항](#3-환경 요구 사항)을 참고하십시오.

콘텐츠

FAQ
(1) 브라우저 버전-브라우저 버전)
(2) 네트워크
(3) 웹 사이트 도메인 프로토콜-웹 사이트 도메인 프로토콜)

1단계: 서비스 활성화

TUICallKit은 Tencent Cloud의 두 가지 유료 PaaS 제품인 Instant Messaging(IM)Tencent Real-Time Communication(TRTC)을 기반으로 하는 오디오/비디오 통신 컴포넌트입니다. 아래 단계에 따라 관련 서비스를 활성화하고 7일 무료 베타 서비스를 체험할 수 있습니다.
1. IM 콘솔에 로그인하고 애플리케이션 생성을 클릭합니다. 팝업 창에서 애플리케이션 이름을 입력하고 확인을 클릭합니다.


2. 방금 생성한 애플리케이션을 클릭하여 기본 구성 페이지로 이동하고 페이지 오른쪽 하단에서 Tencent TRTC 서비스 활성화무료 체험을 클릭하여 TUICallKit의 7일 무료 베타 서비스를 활성화합니다.



3. 같은 페이지에서 SDKAppIDKey를 찾아 기록해둡니다. 나중에 사용하게 됩니다.



SDKAppID: 비즈니스 격리에 사용되는 IM 애플리케이션 ID. 즉, SDKAppID 값이 다른 호출은 상호 연결할 수 없습니다.
Secretkey: IM의 승인된 사용을 위한 인증 자격 증명 UserSig를 생성하기 위해 SDKAppID와 함께 사용해야 하는 IM 애플리케이션 키입니다. 5단계에서 사용됩니다.

2단계: TUICallKit 컴포넌트 가져오기

방법1: npm을 사용하여 통합

npm을 사용하여 TUICallKit 컴포넌트를 다운로드합니다. 향후 비즈니스를 확장해야 하는 경우 TUICallKit을 프로젝트의 src/components/ 디렉터리에 복사하는 것이 좋습니다.
# macOS
yarn add @tencentcloud/call-uikit-vue # yarn을 설치하지 않았다면 npm install -g yarn을 먼저 실행하십시오
mkdir -p ./src/components/TUICallKit/Web && cp -r ./node_modules/@tencentcloud/call-uikit-vue/* ./src/components/TUICallKit/Web

# windows
yarn add @tencentcloud/call-uikit-vue # yarn을 설치하지 않았다면 npm install -g yarn을 먼저 실행하십시오
xcopy .\node_modules\@tencentcloud\call-uikit-vue .\src\components\TUICallKit\Web /i /e

방법2: 소스 코드 통합

1. GitHub에서 TUICallKit 소스 코드를 다운로드하고 TUICallKit/Web 폴더를 프로젝트의 src/components 폴더에 복사합니다.



2. 폴더를 입력하고 필요한 종속성을 설치합니다.
cd ./src/components/TUICallKit/Web
yarn # yarn을 설치하지 않았다면 npm install -g yarn을 먼저 실행하십시오

3단계: TUICallKit 호출

원하는 페이지에서 TUICallKit 컴포넌트를 호출하여 호출 페이지를 표시할 수 있습니다.
1. TUICallKit UI 가져오기
<script lang="ts" setup>
import { TUICallKit } from "./components/TUICallKit/Web";
</script>

<template>
<TUICallKit />
</template>
2. 사용자 로그인 및 전화 걸기
2.1 이미 TUIKit 컴포넌트를 사용하고 있다면 아래 코드를 추가하여 TUICallKit을 플러그인으로 선언합니다. 아직 TUIKit 컴포넌트를 사용하고 있지 않다면 건너뛰십시오.
import { TUICallKit } from './components/TUICallKit/Web';
TUIKit.use(TUICallKit);
2.2 호출하기 전에 컴포넌트를 초기화합니다.
import { TUICallKitServer } from './components/TUICallKit/Web';
TUICallKitServer.init({ SDKAppID, userID, userSig });
explain
SDKAppID 및 SecretKey를 얻는 방법은 1단계를 참고하십시오. 임시 방법으로 GenerateTestUserSig.js에서 genTestUserSig(userID)를 사용하여 userSig를 생성할 수 있습니다.
import * as GenerateTestUserSig from "./components/TUICallKit/Web/demos/basic/public/debug/GenerateTestUserSig.js";
const { userSig } = GenerateTestUserSig.genTestUserSig(userID, SDKAppID, SecretKey);
vite를 사용하여 프로젝트를 시작하는 경우 vite 가져오기도 수행해야 합니다.
notice
본문에서 UserSig를 얻는 방법은 프런트 엔드 코드에서 SECRETKEY를 구성하는 것입니다. 이 방법에서 SECRETKEY는 디컴파일 및 리버스 엔지니어링에 취약합니다. SECRETKEY가 공개되면 공격자가 Tencent Cloud 트래픽을 훔칠 수 있습니다. 따라서 이 방법은 로컬에서 프로젝트를 실행하고 디버깅하는 데에만 적합합니다. 올바른 UserSig 배포 방법은 UserSig의 계산 코드를 서버에 통합하고 App 지향 API를 제공하는 것입니다. UserSig가 필요할 때 App은 동적 UserSig에 대한 요청을 비즈니스 서버에 보낼 수 있습니다. 자세한 내용은 Calculating UserSig on the Server를 참고하십시오.
2.3 호출을 구현해야 하는 경우 다음 코드를 실행합니다.
import { TUICallKitServer } from './components/TUICallKit/Web';
TUICallKitServer.call({ userID: "123", type: 2 }); // 일대일 통화
TUICallKitServer.groupCall({ userIDList: ["xxx"], groupID: "xxx", type: 2 }); // 그룹 통화
이제 첫 번째 전화를 걸 수 있습니다~API 매개변수에 대한 자세한 내용은 API 문서를 참고하십시오
3. 고급 API
이 컴포넌트는 현재 통화 상태를 알려주는 데 사용할 수 있는 beforeCallingafterCalling 콜백을 제공합니다.
beforeCalling : 통화 전에 반환
afterCalling : 통화 후에 반환
예를 들어, <TUICallKit /> 컴포넌트를 확장 및 축소하는 데 사용할 수 있습니다(demo에 표시됨).
function beforeCalling() {
console.log("이 함수는 통화 전에 실행됩니다");
}
function afterCalling() {
console.log("이 함수는 통화 후에 실행됩니다");
}
<TUICallKit :beforeCalling="beforeCalling" :afterCalling="afterCalling"/>

기타 문서

FAQ

1. UserSig는 어떻게 생성합니까?

UserSig 배포 방식은 UserSig 계산 코드를 서버에 통합하고 프로젝트 지향 API를 제공하는 것입니다. UserSig가 필요한 경우, 프로젝트에서 동적 UserSig에 대한 요청을 비즈니스 서버에 보낼 수 있습니다. 자세한 내용은 Generating UserSig를 참고하십시오.

2. vite에서 가져오기 문제

vite에서 프로젝트를 생성하는 경우 vite는 다른 파일 패키징 방법을 사용하므로 lib-generate-test-usersig.min.jsindex.html로 가져와야 합니다.
// index.html
<script src="./src/components/TUICallKit/Web/demos/basic/public/debug/lib-generate-test-usersig.min.js"> </script>
GenerateTestUserSig.js에서 import한 메소드를 주석 처리합니다
// import * as LibGenerateTestUserSig from './lib-generate-test-usersig.min.js'

3. 환경 요구 사항

(1) 브라우저 버전 요구 사항

최신 버전의 Chrome 브라우저를 사용하여 체험하시기 바랍니다. 이 문서에 연결된 컴포넌트의 주요 데스크톱 브라우저 지원 현황은 다음과 같습니다.
OS
브라우저
최소 브라우저 버전 요구 사항
Mac OS
Safari 브라우저(데스크톱)
11+
Mac OS
Chrome 브라우저(데스크톱)
56+
Mac OS
Firefox 브라우저(데스크톱)
56+
Mac OS
Edge 브라우저(데스크톱)
80+
Windows
Chrome 브라우저(데스크톱)
56+
Windows
QQ 브라우저(데스크톱, WebKit 코어)
10.4+
Windows
Firefox 브라우저(데스크톱)
56+
Windows
Edge 브라우저(데스크톱)
80+

explain
브라우저 호환성에 대한 자세한 내용은 지원되는 브라우저를 참고하십시오. TRTC 호환성 확인 페이지를 사용하여 온라인 테스트를 실행할 수도 있습니다.

(2) 네트워크 환경 요구사항

TUICallKit 사용 시 방화벽 제한으로 인해 음성 및 영상 통화가 안될 수 있으니 방화벽 제한 처리를 참고하여 해당 포트 및 도메인 이름을 방화벽 얼로우리스트에 추가하시기 바랍니다.

(3) 웹사이트 도메인 프로토콜의 요구 사항

보안 및 개인 정보 보호를 위해 HTTPS URL만 본 문서에 연결된 컴포넌트의 모든 기능에 액세스할 수 있습니다. 따라서 프로덕션 환경에서 사용자가 제품 기능을 원활하게 체험할 수 있도록 https:// 프로토콜 도메인에 귀하의 웹사이트를 배치하십시오.
시나리오
프로토콜
수신(재생)
발송(게시)
화면 공유
비고
프로덕션 환경
HTTPS 프로토콜
지원
지원
지원
권장
프로덕션 환경
HTTP 프로토콜
지원
미지원
미지원
-
로컬 개발 환경
http://localhost
지원
지원
지원
권장
로컬 개발 환경
http://127.0.0.1
지원
지원
지원
-
로컬 개발 환경
http://[로컬IP]
지원
미지원
미지원
-
로컬 개발 환경
file:///
지원
지원
지원
-