DEV Community: Vaibhav Shinde

Building an Async Survey Tool With Dyte and React

Vaibhav Shinde — Thu, 12 Oct 2023 21:04:59 +0000

In today's fast-paced digital landscape, gathering valuable insights from your audience is crucial for making informed decisions. Traditional surveys have limitations, often causing respondents to drop out due to lengthy forms or slow-loading pages. This is where async survey tools come to the rescue. These innovative tools leverage asynchronous communication to create a more engaging and efficient survey-taking experience. In this blog post, we'll explore the world of async survey tools, shedding light on what they are and why you should consider building one.

Why build an async survey tool?

Asynchronous survey tools offer a refreshing data collection approach, revolutionizing how we interact with respondents. Here are some compelling reasons why you should consider embarking on the journey of building your very own async survey tool:

Enhanced user experience: Traditional surveys can be tedious, leading to survey fatigue and dropouts. Async survey tools allow respondents to answer questions independently, reducing survey abandonment rates and ensuring a positive user experience.
Increased response rates: By accommodating respondents' schedules and allowing them to participate when convenient, async surveys are more likely to garner higher response rates than their synchronous counterparts.
Global reach: Async surveys transcend time zones and geographical boundaries. They empower you to collect data from a diverse global audience, making it ideal for research with broader demographics.
Data quality: Respondents can provide well-thought-out responses with asynchronous surveys, leading to higher-quality data. This is especially valuable when conducting in-depth research or gathering detailed feedback.
Flexibility and customization: Building your async survey tool gives you complete control over the design, structure, and features. You can tailor it to meet the specific needs of your research, ensuring it aligns perfectly with your objectives.
Seamless integration: Integrating your async survey tool with other data collection and analysis tools is more straightforward than ever, enabling you to streamline your research process.
Competitive advantage: In a world where innovation is vital, having your async survey tool sets you apart from competitors. It demonstrates your commitment to delivering a superior user experience and gathering accurate data.

In the following sections of this blog post, we'll delve deeper into the technical aspects of building an asynchronous survey tool, exploring key features, design considerations, and best practices to ensure success in your survey endeavors.

Before you start

This guide is written assuming you have basic HTML, CSS, and JS knowledge, along with React.
You will need an API Key and Organisation ID from dev.dyte.io to perform operations with Dyte's REST APIs. Check out its documentation at docs.dyte.io/api. To know more about getting started and learning basic concepts about Dyte, read this guide: docs.dyte.io/getting-started.

Application flow

User is taken to a screen where they are asked a question. To answer, they have to start the recording. A minimum duration of 15 seconds would be required for the recording and a maximum of 60 seconds, after which the recording will stop automatically, and the survey will be completed. The user will be shown visual guidelines to center their face in the video and told to speak up if their volume is low.

Understanding the code

Follow along with the code walkthrough as you read through the source here.

In the source, we've set up a React app with Vite, and this is the main <App /> component that automatically initializes and joins a Dyte meeting.

export default function Meeting() {
  const [meeting, initMeeting] = useDyteClient();

  useEffect(() => {
      // use "light" theme
    provideDyteDesignSystem(document.body, {
      theme: 'light',
    });

    const searchParams = new URLSearchParams(window.location.search);
      // for testing we get authToken from URL search params
      // but in prod, you would get this as a response
      // from one of your backend APIs
    const authToken = searchParams.get('authToken');

    if (!authToken) {
      alert(
        "An authToken wasn't passed, please pass an authToken in the URL query to join a meeting.",
      );
      return;
    }

    initClient({
      authToken,
    }).then((meeting) => {
      // automatically join room
      meeting?.joinRoom();
    });
  }, []);

  return (
    <DyteProvider
      value={meeting}
      fallback={
        <div className="w-full h-full flex flex-col gap-4 place-items-center justify-center">
          <DyteSpinner className="w-14 h-14 text-blue-500" />
          <p className="text-xl font-semibold">Starting Dyte Video Survey</p>
        </div>
      }
    >
      <Recorder />
    </DyteProvider>
  );
}

We're using the useDyteClient() hook to initialize a meeting object via the initClient() method. It accepts the authToken value returned by the Add Participant API.

We then use the <DyteProvider /> component and pass the meeting object to it that can be consumed by custom hooks. We also provided a fallback UI to render until the meeting object is initialized.

If you are unfamiliar with generating the authToken, check out our 'Getting Started' guide.

Now, let's move on to the main logic in the <Recorder /> component.

