다음을 위해 설계됨: WEB

Web 라이브 스트리밍 SDK

Tencent RTC의 Web Live Streaming SDK for Vue 3로 브라우저 방송을 구축하세요. AtomicXCore 룸 API 및 비디오 뷰를 자체 호스트 및 시청자 인터페이스와 결합하세요.

빌드 시작 Live 데모 살펴보기

개발자 리소스

Web 라이브 스트리밍 SDK 문서 및 예제

API 레퍼런스

Web 라이브 스트리밍 SDK API를 살펴보세요.

API 살펴보기 사용자 인증

통합 가이드

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

Web 통합 빠른 시작

예제 및 소스

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

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

Web 라이브 제품 데모

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

라이브 쇼핑 살펴보기

Web에서 라이브 이벤트 시청

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

이벤트 스트리밍 살펴보기

WEB LIVE 기능

Web 라이브 스트리밍 기능

라이브 시작

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

사람들을 하나로 연결

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

내 것으로 만들기

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

Web 라이브 스트리밍 API 살펴보기

AtomicXCore 비디오 뷰와 방 상태를 Web 호스트 및 시청자 인터페이스에 연결하세요.

비디오 캔버스

Web 라이브 영상 뷰 추가

AtomicXCore 비디오 뷰를 Web 레이아웃에 배치하세요. 룸 상태에 바인딩하고 주변 제어 기능과 내비게이션은 애플리케이션에서 제공하세요.

문서 읽기

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

<template><StreamMixer /></template>

라이브 시작

Web에서 라이브 스트리밍 시작

호스트를 인증하고 로컬 오디오와 비디오를 준비한 후 라이브 방을 만드세요. 미디어 화면과 방 수명 주기에 동일한 방 ID를 사용하세요.

문서 읽기

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

const { createLive } = useLiveListState();
await createLive({ liveId, liveName: 'Studio sessions' });

방에 참여하기

시청자를 현장 속으로

동일한 방 ID를 사용해 시청자를 연결하세요.

문서 읽기

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

const { joinLive } = useLiveListState();
await joinLive({ liveId });

커스터마이징

Web Live 인터페이스 사용자 지정

Web 앱에서 라이브 경험을 중심으로 영상, 시청자 상호작용, 탐색 기능을 구성하세요.

레이아웃

핵심 비디오 캔버스와 룸 상태를 중심으로 인터페이스를 구축하세요.

문서 읽기

시작하기

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

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

Web Live SDK

npm install tuikit-atomicx-vue3

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

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

Web 라이브 스트리밍 SDK 자주 묻는 질문

Web Live Streaming SDK에 비디오 뷰가 포함되어 있나요?

Web Live Streaming SDK에는 AtomicXCore 동영상 뷰 및 방 상태 API가 포함되어 있습니다. 앱에서 이러한 뷰를 중심으로 호스트 및 시청자 인터페이스를 구현하며, 바로 사용할 수 있는 화면이 필요하면 TUILiveKit를 선택하세요.

이 SDK는 UI Kit과 어떻게 연동되나요?

SDK API를 사용해 자체 인터페이스를 구축하세요. 바로 사용할 수 있는 화면과 컨트롤이 필요하면 UI Kit을 선택하세요.

Vue 라이브 스트리밍 UI Kit

이 통합에서는 어떤 Web 프레임워크를 사용하나요?

연결된 Core SDK 가이드에서는 tuikit-atomicx-vue3를 사용합니다. 즉시 사용할 수 있는 React 시청자 환경에는 React Live UI Kit을 사용하세요.

React 라이브 스트리밍 UI Kit

Web Live Streaming SDK 사용자를 인증하려면 어떻게 해야 하나요?

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

인증 가이드 보기

Web Live Streaming SDK는 무료로 사용할 수 있나요?

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

Live 요금 보기

브라우저 앱 프로젝트에 Web 라이브 스트리밍 SDK를 통합하려면 어떻게 해야 하나요?

브라우저 설정과 지원 환경 요구 사항을 따르세요. 지원할 실제 브라우저에서 사용하는 권한, 탐색, 정리를 테스트하세요.

플랫폼 가이드 읽기

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

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

플랫폼 가이드 읽기

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

지원 호스트·시청자 API로 자체 인터페이스를 만드세요. 커머스, 티켓이나 재생 권리 흐름은 앱이 관리합니다.

플랫폼 가이드 읽기

Web Live 통합 지원

통합 관련 질문

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

개발자 문서 보기

애플리케이션 상담

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

판매원에게 연락하기

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

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

무료로 시작하기 SDK 가이드 보기

Web 라이브 스트리밍 SDK

Web 라이브 스트리밍 SDK 문서 및 예제

API 레퍼런스

통합 가이드

예제 및 소스

Web 라이브 제품 데모

Web에서 라이브 이벤트 시청

Web 라이브 스트리밍 기능

라이브 시작

사람들을 하나로 연결

내 것으로 만들기

Web 라이브 스트리밍 API 살펴보기

Web 라이브 영상 뷰 추가

Web에서 라이브 스트리밍 시작

시청자를 현장 속으로

Web Live 인터페이스 사용자 지정

레이아웃

시청자 상호작용

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

앱 만들기

Web 라이브 스트리밍 SDK 추가

첫 번째 룸에 연결

Web 라이브 스트리밍 SDK 자주 묻는 질문

Web Live Streaming SDK에 비디오 뷰가 포함되어 있나요?

이 SDK는 UI Kit과 어떻게 연동되나요?

이 통합에서는 어떤 Web 프레임워크를 사용하나요?

Web Live Streaming SDK 사용자를 인증하려면 어떻게 해야 하나요?

Web Live Streaming SDK는 무료로 사용할 수 있나요?

브라우저 앱 프로젝트에 Web 라이브 스트리밍 SDK를 통합하려면 어떻게 해야 하나요?

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

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

Web Live 통합 지원

통합 관련 질문

애플리케이션 상담

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