다음을 위해 설계됨: VUE

Vue 라이브 스트리밍 UI Kit

Tencent RTC의 Vue Live Streaming UI Kit를 사용해 Web 방송을 추가하세요. Vue 애플리케이션에서 호스트 준비, 시청자 보기, 방 목록 구성 요소를 결합하세요.

빌드 시작 Live 데모 살펴보기

개발자 리소스

Vue 라이브 스트리밍 UI Kit 문서 및 예제

컴포넌트 참고 자료

Vue 라이브 스트리밍 UI Kit 컴포넌트를 살펴보세요.

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

통합 가이드

Vue 라이브 스트리밍 UI Kit를 설치하고 사용자를 연결하세요.

Vue 통합 빠른 시작

예제 및 소스

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

Live 데모 살펴보기 Vue 소스 코드 보기

Vue로 구현하는 라이브 제품 데모

시청자가 크리에이터의 상품 시연을 보고 대화에 참여할 수 있게 하세요. 카탈로그와 구매 경험은 애플리케이션에서 관리합니다.

라이브 쇼핑 살펴보기

Vue에서 라이브 이벤트 시청

프레젠테이션과 시청자를 Vue 앱으로 가져오세요. 시청 화면을 방에 연결해 사람들이 라이브 이벤트를 볼 수 있도록 하세요.

이벤트 스트리밍 살펴보기

VUE LIVE 기능

Vue 라이브 스트리밍 기능

라이브 시작

호스트 및 시청자 역할
방 수명 주기 관리

사람들을 하나로 연결

라이브 영상 재생
시청자 참여

내 것으로 만들기

유연한 애플리케이션 레이아웃
플랫폼별 구성 요소

Vue Live Streaming Components 살펴보기

호스트 화면, 시청자 화면 및 라이브 룸 목록을 애플리케이션 내비게이션에 연결하세요.

호스트 미리보기

크리에이터가 시작할 공간 제공

Vue 호스트 준비 화면을 추가해 크리에이터가 방송 전에 카메라를 미리 볼 수 있도록 하세요. 화면을 인증된 호스트 계정에 연결하세요.

문서 읽기

<script setup>
import { StreamMixer, LiveScenePanel } from "tuikit-atomicx-vue3";
</script>

<template>
  <LiveScenePanel />
  <StreamMixer />
</template>

시청자 화면

시청 경험을 앱의 일부로 만드세요

선택한 라이브 방으로 Vue 시청자 뷰를 여세요. 방 입장 및 퇴장을 앱 탐색 기능과 연결하세요.

문서 읽기

<script setup>
import { LiveCoreView, BarrageList, BarrageInput }
  from "tuikit-atomicx-vue3";
</script>

<template>
  <LiveCoreView />
  <BarrageList />
  <BarrageInput />
</template>

라이브 방 목록

라이브 콘텐츠 탐색의 문을 여세요

탐색 가능한 목록을 추가하고 시청 흐름에 연결하세요.

문서 읽기

<script setup>
import { LiveList } from "tuikit-atomicx-vue3";
</script>

<template>
  <LiveList @live-room-click="openLiveRoom" />
</template>

커스터마이징

Vue Live UI Kit 사용자 지정

Vue 앱에서 라이브 경험을 중심으로 비디오, 시청자 상호작용 및 탐색을 구성하세요.

브랜드 시각 아이덴티티

플랫폼에서 제공하는 사용자 지정 옵션으로 시각적 표현을 조정하세요.

문서 읽기

시작하기

Vue 앱에 라이브 스트리밍 추가

01
앱 만들기
애플리케이션과 테스트 사용자를 위해 Live을 활성화하세요.
Live 콘솔 열기
02
Vue 라이브 스트리밍 UI Kit 추가
플랫폼 가이드에 따라 프로젝트를 연결하세요.
통합 가이드 따르기
03
첫 번째 룸에 연결
한 계정으로 방송하고 다른 계정으로 시청하세요.
인증 설정

Vue Live UI Kit

npm install tuikit-atomicx-vue3 \
  @tencentcloud/uikit-base-component-vue3

import { useLoginState } from 'tuikit-atomicx-vue3';

const { login } = useLoginState();
await login({ sdkAppId: SDKAppID, userId: userID, userSig });

Vue 라이브 스트리밍 UI Kit 자주 묻는 질문

Vue Live UI Kit로 무엇을 구축할 수 있나요?