function Recorder() {
  const { meeting } = useDyteMeeting();

  // timestamp value from `meeting` object is stored
  const [timestamp, setTimestamp] = useState<Date>();
  // global states values emitted from components is stored
  const [UIStates, setUIStates] = useState<any>({});

  // derived from `timestamp` value
  const [duration, setDuration] = useState(0);
  // state to disable recording button as per logic
  const [recordingDisabled, setRecordingDisabled] = useState(false);

  // error feedback states to be shown to the user
  const [errors, dispatchError] = useReducer(errorReducer, []);
  // custom hook to calculate brightness and silence from
  // video and audio tracks
  useBrightnessAndSilenceDetector(dispatchError);

  useEffect(() => {
    // calculate duration from recording timestamp
    if (timestamp) {
      const interval = setInterval(() => {
        const duration = getElapsedDuration(timestamp);
        setDuration(duration);
      }, 500);
      return () => {
        clearInterval(interval);
      };
    }
  }, [timestamp]);

  useEffect(() => {
    const onRecordingUpdate = (state: string) => {
      switch (state) {
        case 'RECORDING':
          setTimestamp(new Date());
          break;
        case 'STOPPING':
          setTimestamp(undefined);
          break;
      }
    };

    meeting.recording.addListener('recordingUpdate', onRecordingUpdate);
    return () => {
      meeting.recording.removeListener('recordingUpdate', onRecordingUpdate);
    };
  }, []);

  useEffect(() => {
    // stop recording when you reach max duration of 60 seconds
    if (duration >= 60) {
      meeting.recording.stop();
      setRecordingDisabled(false);
    }
  }, [duration]);

  return (
    <div className="w-full h-full flex place-items-center justify-center p-4 flex-col">
      <div className="max-w-4xl pb-8">
        <h3 className="text-xl font-bold mb-4">
          Have you worked with any of the following technologies: JavaScript
          Core, Web Assembly, Protobufs?{' '}
        </h3>
        <div className="mb-2">
          List out the ones you have experience in and pick 1 to elaborate. If
          you haven't worked with any of these technologies, pick 2-3 skills
          mentioned in the job description to describe instead. Here are some
          tips to help you record a great video:
        </div>
        <li>Please provide as much detail as you can</li>
        <li>Use your webcam or mobile camera to record your video response</li>
        <li>Make sure you have plenty of light so we can clearly see you</li>
        <li>
          Avoid places with lots of background noise so we can clearly hear you
        </li>
      </div>
      <div className="flex flex-col w-full max-w-lg border rounded-xl overflow-clip">
        <div className="relative">
          <DyteParticipantTile
            participant={meeting.self}
            className="w-full h-auto rounded-none aspect-[3/2] bg-zinc-300"
          />
          <p className="text-white bg-purple-950 p-3 text-xs text-center">
            {/* Show okay message, or last error message */}
            {errors.length === 0
              ? messages['ok']
              : messages[errors[errors.length - 1]]}
          </p>
          {/* Show placement container only when recording hasn't started */}
          {!timestamp && (
            <div className="absolute w-44 z-50 left-1/2 -translate-x-1/2 top-1/2 -translate-y-28 aspect-square border-2 border-dashed border-pink-50 rounded-lg" />
          )}
        </div>
        {/* Duration indicator */}
        <Duration duration={duration} />

        <div className="flex items-center justify-center p-2">
          <DyteRecordingToggle
            meeting={meeting}
            disabled={(timestamp && duration <= 15) || recordingDisabled}
          />
          <DyteSettingsToggle
            onDyteStateUpdate={(e) => setUIStates(e.detail)}
          />
        </div>
      </div>

      <DyteDialogManager
        states={UIStates}
        meeting={meeting}
        onDyteStateUpdate={(e) => setUIStates(e.detail)}
      />
    </div>
  );
}

Breaking down the code:

The timestamp state value is set from the meeting recording API in a useEffect containing the recordingUpdate event listeners.
UIStates state value gets updated whenever components like <DyteDialogManager /> or <DyteSettingsToggle /> emit global UI state updates.
We derive the duration from the timestamp value in a useEffect.
The state recordingDisabled is set as per the logic we defined before.
To render the UI, we use the DyteParticipantTile, DyteSettingsToggle, DyteRecordingToggle and DyteDialogManager components from Dyte's React UI Kit. Note that DyteSettingsToggle emits a state whenever you toggle it, and the DyteDialogManager shows the DyteSettings component accordingly.
Note how we disable the DyteRecordingToggle button as per the duration state.
We also render a custom Duration component showing the progress of the recording duration along with our constraints.
The useBrightnessAndSilenceDetector() hook updates the errors state that gets shown to the user.

The messages object contains a pre-defined list of strings for each error state:

const messages = {
  ok: 'Ensure your head and shoulders are in shot. Hit record when you are ready.',
  not_bright:
    'You seem to be in a dark room, please try turning on the lights.',
  not_loud: 'Your voice is not loud enough. Please speak loud and clearly.',
};

Coming to the brightness and silence detector hook useBrightnessAndSilenceDetector(). Its code looks like this:

function useBrightnessAndSilenceDetector(
  dispatchError: Dispatch<Parameters<typeof errorReducer>[1]>,
) {
  const { meeting } = useDyteMeeting();
  const videoEnabled = useDyteSelector((m) => m.self.videoEnabled);
  const audioEnabled = useDyteSelector((m) => m.self.audioEnabled);

  useEffect(() => {
    const { audioTrack } = meeting.self;
    if (!audioTrack || !audioEnabled) return;

    const stream = new MediaStream();
    stream.addTrack(audioTrack);
    const audioContext = new AudioContext();
    audioContext.resume();
    const analyserNode = audioContext.createAnalyser();
    analyserNode.fftSize = 2048;
    const micSource = audioContext.createMediaStreamSource(stream);
    micSource.connect(analyserNode);
    const bufferLength = 2048;
    const dataArray = new Float32Array(bufferLength);
    const silenceThreshold = 0.05;
    const segmentLength = 1024;

    function getRMS(
      dataArray: Float32Array,
      startIndex: number,
      endIndex: number,
    ) {
      let sum = 0;
      for (let i = startIndex; i < endIndex; i++) {
        sum += dataArray[i] * dataArray[i];
      }
      const mean = sum / (endIndex - startIndex);
      const rms = Math.sqrt(mean);
      return rms;
    }

    function detectSilence() {
      analyserNode.getFloatTimeDomainData(dataArray);
      const numSegments = Math.floor(bufferLength / segmentLength);
      for (let i = 0; i < numSegments; i++) {
        const startIndex = i * segmentLength;
        const endIndex = (i + 1) * segmentLength;
        const rms = getRMS(dataArray, startIndex, endIndex);
        if (rms > silenceThreshold) {
          // Detected non-silence in this segment
          return false;
        }
      }
      // Detected silence
      return true;
    }

    const interval = setInterval(() => {
      const isSilent = detectSilence();

      if (isSilent) {
        dispatchError({ type: 'add', error: 'not_loud' });
      } else {
        dispatchError({ type: 'remove', error: 'not_loud' });
      }
    }, 1000);

    return () => {
      clearInterval(interval);
      dispatchError({ type: 'remove', error: 'not_loud' });
    };
  }, [audioEnabled]);

  useEffect(() => {
    if (!videoEnabled) return;

    const { videoTrack } = meeting.self;
    if (!videoTrack) return;
    const videoStream = new MediaStream();
    videoStream.addTrack(videoTrack);
    const video = document.createElement('video');
    video.style.width = '240px';
    video.style.height = '180px';
    video.muted = true;
    video.srcObject = videoStream;
    video.play();
    const canvas = document.createElement('canvas');
    canvas.width = 240;
    canvas.height = 180;
    const ctx = canvas.getContext('2d', { willReadFrequently: true })!;

    const interval = setInterval(() => {
      const brightness = getBrightness(video, canvas, ctx);
      if (brightness < 0.4) {
        dispatchError({ type: 'add', error: 'not_bright' });
      } else {
        dispatchError({ type: 'remove', error: 'not_bright' });
      }
    }, 1000);

    return () => {
      clearInterval(interval);
      dispatchError({ type: 'remove', error: 'not_bright' });
    };
  }, [videoEnabled]);

  return null;
}

