1. 문서의 목적 및 개요

• 웹기반의 메타버스 XRCLOUD는 다양한 외부 웹서비스나 페이지와 연결될 수 있는 기능을 제공합니다. Spoke웹 메탑버스 에디터에서 제공하는 컴포넌트는 link컴포넌트와 Image컴포넌트가 있으며, Image컴포넌트는 이미지를 버튼 처럼 사용할 수 있어 Image컴포넌트를 사용합니다.
• 하지만 Room은 Spoke로 만들어진 Scene(공간 프로젝트)을 인스턴스화한 공간으로 Image외 link컴포넌트에 들어간 link를 동적으로 변경하거나 혹은 해당 외부 웹사이트에 데이터를 전달할 수 없습니다.
• 이에 BELIVVR의 XRCLOUD에서는 InlineView컴포넌트를 만들어 Room에 접속할때 데이터를 전달하고 해당 데이터는 Room에 연결된 웹페이지에 전달 될 수 있도록 만들었습니다. 이를 통해 XRCLOUD를 이용한 개발자는 Room에 연결된 웹페이지에 데이터를 전달하여 유저별로 다른 목적 페이지로 라우팅 시키거나 혹은 유저별 맞춤 정보를 제공할 수 있습니다.

2. 인라인 뷰의 데이터 전달 및 사용 방법

1) 사전 준비

• Scene에 인라인뷰 컴포넌트를 배치합니다.
• 인라인뷰 컴포넌트는 거의 Image컴포넌트의 기능을 다 가지고 있으며, 차이점은 목적 페이지에 대한 타겟 프레임을 허브내에 별도로 만든 iframe으로 할 수 있도록 기능을 제공하며 두가지 iframe과 두가지 라우팅 유형이 제공됩니다.
  • Main : 3D공간이 표기되는 영역입니다.
  • Side View : PC에서 채팅과 접속자가 표기되는 영역으로 주로 모바일 형태의 콘텐츠에 적합합니다.
  • Self Window : 전체 페이지를 라우팅합니다.
  • New Window : 새탭을 띄워 해당 페이지를 라우팅합니다.

2) 호출

• 호출시에는 Room의 URL을 받아오는 getRoom API를 이용합니다.
  • https://api.xrcloud.app/api/rooms/{roomId}
• 넘겨줄 데이터는 쿼리파라미터 형식으로 linkPayload에 실어 보냅니다.
  • https://api.xrcloud.app/api/rooms/{roomId}?linkPayload={Data}
• 리턴한 URL중 private URL을 이용합니다. 해당 URL은 시간이 지나면 만료되는 linkPayload의 유출을 막기 위함입니다.

{
  "id": "f24ee5ba-8f1f-4f7a-86ed-738f95ea1f8b",
  "name": "example room name",
  "size": 10,
  "tags": [],
  "sceneId": "c322b49b-6e12-47d9-b293-b5ab3727459c",
  "createdAt": "2023-07-12T09:27:41.600Z",
  "updatedAt": "2023-07-12T09:27:41.600Z",
  "returnUrl": "<https://www.google.com/>",
  "roomUrl": {
    "public": {
      "host": "<https://room.xrcloud.app:4000/7UizZDL/example-room-name?public=35e75895-9db7-4eee-bae3-87e20ee156dc>",
      "guest": "<https://room.xrcloud.app:4000/7UizZDL/example-room-name?public=a0166051-1eee-44bb-922a-c988d517a0e1>"
    },
    "private": {
      "host": "<https://room.xrcloud.app:4000/7UizZDL/example-room-name?private=fdc306b9-5129-4d83-86d5-52836afeee7e>",
      "guest": "<https://room.xrcloud.app:4000/7UizZDL/example-room-name?private=72dde871-33d7-4aa3-a8a9-73b8b5f0458d>"
    }
  },
  "thumbnailUrl": "<https://api.xrcloud.app/files/852a6f47-3978-4201-a637-9699d7845266.jpg>"
}

3) 유저의 사용

• 앞서 받아온 private URL로 접속한 이용자는 InlineView을 클릭하면 해당 InlineView은 사전에 설정된 목적URL로 이동하며 linkePayload에 전달되었던 데이터를 hubsParam이라는 이름의 쿼리파라미터를 추가하여 전달합니다.
• InlineViewName으로는 유저가 클릭한 인라인뷰의 이름이 넘어와서 이 데이터를 확인하여 어떤 컴포넌트를 클릭하여 유저가 해당 페이지에 접근했는지를 알려줍니다.

3. 활용 방법

1) 사용자별 맞춤 정보 제공