Vue 라이브 스트리밍 UI Kit에는 호스트, 시청자, 방 목록 인터페이스가 포함되어 있습니다. 이러한 TUILiveKit 컴포넌트를 사용자 계정과 Vue 내비게이션에 연결하여 완전한 시청 흐름을 구축하세요.

이 UI Kit은 SDK와 어떻게 연동되나요?

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

Web 라이브 스트리밍 SDK

Vue 라이브 시청자를 방송에 연결하려면 어떻게 해야 하나요?

Live 서비스를 활성화하고 시청자를 인증한 후 호스트가 만든 방에 참여하세요. 별도 계정을 사용해 Vue 시청자 화면을 테스트하고 플랫폼 가이드에 따라 구성하세요.

Vue 시청자 통합 가이드

Vue Live Streaming UI Kit 사용자를 어떻게 인증하나요?

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

인증 가이드 보기

Vue Live Streaming UI Kit을 무료로 사용할 수 있나요?

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

Live 요금 보기

Vue 프로젝트에 Vue 라이브 스트리밍 UI Kit를 통합하려면 어떻게 해야 하나요?

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

플랫폼 가이드 읽기

앱 출시 전에 Vue 라이브 스트리밍 UI Kit를 어떻게 테스트하나요?

호스트·시청자 역할, 지원 송출·재생 이벤트와 재연결을 테스트하세요.

플랫폼 가이드 읽기

Vue 라이브 스트리밍 UI Kit의 인터페이스를 어떻게 맞춤 설정하나요?

방송을 시작하기 전에 tuikit-atomicx-vue3의 useLiveListState로 호스트 레이아웃을 설정하세요. 예를 들어 updateLiveInfo({ layoutTemplate: 200 })는 가로 레이아웃을 선택하고, 템플릿 600은 세로 동적 그리드를 선택합니다. 방송 방향은 시작 전에 정해야 하며 방송 중에는 바꿀 수 없습니다. CSS 종횡비만 변경하지 말고 미리보기와 호스트 컨트롤을 선택한 템플릿에 맞추세요.

맞춤 설정 가이드 보기

Vue Live 통합 지원

통합 관련 질문

Vue 라이브 스트리밍 UI Kit 설정에 대한 도움을 받으세요.

개발자 문서 보기

애플리케이션 상담

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

판매원에게 연락하기

Vue 앱에 라이브 스트리밍 추가

Vue Live Streaming UI Kit와 플랫폼 가이드를 활용해 크리에이터와 시청자를 연결하세요.

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

Vue 라이브 스트리밍 UI Kit

Vue 라이브 스트리밍 UI Kit 문서 및 예제

컴포넌트 참고 자료

통합 가이드

예제 및 소스

Vue로 구현하는 라이브 제품 데모

Vue에서 라이브 이벤트 시청

Vue 라이브 스트리밍 기능

라이브 시작

사람들을 하나로 연결

내 것으로 만들기

Vue Live Streaming Components 살펴보기

크리에이터가 시작할 공간 제공

시청 경험을 앱의 일부로 만드세요

라이브 콘텐츠 탐색의 문을 여세요

Vue Live UI Kit 사용자 지정

브랜드 시각 아이덴티티

댓글 및 콘텐츠

Vue 앱에 라이브 스트리밍 추가

앱 만들기

Vue 라이브 스트리밍 UI Kit 추가

첫 번째 룸에 연결

Vue 라이브 스트리밍 UI Kit 자주 묻는 질문

Vue Live UI Kit로 무엇을 구축할 수 있나요?

이 UI Kit은 SDK와 어떻게 연동되나요?

Vue 라이브 시청자를 방송에 연결하려면 어떻게 해야 하나요?

Vue Live Streaming UI Kit 사용자를 어떻게 인증하나요?

Vue Live Streaming UI Kit을 무료로 사용할 수 있나요?

Vue 프로젝트에 Vue 라이브 스트리밍 UI Kit를 통합하려면 어떻게 해야 하나요?

앱 출시 전에 Vue 라이브 스트리밍 UI Kit를 어떻게 테스트하나요?

Vue 라이브 스트리밍 UI Kit의 인터페이스를 어떻게 맞춤 설정하나요?

Vue Live 통합 지원

통합 관련 질문

애플리케이션 상담

Vue 앱에 라이브 스트리밍 추가