다음을 위해 설계됨: VUE

Vue 영상 통화 UI Kit

Tencent RTC의 Vue Video Calling UI Kit으로 음성 및 영상 통화를 추가하세요. Vue 앱에 TUICallKit을 마운트하고 통화 제어 기능을 기존 사용자 흐름에 연결하세요.

빌드 시작 Call 데모 체험

개발자 리소스

Vue 영상 통화 UI Kit 문서 및 예제

컴포넌트 참고 자료

Vue 영상 통화 UI Kit 컴포넌트를 살펴보세요.

컴포넌트 살펴보기 사용자 인증

통합 가이드

Vue 영상 통화 UI Kit를 설치하고 사용자를 연결하세요.

Vue 통합 빠른 시작

예제 및 소스

제품이 실제로 작동하는 모습을 확인하고 구현 방식을 살펴보세요.

Call 데모 체험 Vue 소스 코드 보기

Vue 일대일 영상 통화

개인적인 교류나 상담을 위해 Vue 앱에 대면 대화를 추가하고, 하나의 경험에서 영상 및 통화 제어 기능을 제공하세요.

영상 상담 살펴보기

Vue 그룹 화상 통화

Vue 통화 컴포넌트에서 여러 참가자를 연결하세요. 플랫폼 가이드에 따라 통화 흐름과 지원되는 그룹 레이아웃을 구성하세요.

그룹 통화 살펴보기

VUE CALL 기능

Vue 영상 통화 기능

사람들을 연결하세요

음성 및 영상 통화
수신 통화 처리

통화 경험을 직접 제어

카메라 및 마이크 컨트롤
통화 수명 주기 이벤트

내 것으로 만들기

애플리케이션 흐름
플랫폼별 통합

Vue 영상 통화 컴포넌트 살펴보기

TUICallKit을 컴포넌트 레이아웃에 연결한 후 앱 내 작업을 통해 통화를 시작하세요.

통화 인터페이스

Vue 통화 인터페이스 임베드

컴포넌트 레이아웃에 TUICallKit를 마운트하고 인증된 사용자로 초기화하세요. 이 컴포넌트는 통화 인터페이스와 컨트롤을 제공합니다.

문서 읽기

<script setup>
import { TUICallKit } from "@trtc/calls-uikit-vue";
</script>

<template>
  <TUICallKit />
</template>

통화 시작

Vue에서 영상 통화 시작

애플리케이션의 수신자 ID를 통화 API에 전달하세요. 이 작업을 Vue 인터페이스의 연락처, 대화 또는 통화 버튼에 연결합니다.

문서 읽기

import { TUICallKitAPI, CallMediaType } from
  '@trtc/calls-uikit-vue';

await TUICallKitAPI.calls({
  userIDList: [recipientID],
  type: CallMediaType.VIDEO,
});

플로팅 창

사용자가 앱 내에서 이동해도 대화가 계속 표시되게 하세요.

문서 읽기

TUICallKitAPI.enableFloatWindow(true);

커스터마이징

Vue 통화 UI Kit 맞춤 설정

Vue 통화 컴포넌트, 제어 기능 및 수신 통화 흐름을 제품에 맞게 조정하세요.

레이아웃 및 제어

플랫폼 가이드의 맞춤 설정 옵션을 사용해 통화 환경을 조정하세요.

문서 읽기

시작하기

Vue 앱에 영상 통화 추가

01
앱 만들기
애플리케이션과 테스트 사용자를 위해 Call을 활성화하세요.
Call 콘솔 열기
02
Vue 영상 통화 UI Kit 추가
플랫폼 가이드에 따라 프로젝트를 연결하세요.
통합 가이드 따르기
03
첫 통화 시작
두 테스트 사용자로 로그인한 다음 전화를 걸고 받으세요.
인증 설정

Vue Call UI Kit

npm install @trtc/calls-uikit-vue

import { TUICallKitAPI } from '@trtc/calls-uikit-vue';

await TUICallKitAPI.init({ SDKAppID, userID, userSig });

Vue 영상 통화 UI Kit 자주 묻는 질문

Vue Video Calling UI Kit에는 무엇이 포함되어 있나요?

Vue 영상 통화 UI Kit은 TUICallKit 화면과 통화 컨트롤을 제공합니다. 사용자 ID 및 컴포넌트 레이아웃에 연결하면 Call 서비스가 참가자를 연결합니다.

Vue 통화 SDK와 UI Kit 중 무엇을 사용해야 하나요?

UI Kit은 기반 서비스 위에 인터페이스 컴포넌트를 제공합니다. 애플리케이션 UI를 더 세밀하게 제어해야 한다면 SDK를 선택하세요.

