Implement 100ms Video Call SDK in a Laravel App

The 100ms SDK is a powerful tool for integrating real-time video and audio capabilities into your applications. With the new 100ms-laravel package, integrating the 100ms SDK into your Laravel application has never been easier. I’ve prepared this guide to walk you through the process of installing, configuring, and using the package in your Laravel project.

Prerequisites

Before starting, ensure you have the following:

1. Laravel Application: A Laravel project set up (version 8 or later). Laravel provides a robust framework that simplifies application development with its built-in features and tools.
2. 100ms API Credentials: Obtain your API Key and API Secret from the 100ms Dashboard. These credentials are used to authenticate your application with the 100ms API.
3. PHP 8.0+: Ensure your PHP version meets the requirements to take advantage of the latest features and security updates.

Step 1: Install the 100ms Laravel Package

To use the 100ms-laravel package, we first need to install it via Composer. Composer is a dependency manager for PHP that helps manage libraries and their dependencies.

Run the following command in your Laravel project directory:

composer require theafolayan/100ms-laravel

This command fetches the package and adds it to your Laravel project, making it available for use.

Step 2: Publish the Configuration File

Publishing the configuration file will allow us to customize the package settings, including API credentials and base URL.

Run:

php artisan vendor:publish --tag=100ms-config

Why do this? Laravel uses a configuration-driven approach, and this step generates a configuration file (config/100ms.php) where you can store your 100ms API credentials and base URL.

Check the generated config/100ms.php file:

return [
    'api_key' => env('HMS_API_KEY', ''),
    'api_secret' => env('HMS_API_SECRET', ''),
    'base_url' => env('HMS_BASE_URL', 'https://api.100ms.live/v2'),
];

Step 3: Set Environment Variables

To keep your API credentials secure and flexible across environments (development, staging, production), Laravel uses a .env file to store sensitive data.

Open the .env file in the root of your Laravel project and add the following lines:

HMS_API_KEY=your_api_key
HMS_API_SECRET=your_api_secret
HMS_BASE_URL=https://api.100ms.live/v2

Why use environment variables? Using this approach ensures that sensitive information is not hardcoded into your application, making it easier to manage and more secure.

Step 4: Using the Package

The 100ms-laravel package provides a straightforward way to interact with the 100ms API. Below are detailed examples of how to use its features.

Create a Room

Rooms are the foundation of 100ms, where participants connect for video or audio interactions. To create a room, you can use the Hms facade provided by the package.

Add the following route in routes/web.php:

use TheAfolayan\HmsLaravel\Facades\Hms;

Route::get('/create-room', function () {
    $response = Hms::createRoom([
        'name' => 'Test Room',
        'template' => 'group_call',
    ]);

    return response()->json($response);
});

Here’s what’s happening:

• The Hms::createRoom method sends a request to the 100ms API to create a new room.
• The name specifies the room name.
• The template determines the room configuration (e.g., group_call).

Visit http://localhost:8000/create-room to test room creation. A JSON response with the room details confirms success.

Generate a Room Code

Room codes simplify joining prebuilt 100ms rooms. To generate a room code, use the following route:

Route::get('/generate-room-code/{roomId}', function ($roomId) {
    $response = Hms::generateRoomCode($roomId, [
        'role' => 'guest',
        'expiry' => time() + (60 * 30), // Code valid for 30 minutes
    ]);

    return response()->json($response);
});

Here’s what’s happening:

• The generateRoomCode method sends a request to create a room code for the given roomId.
• The role specifies the user’s role in the room (e.g., guest or host).
• The expiry sets how long the code is valid.

Visit http://localhost:8000/generate-room-code/{roomId} to test room code generation. Replace {roomId} with a valid room ID.

Step 5: Testing the Integration

Start the Laravel development server by running:

php artisan serve

Test Creating a Room

Visit the /create-room endpoint in your browser:

http://localhost:8000/create-room

You should see a JSON response with the room details.

Test Generating a Room Code

Visit the /generate-room-code/{roomId} endpoint in your browser:

http://localhost:8000/generate-room-code/{roomId}

Replace {roomId} with a valid room ID. You should see a JSON response with the generated room code.

Bonus: Caching Management Tokens

The 100ms-laravel package includes caching for management tokens to improve performance by reducing the need for frequent token generation.

How It Works

• When you make an API request, the package first checks if a valid token exists in the cache.
• If no token is found, it generates a new one and stores it in the cache for future use.

Clearing the Cache

During testing or debugging, you may need to clear the cached token. Use the following code to clear the token cache:

use Illuminate\Support\Facades\Cache;

Cache::forget('100ms_management_token');

This ensures that the next API request generates a fresh token.