How to personalize your video conference component with SuperViz

SuperViz is a low-code SDK designed to accelerate your software development by entrusting us with the responsibility of crafting top-tier collaboration tools for you. With just a few lines of code, you can implement a video conference feature inside your application. But what if you want more customization than the default options of our Video SDK?

In this article, we are going to show how to use our methods and callback functions to customize your video meeting component.

Callback functions

When using the Video Conference, you can define a range of callbacks to handle specific events and interactions within the meeting. These callbacks allow you to respond to participant actions, meeting state changes, and other event-driven functionalities.

To define a callback, you need to pass a function when creating the Video Conference, as shown in the example below:

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

const video = new VideoConference({
  callbacks: {
    onToggleMicrophone: () => {},
    onToggleCam: () => {},
    onToggleTranscript: () => {},
    onToggleChat: () => {},
    onToggleScreenShare: () => {},
    onClickHangup: () => {},
    onToggleMeetingSetup: () => {},
  },
});

When you pass a function to the callbacks object, the default behavior of the Video Conference will be overridden by the function you provide. This allows you to customize the behavior of the Video Conference to suit your specific requirements.

For example, when using onToggleChat(), the chat modal will not be displayed when the participant clicks the chat button, as a custom function has been provided by you. This means you can use your own chat instead of ours.

Methods

But let’s say you want to implement your own set of components for the buttons like “Hang up”, “Start Transcription”, “Share Screen”, “Mute/Unmute” and so on. You can still accomplish that by removing the button from the screen, and adding your own, as shown below:

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

video = new VideoConference({
    ...
    screenshareOff: true // disables the screen share button
})

And you can have your own button anywhere on your page, by calling toogleScreenShare method on your HTML. Once activated it will ask the participant to share their screen. To do that, use the following code:

<button id="personalized-id" 
        onClick={() => video.toggleScreenShare()} 
        value="Share your screen">
</button>

Mixing callback functions and methods

Of course you can mix these two ways to accomplish new things, like adding new capabilities when a user clicks on our default button and still uses our implementation. Like, for example, using our chat modal, you can include the toogleChat within the callback function you provide, like so:

const video = new VideoConference({
  callbacks: {
    onToggleChat: () => {
      // Your logic
      video.toggleChat();
    },
  },
});

In conclusion, the SuperViz Video SDK offers a wide range of customization options for your video conference tool. Whether you want to use our default options, or your own additional functionality, it allows you to enhance the Video SDK to your specific needs.