live-cat-library

This is a component library for 3DCAT

live-cat Launcher

Features：

• LauncherUI
• LauncherPrivateUI
• Loading Component
• ImeSwitchComponent
• VirtualKeyboardComponent
• FakeImeInputComponent
• 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-library";

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-library";

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