It takes the audioTrack and videoTrack objects from the meeting object and then processes it to detect silence/low volume and low brightness, respectively, and dispatch the errors for our UI to show.

Finally, let's take a look at the Duration component and the ProgressBar component.

function ProgressBar({
  value,
  max,
}) {
  return (
    <div className="h-1 w-full bg-zinc-200 relative">
      <div
        className="max-w-[25%] h-full bg-red-500 z-10 absolute left-0 top-0"
        style={{
          width: Math.min((value / max) * 100, 25) + '%',
          transition: 'all 0.3s',
        }}
      ></div>
      <div
        className="max-w-full h-full z-0 bg-black absolute left-0 top-0"
        style={{
          width: Math.min((value / max) * 100, 100) + '%',
          transition: 'all 0.3s',
        }}
      ></div>
    </div>
  );
}

function Duration({ duration }) {
  return (
    <div className="flex flex-col gap-1 bg-zinc-50 p-2 text-center">
      <div className="relative">
        <ProgressBar value={duration} max={60} />
        <div className="z-10 bg-red-500 absolute left-1/4 h-full w-1 top-0"></div>
        <div className="z-10 bg-black absolute right-0 h-full w-1 top-0"></div>
      </div>
      <div className="text-xs flex items-center justify-between">
        <div>
          Min recording time{' '}
          <span className="font-semibold text-red-500">15s</span>
        </div>
        <div>
          Max recording time <span className="font-semibold">60s</span>
        </div>
      </div>
    </div>
  );
}

We wrote a custom UI with the help of TailwindCSS to render the Duration and ProgressBar UI that looks like this.

Now, the user can start answering the question after hitting the record.

Conclusion

With this, we have built an async survey tool, changing your data collection approach and modernizing your interactions with respondents. We have broken down the code, rigorously tested it, and fine-tuned the interface to ensure user-friendliness, making it prime and polished for deployment. So, now you can get on and elevate your survey-taking experience.

While on the subject of async tools, check out this blog we wrote on creating an async interview platform!

If you have any thoughts or feedback, please get in touch with me on LinkedIn and Twitter. Stay tuned for more related blog posts in the future!

Get better insights on leveraging Dyte's technology and discover how it can revolutionize your app's communication capabilities with its__ SDKs__. Head over to dyte.io to learn how to start quickly on your 10,000 free minutes, which renew every month. You can reach us at support@dyte.io or ask our developer community if you have any questions.

Building an Async Interview Platform With React and Dyte

Vaibhav Shinde — Fri, 30 Jun 2023 11:25:16 +0000

Introduction

With the emergence of remote work and virtual events, video communication has become an integral part of our daily lives. As a result, video systems have seen substantial growth. Video platforms are helpful for remote teams, online learning, interview processes, and virtual events because they enable synchronous and non-synchronous communication with video, audio, and chat features.

This article will demonstrate how to use React and Dyte to create an async interview platform. As we dive deeper, you will be guided through the steps involved in building the UI elements and how to leverage Dyte’s video SDK.

You'll have the information and resources necessary to build your async platform through Dyte by the end of this article. But first, let’s look at why Async interviews are better than normal synchronous interviews.

Why an async interview?

Asynchronous interviews offer convenience, fairness, and improved efficiency in the hiring process, making them a valuable tool for both candidates and employers alike. Some of the benefits you get with the async interviews

Flexibility - Asynchronous interviews allow both interviewers and candidates to participate at their own convenience, eliminating the need for scheduling conflicts.
Time-saving - Asynchronous platforms streamline the process by allowing candidates to record their responses to interview questions at their own pace, saving time for both parties involved.
Fairness - Asynchronous interviews provide a level playing field for all candidates.
Reduced pressure - Some candidates may feel more comfortable and perform better when not under the immediate pressure of a live interview.
Scalability - Asynchronous interview platforms are highly scalable, making them ideal for organizations with high-volume hiring needs.

Now that we know the importance of Async interviews, let’s look at the prerequisites to build this platform.

Prerequisites

Basic knowledge of React is required, as we will be using it to build the frontend of the application.
Node.js is also required to run the application, so make sure you have it installed on your computer.
Lastly, you will need an API key and organization ID from developer portal to be able to authenticate yourself when you call Dyte's REST APIs.

Let’s understand the application flow to build an async interview app.

Application flow of async interview platform

Users will have to enter their information on the landing page.
After submitting the form, they will be redirected to the interview page, where they can play the intro video.
Once users click on I'm ready, they will be redirected to the first question screen.
After they have listened to the video based question, users can click on Start Recording and start capturing their answer.
Once users submit the answer, they can click “Next” for the next question and finally “Finish” on the last question, and users’ all responses will be recorded.

Now, getting to the key implementation details:

The user will use the default group_call_host preset because this comes default for every organization that is created in Dyte. Any other preset which has the ability to Start and Stop recordings also works.
When the user clicks the “Start Recording My Answer” button, we will call the meeting.recording.start() API in the frontend to start the recording. And when user clicks Next or Finish, we will call meeting.recording.stop() to stop the recording once the user has answered a specific question. Do note that each question answered by the participant will be a separate recorded file.
We will take a look at how you can access the recorded files at the end of this post.

Project Setup

We’re going to use Next.js for our project as we can write frontend and backend code in a single codebase easily with it.

Creating the backend route

First, we’ll just create a simple backend API route at /api/meeting which will create a meeting as well as add the participant to that meeting with the default group_call_host preset. This API returns the participant details with the token that we will use to join to meeting in the frontend.

Check out the code for creating the backend route:

import { NextApiRequest, NextApiResponse } from "next";

const API_KEY = process.env.DYTE_API_KEY;
const ORG_ID = process.env.DYTE_ORG_ID;

const BASIC_TOKEN = Buffer.from(ORG_ID + ":" + API_KEY).toString("base64");

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method !== "POST") {
    return res
      .status(405)
      .json({ success: false, message: "Method Not Allowed" });
  }

  const { name, email } = req.body;

  const meetingResponse = await fetch(
    "<https://api.cluster.dyte.in/v2/meetings>",
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: "Basic " + BASIC_TOKEN,
      },
      body: JSON.stringify({ title: "Interview with " + name }),
    }
  );

  const meetingData = await meetingResponse.json();

  if (!meetingResponse.ok) {
    return res.status(meetingResponse.status).json(meetingData);
  }

  const { id } = meetingData.data;

  const participantResponse = await fetch(
    `https://api.cluster.dyte.in/v2/meetings/${id}/participants`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: "Basic " + BASIC_TOKEN,
      },
      body: JSON.stringify({
        name,
        preset_name: "group_call_host",
        custom_participant_id: email,
      }),
    }
  );

  res.status(participantResponse.status).json(await participantResponse.json());
}

Creating the landing page

This will have a simple form that accepts the user’s name and email address, and this data is then passed to the /api/meeting API, and we use the retrieved token to redirect the user to the interview page: /interview?token=<user-token>.

Here is the source for this page which is written in React:

import Head from "next/head";
import { useRouter } from "next/router";
import { FormEvent, useCallback, useReducer, useState } from "react";

interface Form {
  name: string;
  email: string;
}

export default function Home() {
  const [submitting, setSubmitting] = useState(false);
  const [form, setForm] = useReducer(
    (state: Form, payload: Partial<Form>) => {
      return { ...state, ...payload };
    },
    { name: "", email: "" }
  );

  const router = useRouter();

  const handleSubmit = useCallback(
    async (e: FormEvent) => {
      e.preventDefault();

      if (form.email.trim() === "" || form.name.trim() === "") {
        return;
      }

      setSubmitting(true);

      try {
        const res = await fetch("/api/meeting", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(form),
        });

        const data = await res.json();

        if (!res.ok) {
          alert(
            "There was an error when starting the interview, check console for error"
          );
          console.log(res.status, data);
          return;
        }

        const { token } = data.data;

        router.push({
          pathname: "/interview",
          query: {
            token,
          },
        });
      } finally {
        setSubmitting(false);
      }
    },
    [form, router]
  );

  return (
    <div className="flex h-full w-full flex-col items-center justify-center p-6">
      <Head>
        <title>Async Interview Sample - Dyte</title>
      </Head>
      <div className="flex w-full max-w-screen-md flex-col items-center justify-center gap-3 text-center">
        <h1 className="text-3xl font-bold text-blue-600">
          Async Video Interview
        </h1>

        <form
          className="mt-4 flex w-full max-w-sm flex-col gap-3"
          onSubmit={handleSubmit}
        >
          <input
            type="text"
            placeholder="Name"
            value={form.name}
            onInput={(e) => setForm({ name: e.currentTarget.value })}
            required
          />

          <input
            type="email"
            placeholder="Email"
            value={form.email}
            onInput={(e) => setForm({ email: e.currentTarget.value })}
            required
          />

          <button
            className="h-10 rounded-md bg-blue-600 font-semibold text-white"
            disabled={submitting}
          >
            {submitting ? "Starting..." : "Start"}
          </button>
        </form>
      </div>
    </div>
  );
}

Interview page

First, let's write frontend code that actually makes the user join the meeting.

The code would look like this:

export default function InterviewPage() {
  const [meeting, initMeeting] = useDyteClient();

  useEffect(() => {
    const search = new URLSearchParams(window.location.search);

    const authToken = search.get("token");

    if (!authToken) {
      return alert("authToken was not passed");
    }

    initMeeting({
      authToken,
    }).then((m) => m?.joinRoom());
  }, []);

  return (
    <DyteProvider value={meeting} fallback={<div>Loading...</div>}>
      <Interview />
    </DyteProvider>
  );
}

This is a common boilerplate code you have to write when integrating Dyte in your React app.

Let’s break it down:

