NEWDolby Interactivity APIs are now the Dolby.io Communications APIs Learn More >
X

Meet Me at the Water Cooler

This sample React Web project demonstrates a different kind of video meeting experience. This app illustrates what it would be like to meet at a virtual water cooler. This app is quick start example part of a larger Geospatial Conferencing Experience hosted on meet.dolby.io.

Overview

This sample React Web project demonstrates a different kind of video meeting experience. This app illustrates what it would be like to meet at a virtual water cooler. This app is quick start example part of a larger Geospatial Conferencing Experience hosted on meet.dolby.io.

As users join the app they are rendered as avatars that can move about the space using the arrow buttons. The space is represented as a floor plan with hex cells to represent conversation areas. As new users join the app they can navigate to a conversation area and chat with another user in that same cell.

Since users can easily move between cells, it's easy to see someone's avatar and and seek them out for a short conversation. The core idea is user can meet at the water cooler and other areas to have a virtual conversation that more naturally mimics what happens in real life.

Features Tech Stack
  • Voice and video Conferencing Communications APIs
  • Audio Muting
  • Audio and video Start / Stop
  • Audio and video Setting
  • Sharable link - URL Based Conference ID
  • HTML
  • JavaScript
  • CSS
  • React
  • Firebase

Key Concepts

Enabling control over the conference audio experience by muting the other participants audio when the user leaves a conversation area is accomplished by the useStopAudio method located in components/WaterCooler/useStopAudio.js in the project.

The core code to control the conference audio is seen below in lines 21-27. To manage the audio of a participant you pass the participant object to the conference.stopAudio(participant) and conference.startAudio(participant) methods of the Dolby.io Communications API.

import { useEffect } from 'react';
import { conference } from '@voxeet/voxeet-web-sdk';

// Stop audio for remote users who are not in the same hexagon.
// Start audio for remote users who are in the same hexagon.
// See reference:
// https://docs.dolby.io/interactivity/docs/js-client-sdk-conferenceservice#stopaudio
export const useStopAudio = ({ joinInfo, activeHexId, remotePositions }) => {
  useEffect(() => {
    // Don't try to mute/unmute until after we've joined the meeting.
    if (!joinInfo) return;

    // Figure out who to mute and who not to mute.
    for (const { hexId, id } of remotePositions) {
      //        console.log(hexId,activeHexId);
      //        console.log(hexId === activeHexId);
      const participant = conference.participants.get(id);
      // Guard against stale Firebase entries.
      if (participant) {
        // If the remote participant is in the same hexagon,
        if (hexId === activeHexId) {
          // let their audio through.
          conference.startAudio(participant);
        } else {
          // Otherwise stop their audio.
          conference.stopAudio(participant);
        }
      }
    }
  }, [joinInfo, activeHexId, remotePositions]);
};

👍

Name Change: The Dolby.io Communications APIs

The Dolby.io Communications APIs in the JavaScript SDK were previously known as Voxeet; Thus you'll still see code references like @voxeet/voxeet-web-sdk' in our sample code:

import { conference } from '@voxeet/voxeet-web-sdk';

📘

Meet.Dolby.io Geospatial Conferencing Experience

This is a demonstration website that displays a map that users can search for a conference by location. Some locations are "easter eggs" that load a more immersive video conferencing experience.

You'll need an invitation to access this demo website. Please contact [email protected] to obtain instructions on how to access this site. Include "Hackathon Invitation" in the subject.

To try out the experience for yourself, visit this link, and invite a friend to join you at that same location.


Did this page help you?