Skip to main content

What's new with version v5.0.0

· 7 min read

We are rolling out our most significant release to date! In this release, we expand its capabilities beyond 3D into the 2D space, by updating our architecture and introducing new products.

What`s new

Please check below what’s news and give us feedback!

What’s new with the SDK?​

In Version 5, we introduced a new architecture where developers can initialize components independently, reducing the emphasis on meetings as the sole collaboration focus. This offers more flexibility and enables us for potential product additions down the line.

When initializing a new SuperVizSDK instance, we now refer to it as the "room." This term symbolizes the space where components are added, and participants gather for collaboration.

To enable that we've decoupled the SDK from the Video Conference, as you can see in the code below on how to initialize both:

import SuperVizRoom from '@superviz/sdk';
import { VideoConference } from "@superviz/sdk/lib/components";

// Create an instance of our SDK
const sdk = await SuperVizRoom(DEVELOPER_KEY, {
  roomId: "ROOM_ID",
  group: {
    id: "GROUP_ID",
    name: "GROUP_NAME",
  },
  participant: {
    id: "USER_ID",
    name: "USER_NAME"
  },
});

// Create a Video component instance with the configuration you want
const video = new VideoConference({...});

room.addComponent(video);

And today we are launching components like Real-time Mouse Pointers, Real-time Data Engine and Contextual Comments, all powered by our SDK instance.

Please refer to our migration guide to learn about the configuration options that were moved from the SuperViz SDK constructor to the Video Conference.

Updates for the Video Conference​

We continue to view video conferencing as one of the most valuable components of remote collaboration. Therefore, it remains a central offering in our toolkit. We've introduced minor updates to the video component, and we're currently working on expanding our video product.

Illustration of the video conference update

  • Collaboration Mode: A set of options to create a custom experience allowing the participants to focus on their collaboration or the conversation between them.

Illustration of the collaboration mode

  • Initial View Configuration: We have a new flag when initializing the component, the collaborationMode.initialView, where you can set the layout mode for the cameras, if you want then to be in a list format or a grid occupying the full screen.

Introducing Presence​

We're excited to introduce our new product: Presence.

Illustration of Presence

Presence is designed to enhance genuine connections among users with its collaboration features. Our aim has always been to replicate the 'sense of presence' in digital collaboration, and with Presence, we're bringing that vision to life. Utilizing our real-time collaboration components, users can now track their colleagues' activities with real-time mouse pointers, engage in real-time co-editing, and experience shared presence within a document, a page or 3D environment.

Real-time Mouse Pointers​

With Real-time Mouse Pointers you can enable tracking of participants' cursor movements, allowing seamless collaboration within the same room.

Illustration to real-time mouse pointers with three cursors showing the participant name

After creating an HTML canvas, you can start the MousePointers component with its ID and add it to our SDK, that’s it.

<script>
	// Initializing the Realtime Mouse Pointers with the cavans ID
	const mousePointers = new MousePointers("my-id");

	// Adding the Mouse Pointers to the sdk
	room.addComponent(mousePointers);
</script>

<-- The canvas element with the ID used on the MousePointers constructor -->
<canvas id="my-id" width="200" height="100"></canvas>

Real-time Data Engine​

Using the Real-time Data Engine allows you to synchronize states between participants in a room. This enables various functionalities such as real-time data sharing, and event-driven communication for seamless collaborative experiences.

Illustration of Real-time Data Engine

After initializing Realtime and adding to the SDK, you can publish and subscribe to events that will be seen across every participant in the room. Use the publish() to dispatch an event and the subscribe() to receive it.

import { Realtime } from '@superviz/sdk/lib/components';

// Initializing the Realtime Data Engine
const realtime = new Realtime();

// Adding the Realtime to the sdk
room.addComponent(realtime);

// Publishing a custom event NEW_VERSION_AVAILABLE with value "v5"
realTime.publish("NEW_VERSION_AVAILABLE", "v5");

// Recieving the custo event and using a callback function
realTime.subscribe("NEW_VERSION_AVAILABLE", callbackFunction);

function callbackFunction(versionName) {
	console.log(`A new version is available, checkout the ${versionName}`);
}

Introducing Contextual Comments​

Alongside with Presence, a new product is shipping: Contextual Comments!

Illustration of Contextual Comments

Contextual Comments let you embed comments directly into your page or 3D environment. It's our first step into asynchronous collaboration, giving users a way to share thoughts without being online at the same time.

The idea is simple: make feedback and collaboration direct and straightforward. Users can pin comments to specific elements or positions, which can be helpful in documents, on web pages, or within 3D models.

The code below displays a way to add the adapter Contextual Comments in a HTML canvas. Here is how to do it:

<script>
	  // Initializing the Adapter with the canvasId 
  	const pinAdapter = new CanvasPin("my-id");

		// Initializing the Comments component with the adapter created
    const comments = new Comments(pinAdapter);

		// Adding the component to the already initialized room. 
    room.addComponent(comments); 
</script>

<canvas id="my-id" width="540" height="540"></canvas>

If you need more details on how to do so, you can check out the dedicated documentation page on how to initialize the Contextual Comments for HTML Canvas.

AI Transcript​

After this version you will be able to use the AI Transcript API, which enables your users to transcribe their meetings to text and then use AI queries to return meeting summaries, providing valuable insights from your meetings.

Illustration of Transcripts

New events​

We are introducing 14 new events to be used within the SDK instance or the Video Conference, here are a list of new events available:

Migrating to the latest version​

In this release of our SDK, we have implemented significant changes and enhancements that contain breaking changes. For a seamless migration process, we strongly recommend that developers consult our comprehensive migration guide. It contains essential information to facilitate your transition to the latest version.

If you need any help when migrating, you can find a dedicated channel on our Discord server, where we can help you with the migration.