SuperViz for Matterport SDK

1
import { RoomProvider, useRoom } from '@superviz/react';
2
import { Presence3D } from "@superviz/matterport-plugin";
3
import { VideoConference, WhoIsOnline } from "@superviz/sdk";
4
import { useCallback, useEffect, useRef, useState } from "react";
5
import { v4 as generateId } from "uuid";
6

7
// Replace with your actual keys
8
const MATTERPORT_KEY = "YOUR_MATTERPORT_KEY";
9
const SUPERVIZ_KEY = "sv_YOUR_SUPERVIZ_KEY";
10
const ROOM_ID = "superviz-demo-matterport";
11
const MODEL_ID = "Zh14WDtkjdC"; // Replace with your Matterport model ID
12

13
// Type definition for Matterport SDK
14
type WindowWithMP_SDK = Window & {
15
  MP_SDK: {
16
    connect: (window: Window, key: string) => Promise<any>;
17
  };
18
};
19

20
function MatterportViewer() {
21
  const containerId = "matterport-container";
22
  const mpSdk = useRef<any | null>(null);
23
  const [sdkReady, setSdkReady] = useState(false);
24
  const participantId = generateId();
25

26
  // Use the React SDK's useRoom hook
27
  const { room, joinRoom, leaveRoom, addComponent, removeComponent } = useRoom();
28

29
  // Initialize Matterport SDK
30
  const initializeMatterport = useCallback(async () => {
31
    const showcase = document.getElementById(containerId) as HTMLIFrameElement;
32
    if (!showcase) return;
33

34
    showcase.onload = async () => {
35
      try {
36
        const showcaseWindow = showcase.contentWindow as WindowWithMP_SDK;
37
        mpSdk.current = await showcaseWindow.MP_SDK.connect(
38
          showcaseWindow,
39
          MATTERPORT_KEY
40
        );
41
        setSdkReady(true);
42
      } catch (error) {
43
        console.error('Failed to initialize Matterport SDK:', error);
44
      }
45
    };
46
  }, []);
47

48
  // Initialize SuperViz room and components when SDK is ready
49
  useEffect(() => {
50
    if (!sdkReady || !mpSdk.current) return;
51
    
52
    const handleJoin = async () => {
53
      await joinRoom({
54
        participant: {
55
          id: participantId,
56
          name: "Participant",
57
          avatar: {
58
            imageUrl: 'https://production.cdn.superviz.com/static/default-avatars/1.png',
59
          }
60
        },
61
        group: {
62
          name: 'superviz-demo',
63
          id: 'superviz-demo',
64
        },
65
        roomId: ROOM_ID,
66
      });
67

68
      // Create and add the Matterport presence component
69
      const matterportPresence = new Presence3D(mpSdk.current, {
70
        isAvatarsEnabled: true,
71
        isLaserEnabled: true,
72
        isNameEnabled: true,
73
      });
74

75
      // Add additional components
76
      const whoIsOnline = new WhoIsOnline({ position: 'bottom-right' });
77
      const videoConference = new VideoConference({
78
        enableFollow: true,
79
        enableGather: true,
80
        enableGoTo: true,
81
        participantType: 'host',
82
        defaultAvatars: true,
83
      });
84

85
      addComponent(matterportPresence);
86
      addComponent(whoIsOnline);
87
      addComponent(videoConference);
88
    };
89

90
    handleJoin();
91

92
    return () => {
93
      leaveRoom();
94
      if (mpSdk.current) {
95
        mpSdk.current.disconnect();
96
      }
97
    };
98
  }, [sdkReady, joinRoom, leaveRoom, addComponent]);
99

100
  useEffect(() => {
101
    initializeMatterport();
102
  }, [initializeMatterport]);
103

104
  return (
105
    <div className="w-full h-full">
106
      <iframe
107
        className="w-full h-full border-0"
108
        id={containerId}
109
        src={`/mp-bundle/showcase.html?&brand=0&mls=2&mt=0&search=0&kb=0&play=1&qs=1&applicationKey=${MATTERPORT_KEY}&m=${MODEL_ID}`}
110
        allowFullScreen
111
      />
112
    </div>
113
  );
114
}
115

116
export function MatterportWithSuperViz() {
117
  return (
118
    <RoomProvider developerToken={SUPERVIZ_KEY}>
119
      <MatterportViewer />
120
    </RoomProvider>
121
  );
122
}

1
import { Presence3D } from "@superviz/matterport-plugin";
2
import { VideoConference, WhoIsOnline } from "@superviz/sdk";
3
import { createRoom } from '@superviz/room';
4
import { ref, onMounted, onBeforeUnmount } from 'vue';
5
import { v4 as generateId } from "uuid";
6

7
// Replace with your actual keys
8
const MATTERPORT_KEY = "YOUR_MATTERPORT_KEY";
9
const SUPERVIZ_KEY = "sv_YOUR_SUPERVIZ_KEY";
10
const ROOM_ID = "superviz-demo-matterport";
11
const MODEL_ID = "Zh14WDtkjdC"; // Replace with your Matterport model ID
12

