@4players/odin-communicator

v1.1.1

Published

3 months ago

ODIN Communicator is a modern, drop-in voice chat widget powered by the [ODIN Web SDK](https://docs.4players.io/voice/web/). It provides high-quality, low-latency voice communication for your web applications, allowing users to join rooms and chat in real

0High
0Medium
0Low

svenpaulsen

pschuster

ODIN Communicator

ODIN Communicator is a modern, drop-in voice chat widget powered by the ODIN Web SDK. It provides high-quality, low-latency voice communication for your web applications, allowing users to join rooms and chat in real-time.

Features

Real-time Voice Chat: Crystal clear audio communication.
Room-based: Users can join different rooms by simply changing the Room ID.
Modern UI: Built with React and TailwindCSS for a sleek, responsive design.
Visual Feedback: Audio visualizers and talking indicators.
Easy Integration: Designed to be easily embedded into existing projects as a standalone widget.
Customizable: Supports custom color themes to match your branding.

Prerequisites

Node.js (v16 or higher recommended)
npm (Node Package Manager)

Installation

Clone the repository:
```
git clone <repository-url>
```
Navigate to the project directory:
```
cd odin-communicator
```
Install dependencies:
```
npm install
```

Building the Widget

To create the standalone widget file that can be embedded in other websites, run the build command:

npm run build

This will generate a dist/ folder containing the odin-communicator.js file (and other formats).

NPM Installation & Usage

You can install the package via NPM to integrate it into your React, Vue, or other web applications (including Docusaurus).

npm install @4players/odin-communicator

React / Docusaurus Example

import React, { useEffect } from "react";
import { mountOdinCommunicator } from "@4players/odin-communicator";

const VoiceChatWidget = () => {
  useEffect(() => {
    // Mount the communicator when the component mounts
    const unmount = mountOdinCommunicator("odin-widget-container", {
      apiKey: "YOUR_API_KEY",
      roomId: "my-room",
    });

    // Cleanup when the component unmounts
    return () => {
      if (unmount) unmount();
    };
  }, []);

  return <div id="odin-widget-container" style={{ height: "500px" }}></div>;
};

export default VoiceChatWidget;

Manual Integration (Script Tag)

You can easily integrate the ODIN Communicator into any HTML page.

Include the Script: Import the mountOdinCommunicator function from the built file.
Create a Container: Add a div element where you want the widget to appear.
Initialize: Call the mount function with your configuration.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Website</title>
  </head>
  <body>
    <!-- 1. The Container -->
    <div id="odin-widget-container"></div>

    <!-- 2. The Script -->
    <script type="module">
      import { mountOdinCommunicator } from "./dist/odin-communicator.js";

      // 3. Mount the widget
      mountOdinCommunicator(
        "odin-widget-container",
        {
          // Configuration
          apiKey: "YOUR_ROOMS_API_KEY",
          secret: "YOUR_ROOMS_SECRET",
          gateway: "https://gateway.odin.4players.io",
          roomId: "my-community-room",
          title: "Join Our Voice Chat", // Optional: Custom title
          description: "Connect with other players now!", // Optional: Custom description
          connectBtnText: "Start Chatting", // Optional: Custom connect button text
        },
        {
          // Optional: Custom Styles
          colors: {
            primary: "#ff00ff", // Custom primary color
            secondary: "#00ffff", // Custom secondary color
          },
        }
      );
    </script>
  </body>
</html>

Configuration

API Key and Secret

You need an Rooms API Key to use this widhet. You can get a free key by creating a Rooms instance at www.rooms.chat.

After the Rooms instance is created, you can navigate to the following URL to get your Rooms API-Key: https://app.netplay-config.4players.de/rooms

Gateway

The gateway determines the ODIN gateway to connect to. It's required for token creation. Make sure you use the same gateway as configured in the Rooms instance (when setting it up).

Room ID

The roomId determines the channel users join. You can set this dynamically to create different rooms for different pages or groups.

UI Configuration

You can customize the initial text and appearance displayed in the widget by passing title, description, connectBtnText, and height in the configuration object (the second argument).

title: The main heading text (default: "Join Channel").
description: The subtext below the heading (default: "Experience next-gen voice chat.").
connectBtnText: The text displayed on the connect button (default: "Connect").
height: The height of the widget (default: "500px").

Customization Options

The third argument to mountOdinCommunicator allows you to customize the appearance.

{
    colors: {
        primary: '#...',    // Main accent color
        secondary: '#...',  // Secondary accent color
        background: '#...', // Background color
        panel: '#...',      // Panel background color
        red: '#...'         // Error/Hangup color
    }
}

Development

To run the project locally for development purposes:

npm run dev

This will start a development server where you can work on the React components directly.

ODIN Web SDK

This project is built on top of the ODIN Web SDK. For more deep-dive information on how ODIN works and advanced configuration options, please refer to the official documentation:

ODIN Web SDK Documentation