Run Sample Code

본 문서에서는 데스크톱 버전 고화질 비디오 라이브 방송 애플리케이션을 빠르게 실행하는 방법을 소개합니다. 이 문서를 따라 하시면 10분 내에 라이브 방송을 시작할 수 있습니다. 데스크톱 버전 고화질 비디오 라이브 방송다양한 멀티미디어 자원을 하나의 비디오 스트림으로 결합하는 것을 지원하며, 비디오 소스의 편집, 합성, 사용자 정의 레이아웃을 지원합니다.


환경 준비

운영 체제: Windows 10+.
장치 요구사항: 카메라, 마이크, 스피커.

단계 1: 소스 코드 다운로드

Github에서 프로젝트 소스 코드를 다운로드하거나, 다음 명령어를 실행하여 다운로드합니다:
git clone %!s(<nil>)

cd ultra-live-electron

단계 2: 구성

1. TUILiveKit 서비스 활성화하여 SDKAppID와 SDKSecretKey를 획득합니다.

2. src/debug/basic-info-config.js 파일을 열고, 서비스 활성화 시 획득한 SDKAppIDSDKSecretKey를 해당 부분에 입력합니다.


단계 3: 실행

코드 디렉토리에서 아래 명령어를 실행하여 개발 모드로 애플리케이션을 시작합니다:
npm install

npm run start

첫 번째 방송 시작

1. 세로 화면으로 전환
세로 화면으로 방송을 시작하면, 모바일에서 시청하는 효과가 더 좋습니다.

2. 카메라 추가
방송을 시작하기 전에 화면 소스를 먼저 추가해야 합니다. 현재 지원되는 항목은 카메라, 화면 공유, 창 공유 및 이미지입니다. 아래 그림은 카메라를 추가한 후의 효과입니다.

3. Logo 이미지 추가
방송 중에 브랜드 Logo를 추가해야 하는 경우, Logo 이미지를 추가할 수 있습니다. 아래 그림은 투명한 배경의 Logo 이미지를 추가한 후의 효과입니다. 새로 추가된 이미지 주위에 노란색 테두리가 표시되며, 이는 현재 선택된 상태임을 나타냅니다. 선택된 상태의 멀티미디어 소스는 마우스를 사용하여 위치를 이동하거나 크기를 조절할 수 있으며, 오른쪽 버튼 메뉴를 사용하여 멀티미디어 소스를 회전시키거나 표시 계층을 변경하는 등의 작업을 할 수 있습니다.

4. 방송 시작
방송 시작을 클릭하면 라이브 스트리밍 푸시가 시작됩니다. 성공적으로 방송이 시작되면 방송 시작 버튼이 방송 종료로 변경되며, 클릭하여 라이브 스트리밍 푸시를 종료할 수 있습니다.

5. 방송 시청
데스크톱에서는 앵커의 방송만 지원하며, 시청하려면 모바일 App을 이용해야 합니다. 모바일 App의 라이브 방송 목록에서 해당 라이브룸을 찾아 입장합니다.
모바일 App 사용 방법은 iOSAndroid의 실행 관련 문서를 참조하세요.
시청자: 라이브 방송 목록 탐색
시청자: 라이브룸 입장