live-cat-demo-1

This is a component library for 3DCAT

live-cat Launcher

Features：

• [x] LauncherUI
• [x] LauncherPrivateUI
• [x] Loading Component
• [x] ImeSwitchComponent
• [x] FakeImeInputComponent
• [x] KeepActiveHelper

Technologies

• live-cat v1.1.8
• Svelte v3.57.0
• Rollup v2.78.0
• Typescript v4.9.5

quick start

instantiation parameter

interface BaseOptionsType {
  address: string // address
  appId?: string // appId
  appKey?: string // appKey
  appSecret?: string // appSecret
  startType?: StartType
  castScreenMaxQty?: number
  castScreenNickname?: string
  castScreenPwd?: string
  isCastScreenMaster?: boolean
  serverIp?: string //for coturn server
  joinType?: ScreenJoinType //only screen
  optionalParam?: string // command line parameters
  exeParameter?: string // command line parameters for privatization
  enableVirtualCamera?: boolean // setup camera enable
}

Options detail to see live-cat

type UIOptions = Options & loadingOptions & ExtendUIOptions

interface loadingOptions {
  loadingImage: string | HTMLImageElement
  loadingBgImage: { portrait: string; landscape: string }
  loadingBarImage: string | HTMLImageElement
  showDefaultLoading: boolean
  showFakePercent: boolean

  phaseChanged: boolean
  percentChanged: boolean
}
interface ExtendUIOptions {
  onChange: (cb: OnChange) => void
  onQueue: (rank: number) => void
  onLoadingError: (err: LoadingError) => void
  onTaskId: (taskId: number) => void
  onShowUserList: (showCastScreenUsers: boolean) => void
  onRunningOptions: (opt: OnRunningOptions) => void
}

interface OnChange {
  phase: Phase
  fakePercent: number
  deltaTime: number
}

type Phase =
  | 'initial'
  | 'signaling-connected'
  | 'node-ready'
  | 'end-candidate'
  | 'peer-connection-connected'
  | 'data-channel-open'
  | 'streaming-ready'
  | 'loaded-metadata'
  | 'streaming-playing'

interface LoadingError {
  code: number | string
  type: 'app' | 'task' | 'connection' | 'reConnection'
  reason: string | ErrorState
}

type ErrorState = 'disconnect' | 'afk' | 'kick' | 'hangup'

interface OnRunningOptions {
  token: string
  coturns: RTCIceServer[]
  signaling: string
}
enum StartType {
  NormalMode = 1,
  ScreenMode = 3,
}
enum ScreenJoinType {
  Secret = 1,
  Link,
}

//when terminal is ios and wechat
onPhaseChange: (phase: Phase, deltaTime: number) => {
  if (phase === 'data-channel-open') {
    /* NOTE: Autoplay video need user activation gesture
     * @see https://html.spec.whatwg.org/multipage/interaction.html#user-activation-processing-model
     */
    someTriggerElement.addEventListener('click', () => launcher?.launcherBase?.resumeVideoStream())
  }
}

//Microphone

//Start capture audio to node
onPhaseChange: (phase: Phase, deltaTime: number) => {
  if (phase === 'data-channel-open') {
    launcher?.launcherBase?.openMicrophone()
  }
}
//Stop
launcher?.launcherBase?.closeMicrophone()

//Camera
const baseOptionsType = {
  address: 'xxxx',
  appKey: 'xxxx',
  startType: 1,
  enableVirtualCamera: true,
}
let launcher = new LauncherUI(baseOptionsType, container)

//Start capture video to node
onPhaseChange: (phase: Phase, deltaTime: number) => {
  if (phase === 'data-channel-open') {
    launcher?.launcherBase?.openCamera()
  }
}
//Stop
launcher?.launcherBase?.closeCamera()

// Public Cloud
import { LauncherUI } from 'live-cat-demo-1'

const container = document.querySelector('body')
document.querySelector('body').style.width = '100%'
document.querySelector('body').style.height = '100%'
const baseOptionsType = {
  address: 'https://app.3dcat.live',
  appKey: 'xxxx',
  startType: 1,
}
const uiOptions = {
  loadingImage: '',
}
let launcher = new LauncherUI(baseOptionsType, container, uiOptions)

window.addEventListener('DOMContentLoaded', () => {
  if (
    navigator.userAgent.includes('miniProgram') ||
    navigator.userAgent.includes('MicroMessenger')
  ) {
    //wechat
    document.addEventListener('WeixinJSBridgeReady', bootstrap, false)
  } else {
    bootstrap()
  }
})

// Private Cloud
import { LauncherPrivateUI } from 'live-cat-demo-1'

const container = document.querySelector('body')
document.querySelector('body').style.width = '100%'
document.querySelector('body').style.height = '100%'
const baseOptionsType = {
  address: 'xxxxx',
  appKey: 'xxxx',
  startType: 1,
}
const uiOptions = {
  loadingImage: '',
}
let launcher = new LauncherPrivateUI(baseOptionsType, container, uiOptions)

window.addEventListener('DOMContentLoaded', () => {
  if (
    navigator.userAgent.includes('miniProgram') ||
    navigator.userAgent.includes('MicroMessenger')
  ) {
    //wechat
    document.addEventListener('WeixinJSBridgeReady', bootstrap, false)
  } else {
    bootstrap()
  }
})

License

MIT