TÍNH NĂNG VUE LIVE
Tính năng phát trực tiếp trên Vue
Bắt đầu phát trực tiếp
- Vai trò host và khán giả
- Quản lý vòng đời phòng
Kết nối mọi người
- Phát video trực tiếp
- Sự tham gia của khán giả
Biến nó thành của bạn
- Bố cục ứng dụng linh hoạt
- Các thành phần dành riêng cho từng nền tảng
Khám phá Vue Live Streaming Components
Kết nối chế độ xem người dẫn, chế độ xem khán giả và danh sách phòng phát trực tiếp với hệ thống điều hướng của ứng dụng.
Tạo nơi để nhà sáng tạo bắt đầu
Thêm màn hình chuẩn bị cho người chủ trì bằng Vue để nhà sáng tạo xem trước camera trước khi phát sóng. Kết nối màn hình với tài khoản người chủ trì đã xác thực.
<script setup>
import { StreamMixer, LiveScenePanel } from "tuikit-atomicx-vue3";
</script>
<template>
<LiveScenePanel />
<StreamMixer />
</template>Đưa trải nghiệm xem vào ứng dụng của bạn
Mở chế độ xem khán giả Vue với phòng trực tiếp đã chọn. Kết nối thao tác vào và rời phòng với hệ thống điều hướng của ứng dụng.
<script setup>
import { LiveCoreView, BarrageList, BarrageInput }
from "tuikit-atomicx-vue3";
</script>
<template>
<LiveCoreView />
<BarrageList />
<BarrageInput />
</template>TÙY CHỈNH
Tùy chỉnh Vue Live UI Kit của bạn
Sắp xếp video, hoạt động tương tác với khán giả và điều hướng xoay quanh trải nghiệm trực tiếp trong ứng dụng Vue.
BẮT ĐẦU
Thêm tính năng phát trực tiếp vào ứng dụng Vue
- 01
- 02
- 03
npm install tuikit-atomicx-vue3 \
@tencentcloud/uikit-base-component-vue3import { useLoginState } from 'tuikit-atomicx-vue3';
const { login } = useLoginState();
await login({ sdkAppId: SDKAppID, userId: userID, userSig });Câu hỏi thường gặp về UI Kit phát trực tiếp cho Vue
Tôi có thể xây dựng những gì với Vue Live UI Kit?
UI Kit phát trực tiếp cho Vue bao gồm giao diện dành cho người dẫn, khán giả và danh sách phòng. Kết nối các thành phần TUILiveKit này với tài khoản người dùng và hệ thống điều hướng Vue để tạo quy trình xem hoàn chỉnh.
UI Kit này kết hợp với SDK như thế nào?
Làm thế nào để kết nối người xem trực tiếp trên Vue với chương trình phát sóng?
Làm cách nào để xác thực người dùng Vue Live Streaming UI Kit?
Vue Live Streaming UI Kit có được sử dụng miễn phí không?
Làm thế nào để tích hợp UI Kit phát trực tiếp Vue với Vue?
Làm thế nào để kiểm thử UI Kit phát trực tiếp Vue trước khi phát hành ứng dụng?
Làm thế nào để tùy chỉnh giao diện UI Kit phát trực tiếp Vue?
Dùng useLiveListState từ tuikit-atomicx-vue3 để cấu hình bố cục người phát trước khi phát sóng. Ví dụ, updateLiveInfo({ layoutTemplate: 200 }) chọn bố cục ngang; mẫu 600 chọn lưới động dọc. Hướng phát phải được chọn trước khi bắt đầu và không thể chuyển trong phiên phát. Giữ phần xem trước và các nút điều khiển người phát phù hợp với mẫu đã chọn, thay vì chỉ đổi tỷ lệ khung hình CSS.