13
export default {
14
  setup() {
15
    const containerId = "matterport-container";
16
    const room = ref(null);
17
    const mpSdk = ref(null);
18
    const sdkReady = ref(false);
19

20
    async function initializeSuperViz() {
21
      const participantId = generateId();
22
      
23
      room.value = await createRoom({
24
        developerToken: SUPERVIZ_KEY,
25
        roomId: ROOM_ID,
26
        participant: {
27
          name: "Participant",
28
          id: participantId,
29
          avatar: {
30
            imageUrl: 'https://production.cdn.superviz.com/static/default-avatars/1.png',
31
          }
32
        },
33
        group: {
34
          name: "superviz-demo",
35
          id: "superviz-demo",
36
        },
37
      });
38

39
      // Create and add the Matterport presence component
40
      const matterportPresence = new Presence3D(mpSdk.value, {
41
        isAvatarsEnabled: true,
42
        isLaserEnabled: true,
43
        isNameEnabled: true,
44
      });
45

46
      // Add additional components
47
      const whoIsOnline = new WhoIsOnline({ position: 'bottom-right' });
48
      const videoConference = new VideoConference({
49
        enableFollow: true,
50
        enableGather: true,
51
        enableGoTo: true,
52
        participantType: 'host',
53
        defaultAvatars: true,
54
      });
55

56
      room.value.addComponent(matterportPresence);
57
      room.value.addComponent(whoIsOnline);
58
      room.value.addComponent(videoConference);
59
    }
60

61
    async function initializeMatterport() {
62
      const showcase = document.getElementById(containerId);
63
      if (!showcase) return;
64

65
      showcase.onload = async () => {
66
        try {
67
          const showcaseWindow = showcase.contentWindow;
68
          mpSdk.value = await showcaseWindow.MP_SDK.connect(
69
            showcaseWindow,
70
            MATTERPORT_KEY
71
          );
72
          sdkReady.value = true;
73
          await initializeSuperViz();
74
        } catch (error) {
75
          console.error('Failed to initialize Matterport SDK:', error);
76
        }
77
      };
78
    }
79

80
    onMounted(() => {
81
      initializeMatterport();
82
    });
83

84
    onBeforeUnmount(() => {
85
      if (room.value) {
86
        room.value.leave();
87
      }
88
      if (mpSdk.value) {
89
        mpSdk.value.disconnect();
90
      }
91
    });
92

93
    return {
94
      containerId,
95
      MODEL_ID,
96
      MATTERPORT_KEY
97
    };
98
  },
99
  template: `
100
    <div class="w-full h-full">
101
      <iframe
102
        class="w-full h-full border-0"
103
        :id="containerId"
104
        :src="`/mp-bundle/showcase.html?&brand=0&mls=2&mt=0&search=0&kb=0&play=1&qs=1&applicationKey=${MATTERPORT_KEY}&m=${MODEL_ID}`"
105
        allowFullScreen
106
      />
107
    </div>
108
  `
109
};

1
import { Presence3D } from "@superviz/matterport-plugin";
2
import { VideoConference, WhoIsOnline } from "@superviz/sdk";
3
import { createRoom } from '@superviz/room';
4
import { v4 as generateId } from "uuid";
5

6
// Replace with your actual keys
7
const MATTERPORT_KEY = "YOUR_MATTERPORT_KEY";
8
const SUPERVIZ_KEY = "sv_YOUR_SUPERVIZ_KEY";
9
const ROOM_ID = "superviz-demo-matterport";
10
const MODEL_ID = "Zh14WDtkjdC"; // Replace with your Matterport model ID
11
const CONTAINER_ID = "matterport-container";
12

13
let room;
14
let mpSdk;
15

16
async function initializeSuperViz() {
17
  const participantId = generateId();
18
  
19
  room = await createRoom({
20
    developerToken: SUPERVIZ_KEY,
21
    roomId: ROOM_ID,
22
    participant: {
23
      name: "Participant",
24
      id: participantId,
25
      avatar: {
26
        imageUrl: 'https://production.cdn.superviz.com/static/default-avatars/1.png',
27
      }
28
    },
29
    group: {
30
      name: "superviz-demo",
31
      id: "superviz-demo",
32
    },
33
  });
34

35
  // Create and add the Matterport presence component
36
  const matterportPresence = new Presence3D(mpSdk, {
37
    isAvatarsEnabled: true,
38
    isLaserEnabled: true,
39
    isNameEnabled: true,
40
  });
41

42
  // Add additional components
43
  const whoIsOnline = new WhoIsOnline({ position: 'bottom-right' });
44
  const videoConference = new VideoConference({
45
    enableFollow: true,
46
    enableGather: true,
47
    enableGoTo: true,
48
    participantType: 'host',
49
    defaultAvatars: true,
50
  });
51

52
  room.addComponent(matterportPresence);
53
  room.addComponent(whoIsOnline);
54
  room.addComponent(videoConference);
55
}
56

57
function initializeMatterport() {
58
  // Create the iframe element
59
  const iframe = document.createElement('iframe');
60
  iframe.id = CONTAINER_ID;
61
  iframe.className = "w-full h-full border-0";
62
  iframe.src = `/mp-bundle/showcase.html?&brand=0&mls=2&mt=0&search=0&kb=0&play=1&qs=1&applicationKey=${MATTERPORT_KEY}&m=${MODEL_ID}`;
63
  iframe.allowFullscreen = true;
64
  
65
  // Append to container
66
  const container = document.getElementById('app');
67
  container.appendChild(iframe);
68
  
69
  // Initialize SDK when iframe loads
70
  iframe.onload = async () => {
71
    try {
72
      const showcaseWindow = iframe.contentWindow;
73
      mpSdk = await showcaseWindow.MP_SDK.connect(
74
        showcaseWindow,
75
        MATTERPORT_KEY
76
      );
77
      await initializeSuperViz();
78
    } catch (error) {
79
      console.error('Failed to initialize Matterport SDK:', error);
80
    }
81
  };
82
}
83

84
// Clean up function
85
function cleanup() {
86
  if (room) {
87
    room.leave();
88
  }
89
  if (mpSdk) {
90
    mpSdk.disconnect();
91
  }
92
}
93

94
// Initialize when the DOM is loaded
95
document.addEventListener('DOMContentLoaded', initializeMatterport);
96

97
// Clean up when window unloads
98
window.addEventListener('beforeunload', cleanup);