Web 영상 통화 SDK

브라우저에서 Vue 영상 통화를 사용하려면 무엇이 필요한가요?

Call 서비스가 활성화된 인증 사용자에 대해 TUICallKit을 초기화하세요. HTTPS 또는 localhost를 사용하고 카메라, 마이크 및 브라우저 재생 권한을 처리합니다.

Vue Call 통합 가이드

Vue Video Calling UI Kit 사용자를 인증하려면 어떻게 해야 하나요?

서버에서 UserSig를 생성하고 자체 로그인 흐름을 완료한 후 클라이언트에 전달하세요. 애플리케이션 시크릿은 항상 서버에 보관하세요.

인증 가이드 보기

Vue 영상 통화 UI Kit를 무료로 사용할 수 있나요?

인터페이스와 호스팅형 Call 서비스는 서로 다른 역할을 합니다. 애플리케이션에서 서비스를 활성화하고 현재 요금제, 기능 제공 여부 및 사용 요금을 확인하세요.

Call 요금 보기

Vue 프로젝트에 Vue 영상 통화 UI Kit를 통합하려면 어떻게 해야 하나요?

문서화된 Vue 통합 및 컴포넌트 API를 사용하세요. 연결된 뷰보다 먼저 서비스를 초기화하고 뷰가 언마운트될 때 리스너를 제거하거나 리소스를 해제하세요.

플랫폼 가이드 읽기

앱 출시 전에 Vue 영상 통화 UI Kit를 어떻게 테스트하나요?

서로 다른 사용자 간의 초대, 수락, 거절, 통화 종료 상태를 테스트하고 권한 거부 상황도 포함하세요.

플랫폼 가이드 읽기

Vue 영상 통화 UI Kit의 인터페이스를 어떻게 맞춤 설정하나요?

@trtc/calls-uikit-vue의 TUICallKitAPI에서 setLocalViewBackgroundImage와 setRemoteViewBackgroundImage를 사용해 카메라가 꺼졌을 때의 배경을 설정하세요. 이 배경은 음성 통화 중이거나 영상이 꺼져 있을 때 표시됩니다. 버튼 SVG를 맞춤 설정하려면 문서의 소스 복사 절차에 따라 Vue 3, TypeScript 및 3.2.2 이상 버전을 사용해야 합니다. 가져오기 경로를 로컬 컴포넌트 사본으로 바꾸고 업그레이드할 때도 변경 사항을 관리하세요.

맞춤 설정 가이드 보기

Vue Call 통합 지원

통합 관련 질문

Vue 영상 통화 UI Kit 설정에 대한 도움을 받으세요.

개발자 문서 보기

애플리케이션 상담

제품, 예상 사용량 및 통합 요구 사항을 상담하세요.

판매원에게 연락하기

Vue 앱에 영상 통화 추가

Vue Video Calling UI Kit으로 시작해 두 테스트 사용자를 연결하고 첫 통화를 만드세요.

무료로 시작하기 UI Kit 가이드 보기

Vue 영상 통화 UI Kit

Vue 영상 통화 UI Kit 문서 및 예제

컴포넌트 참고 자료

통합 가이드

예제 및 소스

Vue 일대일 영상 통화

Vue 그룹 화상 통화

Vue 영상 통화 기능

사람들을 연결하세요

통화 경험을 직접 제어

내 것으로 만들기

Vue 영상 통화 컴포넌트 살펴보기

Vue 통화 인터페이스 임베드

Vue에서 영상 통화 시작

플로팅 창

Vue 통화 UI Kit 맞춤 설정

레이아웃 및 제어

벨소리 및 발신자 정보

Vue 앱에 영상 통화 추가

앱 만들기

Vue 영상 통화 UI Kit 추가

첫 통화 시작

Vue 영상 통화 UI Kit 자주 묻는 질문

Vue Video Calling UI Kit에는 무엇이 포함되어 있나요?

Vue 통화 SDK와 UI Kit 중 무엇을 사용해야 하나요?

브라우저에서 Vue 영상 통화를 사용하려면 무엇이 필요한가요?

Vue Video Calling UI Kit 사용자를 인증하려면 어떻게 해야 하나요?

Vue 영상 통화 UI Kit를 무료로 사용할 수 있나요?

Vue 프로젝트에 Vue 영상 통화 UI Kit를 통합하려면 어떻게 해야 하나요?

앱 출시 전에 Vue 영상 통화 UI Kit를 어떻게 테스트하나요?

Vue 영상 통화 UI Kit의 인터페이스를 어떻게 맞춤 설정하나요?

Vue Call 통합 지원

통합 관련 질문

애플리케이션 상담

Vue 앱에 영상 통화 추가