본문으로 건너뛰기

배경 이미지 설정

디지털 휴먼 환경의 배경 이미지를 변경하거나 초기화합니다.

메서드​

sendPlaceBackgroundChange(id)​

배경 이미지를 변경합니다.

public sendPlaceBackgroundChange(id: string): void

매개변수​

  • id (string): 배경 이미지 ID

sendBackgroundPlaceReset()​

배경 이미지를 기본값으로 초기화합니다.

public sendBackgroundPlaceReset(): void

사용법​

JavaScript/TypeScript​

import { KleverOneClient } from "@klever-one/web-sdk/core";

const client = new KleverOneClient({
  apiKey: "your-api-key",
  container: document.getElementById("streaming-container"),
});

await client.connect();

// 배경 이미지 변경
client.sendPlaceBackgroundChange("WORLD_01");

// 배경 이미지 초기화
client.sendBackgroundPlaceReset();

React Hook​

"use client";

import { useRef, useMemo } from "react";
import { useKleverOneClient } from "@klever-one/web-sdk/react";

function BackgroundPlaceControl() {
  const containerRef = useRef<HTMLDivElement>(null);

  const tempContainer = useMemo(() => {
    if (typeof document !== "undefined") {
      return document.createElement("div");
    }
    return {} as HTMLDivElement;
  }, []);

  const client = useKleverOneClient({
    apiKey: "your-api-key",
    container: containerRef.current || tempContainer,
  });

  const handleChangeBackground = (backgroundId: string) => {
    if (client.client) {
      client.sendPlaceBackgroundChange(backgroundId);
    }
  };

  const handleResetBackground = () => {
    if (client.client) {
      client.sendBackgroundPlaceReset();
    }
  };

  return (
    <div>
      <div
        ref={containerRef}
        className="h-[400px] w-[800px] bg-black rounded-lg"
      ></div>

      <div className="controls">
        <button
          onClick={() => handleChangeBackground("WORLD_01")}
          disabled={client.state.connection !== "connected"}
        >
          배경 1
        </button>
        <button
          onClick={() => handleChangeBackground("WORLD_04")}
          disabled={client.state.connection !== "connected"}
        >
          배경 2
        </button>
        <button
          onClick={handleResetBackground}
          disabled={client.state.connection !== "connected"}
        >
          기본 배경
        </button>
      </div>
    </div>
  );
}

사용 가능한 배경 ID​

장소명ID
스튜디오WORLD_01
경복궁WORLD_04
남산타워WORLD_09
달WORLD_13
동대문역사문화공원WORLD_14
메디나 아자하라WORLD_16
무대CWORLD_19
술탄 카부스 대모스크WORLD_21
아야 소피아WORLD_22
카툰AWORLD_24
큐티WORLD_28
하트WORLD_30
해변WORLD_31
향원정WORLD_32
헬스장WORLD_33

주의사항​

  • 배경 이미지 변경은 연결 상태에서만 가능합니다.

관련 기능​