สร้างขึ้นเพื่อ WEB

SDK ถ่ายทอดสดสำหรับ Web

สร้างการออกอากาศผ่านเบราว์เซอร์ด้วย Web Live Streaming SDK for Vue 3 ของ Tencent RTC รวม API ห้องและมุมมองวิดีโอ AtomicXCore เข้ากับอินเทอร์เฟซสำหรับโฮสต์และผู้ชมของคุณเอง

เริ่มสร้าง สำรวจเดโม Live

แหล่งข้อมูลสำหรับนักพัฒนา

เอกสารและตัวอย่าง SDK ถ่ายทอดสดสำหรับ Web

เอกสารอ้างอิง API

สำรวจ API ของ SDK ถ่ายทอดสดสำหรับ Web

สำรวจ API การยืนยันตัวตนผู้ใช้

คู่มือการผสานรวม

ติดตั้ง SDK ถ่ายทอดสดสำหรับ Web และเชื่อมต่อผู้ใช้ของคุณ

การผสานรวม Web เริ่มต้นอย่างรวดเร็ว

ตัวอย่างและซอร์สโค้ด

ดูการทำงานจริงของผลิตภัณฑ์และสำรวจวิธีการนำไปใช้

สำรวจเดโม Live ดู ซอร์สโค้ด ของ Web

การสาธิตผลิตภัณฑ์สดบน Web

ให้ผู้ชมติดตามการสาธิตสินค้าของครีเอเตอร์และร่วมสนทนา แอปพลิเคชันของคุณจัดการแค็ตตาล็อกและประสบการณ์การซื้อ

สำรวจการช้อปปิ้งสด

การรับชมกิจกรรมสดบน Web

นำงานนำเสนอและผู้ชมเข้าสู่แอป Web ของคุณ เชื่อมต่อหน้าจอรับชมกับห้องเพื่อให้ผู้คนสามารถติดตามกิจกรรมสดได้

สำรวจการสตรีมกิจกรรม

ความสามารถของ WEB LIVE

ฟีเจอร์ไลฟ์สตรีมมิงบน Web

เริ่มไลฟ์

บทบาทโฮสต์และผู้ชม
การจัดการวงจรชีวิตของห้อง

เชื่อมโยงผู้คนเข้าด้วยกัน

การเล่นวิดีโอสด
การมีส่วนร่วมของผู้ชม

ทำให้เป็นของคุณเอง

เค้าโครงแอปพลิเคชันที่ยืดหยุ่น
องค์ประกอบเฉพาะแพลตฟอร์ม

สำรวจ API การสตรีมสดสำหรับ Web

เชื่อมต่อมุมมองวิดีโอและสถานะห้องของ 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 ของคุณ

เลย์เอาต์ของคุณ

สร้างอินเทอร์เฟซโดยมีพื้นที่วิดีโอหลักและสถานะห้องเป็นศูนย์กลาง

อ่านเอกสาร

เริ่มต้นใช้งาน

เพิ่มไลฟ์สตรีมลงในเว็บแอปของคุณ

01
สร้างแอปของคุณ
เปิดใช้งาน Live สำหรับแอปพลิเคชันและผู้ใช้ทดสอบ
เปิดคอนโซล Live
02
เพิ่ม SDK ถ่ายทอดสดสำหรับ Web
ทำตามคู่มือแพลตฟอร์มเพื่อเชื่อมต่อโปรเจกต์ของคุณ
ทำตามคู่มือการผสานรวม
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 });

คำถามที่พบบ่อยเกี่ยวกับ SDK ถ่ายทอดสดสำหรับ Web

Web Live Streaming SDK มีมุมมองวิดีโอหรือไม่

Web Live Streaming SDK มีมุมมองวิดีโอและ API สถานะห้องของ AtomicXCore แอปของคุณจะจัดเตรียมอินเทอร์เฟซโฮสต์และผู้ชมรอบมุมมองเหล่านั้น เลือก TUILiveKit หากต้องการหน้าจอที่พร้อมใช้งาน

SDK นี้ทำงานร่วมกับ UI Kit อย่างไร

ใช้ API ของ SDK เพื่อสร้างอินเทอร์เฟซของคุณเอง เลือก UI Kit เมื่อต้องการหน้าจอและส่วนควบคุมที่พร้อมใช้งาน

UI Kit ถ่ายทอดสดสำหรับ Vue

การผสานรวมนี้ใช้ Web framework ใด

คู่มือ Core SDK ที่ลิงก์ไว้ใช้ tuikit-atomicx-vue3 หากต้องการประสบการณ์ผู้ชม React แบบพร้อมใช้งาน โปรดใช้ React Live UI Kit

UI Kit ถ่ายทอดสดสำหรับ React

ฉันจะยืนยันตัวตนผู้ใช้ Web Live Streaming SDK ได้อย่างไร

สร้าง UserSig บนเซิร์ฟเวอร์ของคุณและส่งให้ไคลเอนต์หลังจากขั้นตอนการลงชื่อเข้าใช้ของคุณเองเสร็จสมบูรณ์ เก็บข้อมูลลับของแอปพลิเคชันไว้บนเซิร์ฟเวอร์เสมอ

