How to Run JavaScript Chat and WebRTC Video Calling Samples

To run JavaScript chat and WebRTC video calling samples with QuickBlox, create a QuickBlox application, download or clone the QuickBlox JavaScript SDK samples from GitHub, add your application credentials to the appropriate configuration file, and serve the selected sample locally in your browser.

The samples let you test real-time chat, one-to-one and small-group video calling, large video conferences, and the core JavaScript SDK workflow before integrating these features into your own web application.

This tutorial walks you through each step, from creating a QuickBlox application and downloading the sample code to configuring your credentials and running the samples locally.

Prerequisites

Before you begin, you’ll need:

• A QuickBlox account
• Git, if you plan to clone the repository
• Node.js and npm
• A modern browser such as Chrome, Firefox, Edge, or Safari
• OpenSSL if you need to generate a local SSL certificate
• A code editor
• Camera and microphone access for the video samples

You should also prepare the following test data in your QuickBlox Dashboard:

• At least one test user for the chat and Quickstart samples (Dashboard → Users)
• At least one dialog that includes your test user (Dashboard → Chat → Dialogs)
• A second test user for placing video calls

Without an existing dialog, samples that retrieve chat history may fail when they attempt to load dialogs. The WebRTC and Video Conference samples also require browser permission to access the camera and microphone.

Create a QuickBlox Application

First, create a QuickBlox application to obtain the credentials required by the JavaScript samples.

1. Register or sign in to the QuickBlox Dashboard.

2. Create an app by clicking the New app button

3. Enter the required information about your application or organization and click Add

4. Navigate to Dashboard → YOUR_APP → Overview and copy the following credentials:

• Application ID
• Authorization Key
• Authorization Secret
• Account Key

You’ll add these values to the sample configuration files later in the tutorial.

Download the QuickBlox JavaScript SDK Samples

The JavaScript sample applications are included in the QuickBlox JavaScript SDK repository on GitHub.

Clone the Repository with Git

Run:

git clone git@github.com:QuickBlox/quickblox-javascript-sdk.git

Download the Repository as a ZIP File

Alternatively:

1. Open the QuickBlox JavaScript SDK repository on GitHub.

2. Select Code.

3. Select Download ZIP.

4. Extract the downloaded archive.

Choose the Sample You Want to Run

The repository includes several JavaScript samples:

The standard WebRTC sample is intended for one-to-one calls and smaller group calls of up to 10 participants. The Video Conference sample uses a separate conference server and is intended for larger calls.

Run the JavaScript Chat Sample

The Chat sample provides a browser-based interface for testing QuickBlox real-time messaging.

Chat Sample Project Structure

The main files are organized as follows:

samples/chat/

├── index.html

├── css/

├── img/

├── fonts/

└── js/

    ├── QBconfig.js

    ├── app.js

    ├── login.js

    ├── dialog.js

    ├── message.js

    ├── listeners.js

    ├── user.js

    ├── modal.js

    ├── route.js

    └── helpers.js

 

For basic configuration, the only file you need to edit is:

samples/chat/js/QBconfig.js

Add Your QuickBlox Credentials

Open QBconfig.js and add the credentials from your QuickBlox Dashboard:

var QBconfig = {

  credentials: {

    appId: '',

    authKey: '',

    authSecret: '',

    accountKey: ''

  }

};

 

Make sure the credentials correspond to the QuickBlox application you created earlier.

Start a Local Web Server

From the root of the downloaded repository, run:

npx http-server .

The http-server package will be downloaded automatically the first time you run the command.

Open the Chat sample in your browser:

http://localhost:8080/samples/chat

You can now sign in with your QuickBlox test user and begin testing chat functionality.

Run the WebRTC Video Calling Sample

The WebRTC sample combines chat with one-to-one and small-group video calling.

Use this sample when your application needs both messaging and regular video calls in the same interface.

WebRTC Sample Project Structure

samples/webrtc/

├── index.html

├── config.js

├── styles.css

├── audio/

├── images/

├── libs/

└── js/

The only configuration file you need to edit is:

samples/webrtc/config.js

Add Your QuickBlox Credentials

Open config.js and add your application credentials:

const creds = {

  appId: '',

  authKey: '',

  authSecret: '',

  accountKey: ''

};

Create an SSL Certificate

The WebRTC sample should be served over HTTPS so the browser can securely grant access to the camera and microphone.