We get the auth token from the URL query, and we pass it to the initMeeting() method, and once the meeting object is initialized, we will automatically join the user to the meeting via meeting.joinRoom(). However, if you wish to show an interstitial setup page before the user joins the meeting, you can omit this and show a custom setup screen or use our included [DyteSetupScreen](https://docs.dyte.io/react-ui-kit/components/dyte-setup-screen#docusaurus_skipToContent_fallback) component.
We pass the meeting object to the <DyteProvider /> with a fallback UI until the meeting object is initialized.
Then we render the <Interview /> component which renders the actual interview UI.

Now this is where the actual frontend implementation of this project lies, in the Interview component. All the previous steps are the common steps you would have to do when integrating Dyte’s SDKs.

You can take a look at the source code as you read to understand better.

We have stored the introduction and questions in the questions array, with the first one being the introduction which is at the 0 index. The basic logic is that we will start from 0, showing the intro, and then showing the 3 questions and getting responses from the users each time. The stage state will have the current state of the questions answered.

import {
  DyteAudioVisualizer,
  DyteAvatar,
  DyteParticipantTile,
  DyteSpinner,
} from "@dytesdk/react-ui-kit";
import {
  DyteProvider,
  useDyteClient,
  useDyteMeeting,
  useDyteSelector,
} from "@dytesdk/react-web-core";
import Head from "next/head";
import { useEffect, useRef, useState } from "react";

const questions = [
  "https://res.cloudinary.com/doy3ks7ls/video/upload/v1680075287/Intro_xb5ftf.mp4",
  "https://res.cloudinary.com/doy3ks7ls/video/upload/v1680075215/Question_1_rwml32.mp4",
  "https://res.cloudinary.com/doy3ks7ls/video/upload/v1680075219/Question_2_yeddjq.mp4",
  "https://res.cloudinary.com/doy3ks7ls/video/upload/v1680075219/Question_3_kqgbgw.mp4",
];

function Interview() {
  const $video = useRef<HTMLVideoElement>(null);
  const roomJoined = useDyteSelector((m) => m.self.roomJoined);
  const [stage, setStage] = useState(0);
  const { meeting } = useDyteMeeting();

  const recordingState = useDyteSelector((m) => m.recording.recordingState);

  if (!roomJoined) {
    return <div>Loading...</div>;
  }

  return (
    <div className="flex h-full w-full">
      {stage < questions.length && (
        <aside className="relative flex-1">
          <video
            className="h-full w-full object-cover"
            src={questions[stage]}
            ref={$video}
            controls
            autoPlay
          />
        </aside>
      )}
      <main className="flex flex-1 flex-col items-center justify-center gap-12 p-4">
        {stage > 0 && stage < questions.length && (
          <>
            <p className="text-lg font-bold">
              Question {stage} of {questions.length - 1}
            </p>

            <DyteParticipantTile
              participant={meeting.self}
              className="relative aspect-[4/3] h-auto w-full max-w-[540px]"
            >
              <DyteAudioVisualizer
                participant={meeting.self}
                size="lg"
                className="absolute right-3 top-3"
              />
              <DyteAvatar participant={meeting.self} />
            </DyteParticipantTile>
          </>
        )}

        {stage > 0 &&
          stage < questions.length &&
          recordingState === "STARTING" && (
            <p className="info">
              <DyteSpinner />
              Starting the recording...
            </p>
          )}

        {stage > 0 &&
          stage < questions.length &&
          recordingState === "STOPPING" && (
            <p className="info">
              <DyteSpinner />
              Stopping the recording...
            </p>
          )}

        {stage > 0 &&
          stage < questions.length &&
          recordingState === "RECORDING" && (
            <p className="info border-red-500 text-red-700">
              Recording has started, you can start speaking now
            </p>
          )}

        <div className="flex flex-wrap items-center gap-2">
          {stage > 0 &&
            stage < questions.length &&
            recordingState === "IDLE" && (
              <button
                className="btn bg-red-500"
                onClick={() => {
                  $video.current?.pause();
                  meeting.recording.start();
                }}
              >
                Start Recording My Answer
              </button>
            )}

          {stage === 0 && (
            <button
              className="btn"
              onClick={() => {
                setStage(1);
              }}
            >
              Awesome, I&apos;m ready 🚀
            </button>
          )}

          {stage > 0 && stage < questions.length - 1 && (
            <button
              className="btn"
              onClick={async () => {
                if (recordingState === "RECORDING") {
                  await meeting.recording.stop();
                  setStage((stage) => stage + 1);
                }
              }}
              disabled={recordingState !== "RECORDING"}
            >
              Next
            </button>
          )}

          {stage === questions.length - 1 && (
            <button
              className="btn"
              onClick={() => {
                if (recordingState === "RECORDING") {
                  meeting.recording.stop();
                }
                setStage(questions.length);
              }}
            >
              Finish
            </button>
          )}

          {stage === questions.length && (
            <div>
              <p className="max-w-md text-center text-2xl font-semibold">
                Thank you for attending the interview. Your responses were
                recorded.
              </p>
            </div>
          )}
        </div>
      </main>
    </div>
  );
}

Also, we will get the current recording state with the useDyteSelector() like so:

const recordingState = useDyteSelector((m) => m.recording.recordingState);

This is used to show a recording indicator to indicate to the user that they are being recorded and they can start speaking, and also as a check when running start or stop recording APIs so they don’t fail.

Whenever a user clicks “Start Recording My Answer”, we will call meeting.recording.start() API which will start the recording and this indicator is shown:

And once the user finished answering and is willing to move to the next question and click Next or Finish, it will call the meeting.recording.stop() to stop the recording and increment the stage state.

And finally when you’re at the final stage, i.e; you have answered all questions, the user will be shown the final screen with the message:

You can access all recordings of a particular meetingId with the API: https://docs.dyte.io/api#/operations/get_all_recordings.

That is it, we’ve created an Async Interview Platform with Dyte! The live demo of this application is available here. And here’s the source code for the project.

Want to build something similar? Build the future on live video with Dyte’s customizable SDKs, low-code UI builder, and easy to consume documentation. You never know you might create the next big thing 🚀.

Getting Started With Web Components Using Stencil

Vaibhav Shinde — Thu, 16 Mar 2023 13:16:55 +0000

Web components (or Custom Elements) is a set of standardised APIs that allow you to create reusable and encapsulated components for the web. Custom elements allow you to define your own HTML elements and their behaviour using JavaScript. This means you can create your own custom elements like <my-element> and define their behaviour using JavaScript.

It has been around for quite some time now, but it hasn’t gained notable traction in the frontend world as most are still quite unfamiliar with it, although it’s being widely used in top websites such as YouTube, GitHub and many more.

There are many benefits to using Web Components, such as:

Send minimal JavaScript over the wire - As it uses standard Web APIs, you don’t have to send bigger JS bundles over the wire which exceed your application bundle size, as you do with React/Angular.
Style encapsulation - Web components’ styles can be encapsulated in its isolated “Shadow DOM”, therefore any of your global styles will not affect how your component looks and vice-versa.
Reusability - Once you create a web component, you can reuse it anywhere across different projects and platforms.
Performant - For simple components which don’t require too many DOM manipulations, web components are pretty performant compared to their small bundle size as they just use low-level DOM utilities. Also, third-party web component libraries work on top of these APIs to provide performance improvements for bigger, complex components too.

Before we dive deeper into web components, let’s understand the core terminologies or APIs.

Shadow DOM: Shadow DOM allows you to encapsulate the HTML and CSS of a web component, preventing it from being affected by the styles and behaviour of the rest of the page. This means you can create your own custom styles for your web components without worrying about them being overwritten by the styles of the rest of the page.
HTML Templates: HTML templates allow you to define a piece of HTML that can be reused across different web pages and web applications. This means you can define a piece of HTML like a navigation bar and reuse it across different web pages and web applications without having to rewrite the code each time.

Here is a minimal counterexample from webcomponents.dev:

<script>
  const template = document.createElement("template");
  template.innerHTML = `
          <style>
            * {
              font-size: 200%;
            }

            span {
              width: 4rem;
              display: inline-block;
              text-align: center;
            }

            button {
              width: 4rem;
              height: 4rem;
              border: none;
              border-radius: 10px;
              background-color: seagreen;
              color: white;
            }

          </style>

          <button id="dec">-</button>
          <span id="count"></span>
          <button id="inc">+</button>`;

  class MyCounter extends HTMLElement {
    constructor() {
      super();
      this.count = 0;
      // attaches Shadow DOM in "open" open
      this.attachShadow({ mode: "open" });
    }

    connectedCallback() {
      this.shadowRoot.appendChild(template.content.cloneNode(true));
      this.shadowRoot.getElementById("inc").onclick = () => this.inc();
      this.shadowRoot.getElementById("dec").onclick = () => this.dec();
      this.update(this.count);
    }

    inc() {
      this.update(++this.count);
    }

    dec() {
      this.update(--this.count);
    }

    update(count) {
      this.shadowRoot.getElementById("count").innerHTML = count;
    }
  }

  customElements.define("my-counter", MyCounter);
</script>

<my-counter></my-counter>

Let’s look at the parts of the above code snippet in detail to further understand web components a bit better.

First, we’ve written the actual content inside a <template> tag. This element allows you to write a markup template which isn’t actually rendered on the page so that the contents can be reused anywhere on the page. There is also a similar tag: <slot> which is a placeholder inside a component where you can drop in your own content, kind of like how you pass children in React and slots in Vue, but the difference is that it creates separate DOM trees and presents them together.

Next, we define our custom element by extending HTMLElement and initialise the component inside the constructor(). We also attach a Shadow DOM to the component in the constructor: this.attachShadow({ mode: 'open' }) in the open mode, which means the elements inside this Shadow DOM are accessible from outside the shadow root. Whereas in a closed mode, access to elements is denied from outside the shadow root. You access the shadow root with this.shadowRoot.

And like other frameworks (take React, for instance), Web Components also have its life cycle callbacks like: connectedCallback(), disconnectedCallback(), attributeChangedCallback() and adoptedCallback(). Here’s a brief explanation of each of these:

connectedCallback() - Called when the component is first connected to the DOM.
attributeChangedCallback(name, oldVal, newVal) - Called when an attribute to the component changes.
adoptedCallback() - Called when the component is moved to a new document.
disconnectedCallback() - Called when the component is disconnected from the DOM.

In our example, we initialise the DOM with the content we defined in the template, and we attach event listeners to our DOM nodes which mutate the state on user interaction, and then finally we initialise the state in the DOM with this.update().

Finally, we register the created element in the [CustomElementRegistry](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry) with a specific tag name, so we can start using it in the DOM.

customElements.define('my-counter', MyCounter);

Note that custom elements tag names should be at-least two words separated by hyphens, so that they don’t conflict with any new HTML elements that are created in the future.

Though, there are some limitations of Web Components too:

They will not work on really old browsers, but the support in most browsers is pretty good now.
Newer technologies like SSR (Server Side Rendering) aren’t supported by default as web components are mostly made to run on the client side.
You can only pass strings to attributes of a web component.

You can easily overcome these limitations with the help of a web component library.

Web Component libraries

While you can write web components without the need for a third-party library, there are some libraries out there which help us to write Web components much more easily and provide other features and performance improvements on top of the standard APIs, such as StencilJS, Lit, FAST to name a few.

Here’s a quick walkthrough through the above-mentioned libraries to learn their differences:

Lit adds reactivity to web components using declarative templates (using lit-html) which reduces boilerplate code and enhances your DX. It is really lightweight, and it doesn’t use a Virtual DOM.
FAST is also a lightweight solution to writing web components and similar to Lit it also doesn’t use a Virtual DOM and you write templates with tagged template literals. You can type the templates as well in FAST.
Stencil is a compiler that generates Web Components. It combines the best concepts of the most popular frameworks into a simple build-time tool. Unlike the other two options mentioned, Stencil does use a lightweight Virtual DOM like React called snabbdom underneath to enhance performance, but it is a lightweight VDOM implementation. Also, Stencil uses JSX templating syntax, and a Stencil component’s code looks very similar to a React class component.

What’s common among all these libraries is that they allow you to write in TypeScript and provide similar APIs.

What we chose at Dyte

We did experiment with a wide range of libraries, and decided to use Stencil for the following reasons:

Stencil provided a DX which we were all comfortable with
JSX templating (as most of us on the team know our way around React)
Easy TailwindCSS integration for our design system
Write code in TypeScript, so there’s type safety.
Easy integration with other frameworks like React and Angular.
Stencil is small and also performant as it uses the platform when it can!
It also provides a great developer experience out of the box.

Unlike other libraries, Stencil components don’t extend HTMLElement like we saw in the counter-example. The reason which Stencil states is:

HTMLElement locks source code to only work in the browser, rather than keeping the logic free from any APIs. The Stencil compiler is able to optimize many versions of components for various output targets, and one way to make that easier is by keeping HTMLElement out of it.

Cross framework support

While web components theoretically should work anywhere, there isn’t full support for leveraging it in its entirety in some frameworks like React and Angular, while it does work really well in recent frameworks like SolidJS, Svelte & Vue which come with better Custom Elements support.

However, React is bringing full web component support (passing props and handling events), and it’s currently in the experimental stage, so until it fully reaches stable, we’re gonna have to find a way to use our components in React apps!

You can check out Custom Elements support in various frameworks here: https://custom-elements-everywhere.com/#react.

Luckily Stencil provides easy ways to create component wrappers for frameworks like React and Angular. This nice guide helped us to create a React UI Kit package, which adds wrappers over our web components and exports React components. They have similar guides for Angular as well.

I created a Stencil Monorepo starter which has all the things you need to start shipping UI Kits for Vue, React and Angular. You can check it out here: https://github.com/vaibhavshn/stencil-monorepo-starter.

We have an example component [my-component](https://github.com/vaibhavshn/stencil-monorepo-starter/blob/main/packages/core/src/components/my-component/my-component.tsx) in the Stencil core package, which can be found at packages/core.

When we build the core package, you’ll see that a React component MyComponent is auto-generated in this file: https://github.com/vaibhavshn/stencil-monorepo-starter/blob/main/packages/react-library/src/components/stencil-generated/index.ts. Similarly Angular and Vue components are also generated in their respective paths.

Finally, we can build the individual React, Angular and Vue libraries and ship them.

Styling

Regarding styling our UI Kit components, we use a custom design system so our customers get the most customisation options possible, and we use TailwindCSS to have a single source of truth for our design tokens which we can use anywhere across our components, which made our CSS highly maintainable and configurable.

Setting it up is pretty straightforward as Stencil supports postcss via a plugin.

Here’s how you can set it up.

First, install the packages:

npm i @stencil-community/postcss tailwindcss autoprefixer

Then, to create Tailwind’s config file, run:

npx tailwindcss init

Now, we need to configure Stencil to use TailwindCSS via the postcss plugin in stencil.config.ts:

export const config: Config = {
  // ...
  plugins: [
    postcss({
      plugins: [require("tailwindcss"), require("autoprefixer")],
    }),
  ],
};

Since each Stencil component has its own css file, you’ll need to use it @apply directive or the theme() utility in the css files instead of using utility classes in your markup, like this:

:host {
  color: theme(colors.gray.800);
  /* or */
  @apply text-gray-800;
}

Now you can define your design tokens in a central tailwind.config.js file and use it in every component easily.

Challenges

There were, however some challenges that came along with using Stencil.

We noticed there was a memory leak related to DOM elements happening, and after debugging found out that Stencil wasn’t cleaning up detached DOM nodes properly. We’ve notified the team about it and it is being looked at.

Also, Stencil components are lazy loaded for performance. However, there is a drawback to it. As our application has a lot of interactive components, whenever you render a component for the first time, it doesn’t render straight away, rather we have to wait for the component code to load over the network (using dynamic imports) and then it will render. There is a slight lag. Stencil had this with their dist-custom-elements-bundle output, but they’ve deprecated that in favour of the dist-custom-elements output. We have found a way around this where we inline dynamic imports, and now our components are loaded immediately and render fast too.

Documenting the components

Another cool thing about Stencil is that it comes with support for generating documentation from JSDoc and other documentation files.

Here’s how you would normally document a component with Stencil.

import { Component, Prop, h } from "@stencil/core";

/*
 * A component which tells you your name
 */
@Component({
  tag: "my-first-component",
})
export class MyFirstComponent {
  /** Name of the user */
  @Prop() name: string;

  render() {
    return <p>My name is {this.name}</p>;
  }
}

Like this, you can write documentation for a component, its properties, events and methods.

Once you’ve written the documentation, you can generate the documentation in various formats with the various docs output targets that Stencil provides. You can choose among json, readme or custom outputs.

We chose the json format because we wanted more control over how to showcase our documentation on our documentation site.

Here’s the documentation page for the DyteSimpleGrid React component. You can see it here: https://docs.dyte.io/react-ui-kit/components/dyte-simple-grid

The above image showcases how we show documentation for our DyteSimpleGrid component.

Also, note that the examples for each UI Kit — React UI Kit and Angular UI Kit — are different. We wrote framework-specific usage examples in the files: usage/react-example.md, usage/html-example.md.

Then Stencil reads these files and outputs them in the docs output file, and we use that to generate framework-specific documentation in our docs site.

We wrote a custom script for our docs which processes data from the Stencil output and generates documentation for HTML, React and Angular UI Kits!

Also, we show Live Previews for our React UI Kit documentation so users can play around with our components right in the documentation!

Now, all we have to do to update our documentation is to just write it along with the source code, and then just install the updated ui-kit package in our docs and our documentation auto-updates! 🎉

Conclusion

So to conclude, most of our customers are currently using our UI Kit, and we’ve got some great responses from them about how easy it is to use and configure.

Moreover, we’re still trying to push the boundaries and are exploring new ways to bring more customisation to our offerings, so stay tuned!

If you haven't heard of Dyte yet, go to https://dyte.io to learn how our SDKs and libraries revolutionize the live video and voice-calling experience. Don't just take our word for it; try it for yourself! Dyte offers free 10,000 minutes every month to get you started quickly. If you have any questions or simply want to chat with us, please contact us through support or visit our developer community forum. Looking forward to it!

Open-sourcing Dyte Docs

Vaibhav Shinde — Thu, 10 Mar 2022 07:40:45 +0000

About three months back, we launched Dyte Docs - our first documentation site built in-house. We were overwhelmed by the response it received post-launch. People across domains appreciated the website, whether it be our own customers or other developers who stumbled upon it.

People at Docusaurus really liked the design and the implementation of our unique Section Switcher. Consequently it made its way to the Docusaurus Showcase and is listed as one of the favorites!

One of the unique features we added to the Docusaurus site was this Section switcher dropdown, which allows you to seamlessly switch between different sections/contexts easily without losing track of the “context” of the current page.

Apart from this, some folks even messaged us about how we implemented Stoplight Elements and made it our own by styling it to match our theme.

So, we heard you! We’ve open-sourced Dyte Docs! 🎉

Not only that, this post will guide you through what we did, how we did it, and how you can do it too!

If you are looking to create your documentation site and your requirements match as that of ours:

A robust and extensible documentation engine
Multiple sections (with versioning in each) which have similar context
API Reference
Styling Docusaurus with Tailwind CSS

then this blog post is for you!

Under the Hood

Before creating our own documentation site, we used a third-party documentation site provider. About a year ago, we had just started up and were a small team, so it made sense to use a third-party service as we wouldn’t have to spend time building everything from scratch, also, we had other crucial things to do.

But as the team gradually increased, managing documentation became tricky and expensive for us.

Not only that, the service provided a very minimal scope of customizing the UI, and we had to often write weird HTML and JS hacks to have our way with the UI/UX.

So it only made sense that we created our own documentation site, as per our needs. Additionally, it would be one more place where our designers could pour their hearts out and highlight the fact that at Dyte even our Docs are a part of our product, being a developer-focused company.
After looking at a bunch of options, we decided to use Docusaurus, as it is not only a widely used documentation site generator but also really extensible.

Section Switcher

Adding the section switcher component was quite easy.

All you had to do was swizzle the DocSidebar component and add the component which we made: ContextSwitcher and Docusaurus’ VersionDropdown to the top of the Sidebar.

Check out the source here.

The logic was pretty straightforward and easy to implement thanks to Docusaurus’ APIs.

Here’s a small snippet which sums up the logic used in the ContextSwitcher, check out the full source here.

const ContextSwitcher = () => {
  const [context, setContext] = useState(CONTEXTS[0]);
  // Docusaurus' API
  const data = useAllDocsData();
  const history = useHistory();

  useEffect(() => {
    const [doc] = getCurrentPageInfo();

    const currContext = getContext(doc);
    if (currContext && currContext.id !== context.id) {
      setContext(currContext);
    }
  }, []);

  const handleChange = (newValue) => {
    setContext(newValue);

    const [, ...docPath] = getCurrentPageInfo();

    const newDoc = newValue.id;

    let path = `/${newDoc}/${docPath.join('/')}`;

    const lastVersion = data[newDoc].versions.find(
      (version) => version.isLast === true
    );

    if (pathExists(path, lastVersion)) {
      // navigate to same document in the last version
      // append hash to path for navigating to anchor tags, if they exist
      if (window.location.hash) path += window.location.hash;
      history.push(path);
    } else {
      // navigate to the main doc of the last version.
      const { mainDocId } = lastVersion;
      history.push(`/${newDoc}/${mainDocId}`);
    }
  };

  // render UI
}

Styling

For styling, we used Tailwind CSS, a utility-first CSS framework - because I absolutely love designing with Tailwind!

Though, it was tricky to use Tailwind in Docusaurus because Docusaurus has its own CSS, which would be overridden with Tailwind’s preflight styles. We didn’t want this, so we had to disable its preflight styles and write some more CSS classes than we would've usually written with the default setup.

Here’s how to do it:
You’ll have to add the css file as a client module in your docusaurus.config.js:

// docusaurus.config.js
module.exports = {
    // ...
  clientModules: [require.resolve('./src/css/tailwind.css')],
}

You’ll also need to add a docusaurus plugin which will add the tailwindcss plugin to PostCSS.

const tailwindPlugin = (context, options) => {
  return {
    name: 'tailwind-plugin',
    configurePostCss(postcssOptions) {
      postcssOptions.plugins = [
        require('postcss-import'),
        // not required, but useful for writing nested CSS
        require('tailwindcss/nesting'),
        require('tailwindcss'),
        require('autoprefixer'),
      ];
      return postcssOptions;
    },
  };
};

Also don’t forget to add tailwind.config.js to the root of the project, and you’re done!

API Reference

One of our requirements was that we wanted everything in one place, so our users wouldn't have to go back and forth for an API runner or reference page.
We also wanted it to be appealing and customizable so that it looks like it is a part of Dyte Docs.
Therefore we used Stoplight Elements, an interactive API docs component.
But it wasn’t highly customizable, so we had to write some weird css like the following to customize it’s UI.

.sl-overflow-x-hidden.sl-overflow-y-auto.sl-flex-1.sl-w-full.sl-px-24.sl-bg-canvas {
  background-color: var(--docs-color-background);
}

We know it isn't the best practice, but we really didn’t want to fork the entire stoplight elements project and customize it to our needs. Thus we had to take this shortcut.
Also, it was tricky to use Elements because Docusaurus does SSR, so we had to add plugins to polyfill some modules to make it work.

To make Elements work with Docusaurus, we had to use the <BrowsersOnly /> only component. Check out the code here.

Adding this will throw a bunch of webpack related errors, add this Docusaurus plugin to solve them:

const webpackPlugin = (context, options) => {
  return {
    name: 'webpack-plugin',
    configureWebpack(config) {
      return {
        module: {
          rules: [
            {
              test: /\.m?js/,
              resolve: {
                fullySpecified: false,
              },
            },
          ],
        },
        plugins: [
          new ProvidePlugin({
            process: require.resolve('process/browser'),
          }),
        ],
        resolve: {
          fallback: {
            stream: require.resolve('stream-browserify'),
            path: require.resolve('path-browserify'),
            buffer: require.resolve('buffer/'),
          },
          alias: {
            process: 'process/browser.js',
          },
        },
      };
    },
  };
};

Make sure to install these packages too: stream-browserify process buffer path-browserify

How you can make it your own!

Check out the README to see how you can make it your own and how you can add your own content to it.

We also have a de-dyte branch which is removed of all the extra stuff from the main docs.

Contributions Welcome!

If you liked our Docs and are working on it, or you are a customer who spotted a flaw in our docs, please feel free to make contributions by forking the repository and raising a PR.

Also if you need help with anything, you can always reach out to us on our Discord channel. Join us: https://community.dyte.io

Live video is shaping the way the world interacts and we at Dyte are doing our bit to make it more seamless, engaging, and fun. So, if you are building a product that requires the use of live video/audio, do check us out and get started here on your 10,000 free minutes which renew every month. If you have any questions, you can reach us at support@dyte.io or ask our developer community.
Check us out at dyte.io!