อ่านคู่มือการยืนยันตัวตน

Web Live Streaming SDK ใช้งานฟรีหรือไม่

อินเทอร์เฟซและบริการ Live แบบโฮสต์มีบทบาทแตกต่างกัน เปิดใช้งานบริการสำหรับแอปพลิเคชันของคุณ แล้วตรวจสอบแพ็กเกจปัจจุบัน ความพร้อมใช้งานของฟีเจอร์ และค่าบริการตามการใช้งาน

ดูราคา Live

จะผสานรวม SDK ไลฟ์สตรีม Web กับ แอปบนเบราว์เซอร์ ได้อย่างไร?

ทำตามการตั้งค่าเบราว์เซอร์และข้อกำหนดสภาพแวดล้อมที่รองรับ ทดสอบสิทธิ์ที่ใช้ การนำทาง และการคืนทรัพยากรในเบราว์เซอร์จริงที่ต้องการรองรับ

อ่านคู่มือแพลตฟอร์ม

จะทดสอบ SDK ไลฟ์สตรีม Web ก่อนเผยแพร่แอปได้อย่างไร?

ทดสอบบทบาทผู้จัดและผู้ชม เหตุการณ์ส่งหรือเล่นที่รองรับ และเชื่อมใหม่

อ่านคู่มือแพลตฟอร์ม

จะปรับแต่งอินเทอร์เฟซของ SDK ไลฟ์สตรีม Web ได้อย่างไร?

ใช้ API ผู้จัดและผู้ชมที่รองรับกับอินเทอร์เฟซของคุณ แอปจัดการการค้า บัตร หรือสิทธิ์เล่น

อ่านคู่มือแพลตฟอร์ม

การสนับสนุนด้านการผสานรวมสำหรับ Web Live

คำถามเกี่ยวกับการผสานรวม

รับความช่วยเหลือในการตั้งค่า SDK ถ่ายทอดสดสำหรับ Web

ดูเอกสารสำหรับนักพัฒนา

พูดคุยเกี่ยวกับแอปพลิเคชันของคุณ

พูดคุยเกี่ยวกับผลิตภัณฑ์ ปริมาณการใช้งานที่คาดการณ์ และความต้องการด้านการผสานรวมของคุณ

ติดต่อฝ่ายขาย

เพิ่มการสตรีมสดลงในแอป Web ของคุณ

เชื่อมต่อครีเอเตอร์กับผู้ชมด้วย Web Live Streaming SDK และคู่มือสำหรับแต่ละแพลตฟอร์ม

เริ่มต้นใช้งานฟรี ดูคู่มือ SDK

SDK ถ่ายทอดสดสำหรับ Web

เอกสารและตัวอย่าง SDK ถ่ายทอดสดสำหรับ Web

เอกสารอ้างอิง API

คู่มือการผสานรวม

ตัวอย่างและซอร์สโค้ด

การสาธิตผลิตภัณฑ์สดบน Web

การรับชมกิจกรรมสดบน Web

ฟีเจอร์ไลฟ์สตรีมมิงบน Web

เริ่มไลฟ์

เชื่อมโยงผู้คนเข้าด้วยกัน

ทำให้เป็นของคุณเอง

สำรวจ API การสตรีมสดสำหรับ Web

เพิ่มมุมมองวิดีโอสดบน Web

เริ่มสตรีมสดบน Web

พาผู้ชมเข้าสู่ช่วงเวลานั้น

ปรับแต่งอินเทอร์เฟซ Web Live ของคุณ

เลย์เอาต์ของคุณ

การโต้ตอบของผู้ชม

เพิ่มไลฟ์สตรีมลงในเว็บแอปของคุณ

สร้างแอปของคุณ

เพิ่ม SDK ถ่ายทอดสดสำหรับ Web

เชื่อมต่อกับห้องแรกของคุณ

คำถามที่พบบ่อยเกี่ยวกับ SDK ถ่ายทอดสดสำหรับ Web

Web Live Streaming SDK มีมุมมองวิดีโอหรือไม่

SDK นี้ทำงานร่วมกับ UI Kit อย่างไร

การผสานรวมนี้ใช้ Web framework ใด

ฉันจะยืนยันตัวตนผู้ใช้ Web Live Streaming SDK ได้อย่างไร

Web Live Streaming SDK ใช้งานฟรีหรือไม่

จะผสานรวม SDK ไลฟ์สตรีม Web กับ แอปบนเบราว์เซอร์ ได้อย่างไร?

จะทดสอบ SDK ไลฟ์สตรีม Web ก่อนเผยแพร่แอปได้อย่างไร?

จะปรับแต่งอินเทอร์เฟซของ SDK ไลฟ์สตรีม Web ได้อย่างไร?

การสนับสนุนด้านการผสานรวมสำหรับ Web Live

คำถามเกี่ยวกับการผสานรวม

พูดคุยเกี่ยวกับแอปพลิเคชันของคุณ

เพิ่มการสตรีมสดลงในแอป Web ของคุณ