If you don’t already have a local certificate, follow the instructions in the Create a Local SSL Certificate section later in this tutorial.

Place these files in the root of the repository:

cert.pem

key.pem

Start the HTTPS Server

From the repository root, run:

npx http-server -S -C cert.pem .

Open:

https://localhost:8080/samples/webrtc

Your browser will display a warning because the certificate is self-signed. Accept the warning, continue to the sample, and allow camera and microphone access.

You can then sign in as one test user and place a call to another QuickBlox test user.

Run the Video Conference Sample

The Video Conference sample is intended for calls with more than 10 participants.

It uses a separate conference server, API, and signaling system from the standard QuickBlox chat and WebRTC stack. For chat with one-to-one or small-group calling, use the WebRTC sample instead.

Video Conference Sample Project Structure

samples/video_conferencing/

├── index.html

├── css/

├── images/

├── libs/

└── js/

    ├── config/

    │   └── apps.js

    ├── connection.js

    ├── dialogs.js

    ├── messages.js

    ├── users.js

    ├── helpers.js

    ├── ui_helpers.js

    └── video/

The only file you need to edit is:

samples/video_conferencing/js/config/apps.js

Add Your QuickBlox Credentials

Open apps.js and enter your application credentials:

var creds = {

  appId: '',

  authKey: '',

  authSecret: '',

  accountKey: ''

};

Start the HTTPS Server

Place cert.pem and key.pem in the repository root, then run:

npx http-server -S -C cert.pem .

Add the Conference Server Endpoint

Open the sample using the conference server endpoint as a URL parameter:

https://localhost:8080/samples/video_conferencing/?server=wss://your_conferencing_server_url

Replace the example host with the conference server that corresponds to your QuickBlox deployment region.

If you don’t know which conference server URL to use, contact QuickBlox Support.

Run the JavaScript Quickstart Sample

The Quickstart sample is the fastest way to verify your credentials and test the main QuickBlox JavaScript SDK workflow.

• It runs the following sequence:
• Initialize the SDK.
• Create an application session.
• Log in a test user.
• Connect to the chat server.
• Retrieve dialogs.
• Retrieve recent messages.
• Send a test message.
• Disconnect from chat.

Quickstart Project Structure

samples/quickstart/

├── index.html

├── basic.html

└── token-based.html

The basic Quickstart sample does not use a separate configuration file. Instead, you add your credentials and test-user details directly to basic.html.

Configure the Basic Quickstart Sample

Open:

samples/quickstart/basic.html

Find the CREDS and USER objects and enter your details:

var CREDS = {

  appId: 12345,

  authKey: 'your_auth_key',

  authSecret: 'your_auth_secret',

  accountKey: 'your_account_key'

};

 

var USER = {

  login: 'testuser',

  password: 'testpassword'

};

Save the file.

You can either open it directly in your browser or serve it from the repository root:

npx http-server .

Then open:

http://localhost:8080/samples/quickstart/basic.html

Open your browser’s Developer Console, select Run, and review the step-by-step output.

A successful run should show that the SDK:

• Initialized successfully

• Created a session

• Logged in the test user

• Connected to chat

• Loaded dialogs

• Loaded messages

• Sent a test message

• Disconnected successfully

If a step fails, the output should identify where the failure occurred. For example:

• Incorrect credentials usually fail during session creation.

• Incorrect user details fail during login.

• Missing dialogs fail when the sample attempts to retrieve a dialog.

The repository also includes:

samples/quickstart/token-based.html

This version demonstrates a token-based workflow in which a backend provides a short-lived token to the frontend. Run basic.html first, then use the token-based sample when you’re ready to avoid exposing the Authorization Secret in client-side code.

Web Server Command Reference

The JavaScript samples use static HTML and JavaScript, so there is no separate build step.

Run a Plain HTTP Server

Use this for the Chat and Quickstart samples:

npx http-server .

The files will usually be available at:

http://localhost:8080

http://127.0.0.1:8080

http://<your_ip>:8080

Run an HTTPS Server

Use this for the WebRTC and Video Conference samples:

npx http-server -S -C cert.pem .

The files will usually be available at:

https://localhost:8080

https://127.0.0.1:8080

https://<your_ip>:8080

Your browser will display a certificate warning the first time you open the local HTTPS address.

Create a Local SSL Certificate

Why You Need a Certificate

The WebRTC and Video Conference samples request access to the browser’s camera and microphone through getUserMedia().

