Conference Integration Guide

Guide to integrating datagram conference into your project

Class: Conference

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

• client: An instance of the Client.
• options: Default conference settings (IConferenceOptions).

1. Types

type IConferenceOptions = {
  metadata?: {
    title?: string;
  };
  skipMediaSettings?: boolean;
  turnOnMic?: boolean;
  turnOnCam?: boolean;
  authorization?: string;
};

2. Methods

- mount(selector: string | HTMLElement): Mounts the wallet iframe into the specified DOM element.

- dispose(): Dispose all components created from mount function

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

3. Events

call_ended: When the user click the End call button, you will receive this signal.

invalid_qr_code: When you provide an incorrect or expired alias, the iframe will redirect to the invalid code screen, at which point the event will also be emitted.

conference-ready: This means that the src of the iframe has been loaded. The screen can be "media_testing", "conference", "invalid", "call_ended", "not_supported"

call-ready: This means that the "conference" screen has been entered (at this time the conference-ready event has already occurred).

TIP

Let's look at some examples to see how these events can be caught.

4. Getting Started

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

let client: Client;
let conference: Conference;

const options: IConferenceOptions = {...};

<!-- 1. Create client -->
client = Client.create({
  alias: "bkaui",
  origin: "http://localhost:8386",
});
<!-- 2. Create conference -->
conference = new Conference(client, options);

Examples

Vue

<template lang="pug">
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')

</template>

<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) => {
  if (event.data === "call_ended") {
    iframeMounted.value = false;
    conference?.dispose();
  }
  if (event.data === "invalid_qr_code") {
    iframeMounted.value = false;
    conference?.dispose();
  }
  if (event.data === "conference-ready") {
    isLoading.value = false;
    iframeMounted.value = true;
  }
  if (event.data === "call-ready") {
    isLoading.value = false;
    iframeMounted.value = true;
  }
});

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

<style lang="stylus" scoped>
#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)}
}
</style>