Web (external)

The Conference class allows you to embed a conferencing iframe into your web application. It requires a Client instance and supports customizable options for microphone, camera, and other settings. This guide explains how to integrate the Conference class from the datagram-network/conference-sdk into your project to enable video conferencing features.

Class: Conference

Constructor

constructor(client: Client | null, options: IConferenceOptions = {})

• client: This is an instance of the Client class that connects you to the Datagram network.

• options: These are optional settings you can use to customize the conference.

1. Types

IConferenceOptions

type IConferenceOptions = {
  metadata?: {
    title?: string;   // You can set a title for the conference (optional)
  };
  skipMediaSettings?: boolean; // If true, it skips asking for microphone/camera permissions at the start
  turnOnMic?: boolean;         // Automatically turns on microphone if true
  turnOnCam?: boolean;         // Automatically turns on camera if true
  authorization?: string;      // Your authorization token for accessing the conference
};

2. Methods

mount(selector: string | HTMLElement): Promise<void>

Mounts the conference iframe into the specified DOM element.

• selector: A CSS selector (e.g., #datagram-frame) or an HTMLElement.

• Returns: A Promise that resolves when the iframe is mounted.

dispose(): void

Cleans up all components created by the mount method, removing the iframe and associated resources.

3. Events

The Conference class emits the following events via the browser’s message event listener:

• call_ended: Triggered when the user clicks the "End Call" button.

• invalid_qr_code: Fired if an incorrect or expired alias is provided, redirecting to an invalid code screen.

• conference-ready: Indicates the iframe’s source has loaded. Possible screens: media_testing, conference, invalid, call_ended, or not_supported.

• call-ready: Fired when the conference screen is active (occurs after conference-ready).

Tip: Use an event listener to handle these events (see example below).

4. Getting Started Example

Here is a basic example of how to create a client and conference, and then mount it on the page:

import { Client, Conference, type IConferenceOptions } from "@datagram-network/conference-sdk";

let client: Client;
let conference: Conference;

const options: IConferenceOptions = {
  skipMediaSettings: false,
  turnOnCam: false,
  turnOnMic: false,
  authorization: "your_token_here",
};

// Create client instance
client = Client.create({
  alias: "77am5",
  origin: "http://localhost:8080",
});

// Create conference instance with client and options
conference = new Conference(client, options);

// Mount conference iframe inside the element with id "conference-root"
conference.mount(document.getElementById("conference-root"));

5. Vue.js Example

This example demonstrates how to integrate the Conference class into a Vue 3 application using TypeScript and the Composition API.

Template

div
  button.p-2.border.rounded-full.bg-blue-500.text-white.p-4.min-w-32(@click='startRoom()' :class='{ "disabled:opacity-50": isLoading }')
    span(v-show='!isLoading') Start room
    .loader(v-show='isLoading')
  div#datagram-frame.w-full.bg-black(ref='root' :class='[{ "fixed z-[10] block inset-0" : iframeMounted }]' v-show='iframeMounted')

Script

<script setup lang="ts">
import { useEventListener } from "@vueuse/core";
import { Client, Conference, type IConferenceOptions } from "@datagram-network/conference-sdk";
import { ref } from "vue";

const root = ref<HTMLElement>();
const iframeMounted = ref(false);
const isLoading = ref(false);

let client: Client;
let conference: Conference;

const options: IConferenceOptions = {
  skipMediaSettings: false,
  turnOnCam: false,
  turnOnMic: false,
  authorization: "your_token",
};

useEventListener("message", async (event) => {
  switch (event.data) {
    case "call_ended":
    case "invalid_qr_code":
      iframeMounted.value = false;
      conference?.dispose();
      break;
    case "conference-ready":
    case "call-ready":
      isLoading.value = false;
      iframeMounted.value = true;
      break;
  }
});

async function startRoom() {
  client = Client.create({
    alias: "77am5",
    origin: "http://localhost:8080",
  });
  isLoading.value = true;
  conference = new Conference(client, options);
  await conference.mount(root.value as HTMLElement);
}
</script>

Styles

#datagram-frame
  height 100vh
  @media mobile
    height 100dvh

.loader {
  width: 24px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 4px solid #fff;
  animation:
    l20-1 0.8s infinite linear alternate,
    l20-2 1.6s infinite linear;
}

@keyframes l20-1 {
  0%    {clip-path: polygon(50% 50%,0 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0);}
  12.5% {clip-path: polygon(50% 50%,0 0, 50% 0, 100% 0, 100% 0, 100% 0, 100% 0);}
  25%   {clip-path: polygon(50% 50%,0 0, 50% 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);}
  50%   {clip-path: polygon(50% 50%,0 0, 50% 0, 100% 0, 100% 100%, 50% 100%, 0 100%);}
  62.5% {clip-path: polygon(50% 50%,100% 0, 100% 0, 100% 0, 100% 100%, 50% 100%, 0 100%);}
  75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0 100%);}
  100%  {clip-path: polygon(50% 50%,50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0 100%);}
}

@keyframes l20-2 {
  0%    {transform: scaleY(1) rotate(0deg);}
  49.99% {transform: scaleY(1) rotate(135deg);}
  50%   {transform: scaleY(-1) rotate(0deg);}
  100%  {transform: scaleY(-1) rotate(-135deg);}
}