Modern browsers restrict this functionality to secure origins, such as HTTPS or localhost. For local testing, you can generate a self-signed certificate.

A self-signed certificate is suitable for local development, but it should not be used in production.

You’ll generate two files:

cert.pem

key.pem

Both files should be stored in the folder where you run the HTTPS server command, normally the repository root.

Step 1: Check Whether OpenSSL Is Installed

Run:

openssl version

If the command returns a version number, continue to the next step.

Install OpenSSL on Windows

Begin by installing a Windows distribution of OpenSSL using either a package manager or a standalone installer.

Once the installation is complete, open a command prompt and configure the OpenSSL environment for your active session:

set OPENSSL_CONF=C:\OpenSSL-Win64\bin\openssl.cfg

set Path=%Path%;C:\OpenSSL-Win64\bin

For a persistent configuration, add C:\OpenSSL-Win64\bin to your environment variables by navigating to System Properties and selecting Environment Variables.

Install OpenSSL on macOS

With Homebrew installed, run:

brew install openssl

Install OpenSSL on Debian or Ubuntu

Run:

sudo apt update && sudo apt install openssl

For other Linux distributions, use the equivalent package manager.

Step 2: Generate the Certificate and Key

From the folder where you want to create the files, run:

openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem

When OpenSSL asks for the Common Name, enter:

localhost

You can leave the remaining values blank for local development.

After the command completes, confirm that both files have been created:

cert.pem

key.pem

You can inspect the certificate by running:

openssl x509 -in cert.pem -noout -subject -dates

Step 3: Accept the Certificate in Your Browser

Start the HTTPS server:

npx http-server -S -C cert.pem .

Then open:

https://localhost:8080

Your browser will warn that the certificate is not issued by a trusted Certificate Authority. This is expected for a self-signed certificate.

Follow your browser’s option to continue to the local site.

Do not use this certificate for a production deployment.

Troubleshooting

The sample cannot create a session

Check that the following values match your QuickBlox application:

• Application ID
• Authorization Key
• Authorization Secret
• Account Key

Also check for accidental spaces or missing quotation marks in the configuration file.

The test user cannot log in

Confirm that:

• The user exists in the QuickBlox Dashboard.
• The login and password are correct.
• The user belongs to the application associated with your credentials.

The Chat or Quickstart sample cannot load dialogs

Create a dialog in the QuickBlox Dashboard and add your test user to it.

The Quickstart workflow expects at least one dialog when it attempts to retrieve recent messages and send a test message.

The browser cannot access the camera or microphone

Confirm that:

• You’re using HTTPS or localhost.
• You accepted the local certificate warning.
• Camera and microphone permissions are enabled for the browser.
• No other application is currently blocking access to the device.

The HTTPS server does not start

Make sure that both certificate files are in the directory where you run the server command:

cert.pem

key.pem

Then run:

npx http-server -S -C cert.pem .

The browser shows ERR_CERT_COMMON_NAME_INVALID

The certificate may have been created with a Common Name other than localhost.

Generate a new certificate and enter localhost when OpenSSL asks for the Common Name.

The Video Conference sample does not connect

Confirm that:

• You included the server parameter in the URL.
• You’re using the correct conference server for your region.
• Your QuickBlox application and plan support the required conference functionality.

The Dashboard rejects localhost as the application website

The Dashboard rejects localhost as the application website, for example:

http://localhost:8080

or:

http://127.0.0.1:8080

You must use a complete URL. A hostname alone is not sufficient. The Dashboard requires a real domain address or a tunnel to your local machine (e.g. via ngrok).

Next Steps

Now that you’ve successfully run the JavaScript samples, use these resources to learn more about the SDK and begin building your own implementation:

• QuickBlox JavaScript SDK documentation →  docs.quickblox.com/sdks/js-quick-start

• QuickBlox JavaScript SDK source code on GitHub → github.com/QuickBlox/quickblox-javascript-sdk

• QuickBlox JavaScript Chat Sample on GitHub → github.com/QuickBlox/quickblox-javascript-sdk/tree/gh-pages/samples/chat

• QuickBlox React UI Kit — pre-built React components for the chat interface → npmjs.com/package/quickblox-react-ui-kit

• QuickBlox Developer Discord Community — connect with other developers and ask questions → https://discord.com/invite/3cKRunq8ZZ

• QuickBlox Support — get help with technical configuration help.quickblox.com/