文档反馈官招募中，报名立赚积分兑换代金券！> HOT
文档中心>实时音视频>直播与语聊 SDK>无 UI 集成>搭建视频直播>主播连线和 PK>主播连线和 PK（Web）

主播连线和 PK（Web）

最近更新时间：2025-11-27 15:16:31

我的收藏

本页目录：

AtomicXCore 提供了 CoHostState 核心模块，用于处理跨房连线。本文档将指导您如何组合使用该工具，来完成直播场景下连线的完整流程。

核心场景

一次完整的“主播连线”通常包含两个核心阶段，其整体流程如下：


实现步骤

步骤1：组件集成

请参考 开始直播 集成 AtomicXCore，并完成 LiveCoreView 的接入。
注意：
下列步骤需要参考 开始直播 中先创建房间或加入房间，随后执行下列步骤中的方法。

步骤2：实现跨房连线

此步骤的目标是让两个主播的画面出现在同一个视图中，我们将使用 CoHostState 来完成。

邀请方（主播 A）实现

1. 发起连线邀请
当主播A在界面上选择目标主播 B 并发起连线时，调用 requestHostConnection 方法。
import { useCoHostState, CoHostLayoutTemplate } from "tuikit-atomicx-vue3";

// 获取 CoHostState 实例
const { requestHostConnection } = useCoHostState();

// 用户点击“连线”按钮，并选择了主播 B (targetLiveId)
const inviteHostB = async (targetLiveId: string) => {
  try {
    await requestHostConnection({
      liveId: targetLiveId, // 目标主播 B 的房间 ID
      layoutTemplate: CoHostLayoutTemplate.Grid, // 选择一个布局模版
      timeout: 30, // 邀请超时时间(秒)
      extensionInfo: '', // 可选扩展信息
    });
    console.log("连线邀请已发送，等待对方处理...");
  } catch (error) {
    console.error("邀请发送失败", error);
    // 可以在这里进行 Toast 提示
  }
};
2. 监听邀请结果
通过 addCoHostListener订阅对应的事件，您可以接收到主播 B 的处理结果。

import { useCoHostState, CoHostEvent } from "tuikit-atomicx-vue3";
import { onMounted, onUnmounted } from 'vue';

const { subscribeEvent, unsubscribeEvent } = useCoHostState();

const onAccepted = (eventInfo: any) => {
    console.log(`主播 ${eventInfo.invitee.userName} 同意了您的连线邀请`);
};

const onRejected = (eventInfo: any) => {
    console.log(`主播 ${eventInfo.invitee.userName} 拒绝了您的连线邀请`);
};

const onTimeout = (eventInfo: any) => {
    console.log('邀请超时，对方未回应');
};

onMounted(() => {
    subscribeEvent(CoHostEvent.onCoHostRequestAccepted, onAccepted);
    subscribeEvent(CoHostEvent.onCoHostRequestRejected, onRejected);
    subscribeEvent(CoHostEvent.onCoHostRequestTimeout, onTimeout);
});

onUnmounted(() => {
    unsubscribeEvent(CoHostEvent.onCoHostRequestAccepted, onAccepted);
    unsubscribeEvent(CoHostEvent.onCoHostRequestRejected, onRejected);
    unsubscribeEvent(CoHostEvent.onCoHostRequestTimeout, onTimeout);
});

受邀方（主播 B）实现

1. 接收连线邀请
通过 subscribeEvent 订阅 onCoHostRequestReceived 事件，主播 B 可以监听到来自主播 A 的邀请。
import { useCoHostState, CoHostEvent } from "tuikit-atomicx-vue3";
import { onMounted, onUnmounted } from 'vue';

const { subscribeEvent, unsubscribeEvent } = useCoHostState();

const onRequestReceived = (eventInfo: any) => {
    const { inviter } = eventInfo;
    console.log(`收到主播 ${inviter.userName} 的连线邀请`);
    // 可以在这里弹出 Dialog 询问用户是否接受
};

onMounted(() => {
    subscribeEvent(CoHostEvent.onCoHostRequestReceived, onRequestReceived);
});

onUnmounted(() => {
    unsubscribeEvent(CoHostEvent.onCoHostRequestReceived, onRequestReceived);
});
2. 响应连线邀请
当主播 B 在弹出的对话框中做出选择后，调用相应的方法。
import { useCoHostState } from "tuikit-atomicx-vue3";

// 获取 CoHostState 实例
const { acceptHostConnection, rejectHostConnection, applicant } = useCoHostState();

// 接受邀请
const acceptInvitation = async () => {
    if (applicant.value) {
        try {
            // 传入发起方的 liveId (roomId)
            await acceptHostConnection({ liveId: applicant.value.liveId });
            console.log('已接受连线');
        } catch (error) {
            console.error('接受连线失败', error);
        }
    }
 };

// 拒绝邀请
const rejectInvitation = async () => {
    if (applicant.value) {
        try {
            await rejectHostConnection({ liveId: applicant.value.liveId });
            console.log('已拒绝连线');
        } catch (error) {
            console.error('拒绝连线失败', error);
        }
    }
 };

运行效果

当您集成以上功能实现后，请分别使用主播 A 和主播 B 进行对应操作，运行效果如下。


API 文档

关于 CoHostState 及其相关类的所有公开接口、属性和方法的详细信息，请您参阅 AtomicXCore 框架的官方 API 文档。本指南使用到的相关 Store 如下：
State
功能描述
API 文档
DeviceState
音视频设备控制：麦克风（开关 / 音量）、摄像头（开关 / 切换 / 画质）、屏幕共享，设备状态实时监听。
API 文档
CoHostState
主播跨房连线：支持多布局模板（动态网格等），发起 / 接受 / 拒绝连线，连麦主播互动管理。
API 文档

常见问题

为什么发起了连线邀请，对方却没收到？

请检查 requestHostConnection 中传入的 liveId 是否为目标主播正确的房间 ID。
中国站
目录