check-in

1. Introduction

The check-in component is used for the check-in feature in live streaming rooms. It supports mobile, PC, and portrait modes. The component includes functions such as check-in countdown, check-in status display, and check-in record viewing, and supports forced check-in mode.

The component provides three different entry components:

• MobileCheckIn - Mobile check-in component
• PcCheckIn - PC check-in component
• PortraitCheckIn - Portrait check-in component

2. Import

2.1 UMD Method

Among them, mobile-check-in.umd.js is the mobile check-in component, pc-check-in.umd.js is the PC check-in component, and portrait-check-in.umd.js is the portrait check-in component.

<script src="https://websdk.videocc.net/iar-check-in-ui/rc-20250612/mobile-check-in.umd.js"></script>

<script>
const { MobileCheckIn, PcCheckIn, PortraitCheckIn } = window.PolyvIarCheckInUi;
</script>

2.2 NPM Method

// 安装依赖
pnpm add @polyv/iar-check-in-ui

// 引入组件
import { MobileCheckIn, PcCheckIn, PortraitCheckIn } from '@polyv/iar-check-in-ui';

3. Code Example

<template>
  <div>
    <!-- 移动端签到组件 -->
    <MobileCheckIn
      ref="checkInRef"
      :check-in-target="checkInSDK"
      enable-sound-effects
      check-in-record-enabled
      @show-entrance="onShowEntrance"
      @to-show="onToShow"
      @to-hide="onToHide"
      @check-in-status="onCheckInStatus"
    />
  </div>
</template>

<script setup>
import { MobileCheckIn } from '@polyv/iar-check-in-ui';
import { CheckIn } from '@polyv/iar-check-in-sdk';

// 初始化签到 SDK
const checkInSDK = new CheckIn(iarCore);

// 事件处理
const onShowEntrance = (show) => {
  console.log('显示入口:', show);
};

const onToShow = () => {
  console.log('显示签到弹窗');
};

const onToHide = () => {
  console.log('隐藏签到弹窗');
};

const onCheckInStatus = (status) => {
  console.log('签到状态:', status);
};
</script>

4. API

4.1 Props

4.2 Events

4.3 Methods

Component methods can be called via ref: