Skip to main content

Programmable Video Conferences

Create and deploy a no-code or low-code video conference room

The SignalWire platform offers powerful video conferencing tools built on the MCU (Multipoint Control Unit) architecture to enable low-latency audio/video conferencing. Each participant sends one video stream to SignalWire and receives one stream in return, reducing the load on the end-user and ensuring all clients see the same video feed.

Create a room​

To get started, login to the SignalWire Dashboard. If you have multiple Spaces, select the one to which you want to associate this video conference.

Open the Resources tab​

No Resources tab?

If you don't see the Resources tab, your SignalWire Space is on the Legacy Dashboard. Refer to the Legacy section of this guide for instructions for your Dashboard and information about the migration.

The Resources tab of the SignalWire Dashboard.

Create and manage all Resources from the SignalWire Dashboard.

From within the Resources tab, select Add New.

A list of Resources in a SignalWire Space.

Resources

Learn more about Resources, the interoperable communications building blocks that interact with Subscribers in SignalWire's Call Fabric architecture.

Select 'Conference Room'​

The Resource picker menu.

Select 'Conference Room' from the Resources menu.

Select UI​

In the final step, name the room and select whether to use the pre-built UI or build a room from scratch.

Embed the conference​

Now you're ready to embed the video room code in your website. Here are some examples on how to use the code that we have copied, depending on the technology behind your website. Refer to your site's documentation for comprehensive instructions on embedding code.

Paste the snippet of code inside the <body> of your page, in the position where you want it to appear. If you need to, you can control the size and position of the widget by wrapping it in a properly styled div element. For example, to make sure that the size is exactly 400px x 250px and that the widget is horizontally centered:

<div style="margin: 0 auto; width: 400px; height: 250px;">
  [paste here your snippet of code]
</div>

To learn more about the ways you can make more advanced changes to your code snippet, consult the Video Conference Technical Reference.

Integrating video meetings in WordPress to meet with your team or your customers has never been easier than with Video Conferences! You can add your Video Conference guest code to any page or post, using the Custom HTML block. Paste the code snippet in the HTML block, and you are ready to go.

An animated Gif showing a user adding a Custom HTML block with the Video Conference guest code to a WordPress page.

How to add a Custom HTML Block to a page or post.

Restricting access to your moderator page​

Since we do not want everyone to have Moderator permissions, we can create an extra page, for internal use only, by making it Private and only visible to Administrators and Editors.

An animated Gif showing a private WordPress page with the Moderator Video Conference code in an HTML block.

How to make a page private.

Restricting access to your guest page​

You can password-protect your guest page to only allow certain people to join in. This has the benefit of having a consistent meeting link, but with the added benefit of changing the page password as needed.

An animated Gif showing a password-protected WordPress page with the Guest Video Conference code in an HTML block.

How to password-protect a page.

Conferencing with readers in Ghost is very simple. To turn any post into a meeting/conference page all you need to do is add the guest code to an HTML card.

An animated Gif showing a user adding an HTML block to a post in the Ghost CMS. The user pastes the Video Conference Guest code into this HTML block.

How to add the code snippet to a post using the HTML card.

Moderator and Guest permissions​

Moderators and Guests have different permissions. Make sure to select the right one when copying the embed code.

GuestsModerators
Join/Leave Room✅✅
Mute/Unmute Audio✅✅
Start/Stop Webcam Video✅✅
Share Screen❌✅
Mute/Unmute Other Users' Audio❌✅
Start/Stop Other Users' Video❌✅
Start/Stop Recording The Room❌✅
Moderator Code Snippets and Publicly Available Pages

Since your room's Moderator code snippet gives website visitors permissions over other users, you should never copy it to publicly available pages. Essentially, you could decide to embed these into different pages of your website, one internal (for the Moderator code snippet) and one accessible by the public (for Guests).

Logs​

Access logs for your video conference room in the unified Logs tab of the Dashboard sidebar.

Recordings​

Access recordings for your video conference room in the unified Storage tab of the Dashboard sidebar.

  • Select Storage in the left sidebar.
  • Select Recordings from the menu.

In the Legacy Dashboard​

No Resources tab? Your SignalWire Space is on the Legacy Dashboard.

Learn about the New Dashboard and how to update, or follow the instructions below to create a Video Conference in the Legacy Dashboard.

The New Dashboard migration

Learn about changes to the SignalWire Dashboard, what version your Space is on, and how to migrate.

Open the Video tab​

In this tab of your SignalWire Dashboard, you can visually track your Video API usage over the previous week by total minutes, cost, and video quality with the usage graphs. Under the charts, you will find two helpful links to create videoconference rooms via different methods.

Create a video room​

Both links under the graph will take you to a form to create a New Video Conference Room. You have the choice to create a new room with a pre-built UI or without. The pre-built UI option is a pre-built videoconferencing room that you can use with no coding required beyond copy-pasting a code snippet into your application.

The second option will create the same kind of video room created programmatically with a POST request to <YOUR SPACE>.signalwire.com/api/video/rooms.

Copy embed code​

After selecting your room type, click on the dropdown menu next to Moderator Embed Code and click on Guest Embed Code to copy the code. A screen like the following will open:

A screenshot of the Guest Embed Code dialog. Users can copy the provided embed code.

Guest Embed Code Snippet

You can copy either the code for guests, or the code for accessing the room with moderator permissions. See the Conferences menu reference for a detailed explanation of the different copyable fields.

Embed the room​

Your video room is ready for use! Refer to the main guide's instructions to embed your new room on your website.

Logs menu​

This tab is where you can find a detailed list of all video room sessions. This includes Video Conference rooms as well as API rooms. If a video session is in progress, hovering over the "In Progress" status will display the room preview as long as previews are enabled. Clicking on a session opens even more details on the room session including all of the room settings and members.

Conferences menu​

Here is where all of your existing Video Conference rooms are listed.

Selecting an existing room will open its detailed settings, which you can change as often as you like. Be sure to click the save button at the bottom to save any changes. You will also see a room preview here if there is a video session in progress.

A screenshot showing the overview of a Video Conference called 'CloudEngineering'. The left pane shows a room description with stock text. A participant counter shows that 0 of 200 maximum participants are in the Conference. Buttons show options to 'Join Room as Moderator', 'Copy Moderator Link', 'Moderator Embed Code', 'Copy Moderator Token', and 'Reset Tokens'. A preview of the Video Conference is shown on the right.

Overview screen for a Video Conference.

On the right, you see a preview of the room's content. Note that this will be enabled only if you have enabled room previews. On the left, you find buttons for using your room.

Copyable fields​

Pressing this button allows you to join the video room with moderator permissions. Pressing the downwards arrow lets you join with guest permissions instead.

Pressing this button copies a link for joining the room with moderator permissions. Pressing the downwards arrow lets you copy the link for joining with guest permissions instead.

Pressing this button copies a code snippet for embedding the video room into any web page. By default, the code snippet will make users join with moderator permissions. Pressing the downwards arrow lets you copy the code for joining with guest permissions instead. You could decide to embed these into different pages of your website, one internal and one accessible by the public.

Pressing this button copies the room token which can be used programmatically to grant access to the room with moderator permissions. Pressing the downwards arrow lets you copy the token for joining with guest permissions instead. You may need these tokens if you alter the embedded code.

Pressing this button will reset the security tokens associated with a room. Press this button if you want to disable existing access to the room. Note that resetting the tokens will require you to update all the code snippets and links that you previously shared since they will stop working.

Settings menu​

In this tab, you will find options to customize how your room is built.

This screenshot shows the configuration options for Video Conferences. At the top of the screen, there are two tabs: 'Settings' and 'Appearance'. Under the selected 'Settings' tab, there are the following options. 'Availability' sets the dates and times that members will be able to enter the room. There are also settings for Quality, Layout, Size, and Record on Start.

Configuration options for Video Conferences.

Availability sets a specific time the room will be accessible. If you want to limit accessibility to a specific event time, input the starting and ending date and time using your local format or click on the calendar icon to set them.

Quality allows you to set a lower or higher video quality depending on your bandwidth and system capabilities.

Layout controls the arrangement of participant video tiles. This will be the same layout for all users. The default is a responsive grid.

Size limits the number of participants allowed to join the room. A small size will cap the number of participants at 10, medium size at 50, and large size at 300. After the limit is reached, no other participants can join the room.

Record on Start starts a recording as soon as the room is opened. Recordings are accessible later in the Recordings tab in the Video section of your SignalWire Space.

Enable Room Preview allows a short recording of the room content to be recorded and displayed to participants before joining the room.

Appearance menu​

In this tab, you can customize the colors used in your room. There is a color picker for Background, Foreground, Primary, Success Indications, and Error Indications. There are two color schemes available: light and dark, and you can change them accordingly so they fit the look of your web page depending on the time of day. You can use the preview to test out your choices.

A screenshot of the Appearance tab of a Video Conference. Users can edit the Background, Foreground, Primary, Success, and Negative colors for both Light and Dark color schemes with a live preview.

Video Conference Appearance Tab

You can create a new Video Conference room by clicking the "+ New" blue button on the top right. You have the option of creating a room with a prebuilt UI or without. If you choose a room with a prebuilt UI, all you need to do is copy the embeddable code from the room's details page and drop it into your application. For more information on rooms with a prebuilt UI, see our Video Conferences guide and our guide on Integrating Video Conferences With Any Website.

Without the prebuilt UI, you will access the videoconference room through your application with a room token request which includes the room's name.

const options = {
  method: "POST",
  headers: { Accept: "application/json", "Content-Type": "application/json" },
  body: JSON.stringify({
    room_name: "my_room",
    user_name: "John Smith",
    permissions: [" "],
    auto_create_room: true,
    enable_room_previews: true,
    room_display_name: "My Room",
  }),
};

fetch("https://<YOUR SPACE URL>/api/video/room_tokens", options)
  .then((response) => response.json())
  .then((response) => console.log(response))
  .catch((err) => console.error(err));

You can then use that token to programmatically start a Room Session, join the room, and display the video in the appropriate div in your application. You can find a full guide to using a video room like this in the Simple Video Demo.

A Note on API Rooms

There are three ways to create API Rooms: from your SignalWire Space, with an API call, or auto-created when a room token is requested for a room that does not yet exist. The first two methods create API Rooms that persist and are listed in this Conferences tab of your SignalWire Video page. They remain accessible until they are manually deleted. However, a room that is auto-created is automatically deleted when it is closed.

Recordings​

In this tab, you can access recording details, download the recording, or delete it.

Identify your Dashboard and select between Legacy and New UIs using the tabs below.

The main sidebar menu of the new SignalWire Space Dashboard UI.

The redesigned main menu.

The selection menu when a new Resource is created.

The new SignalWire Dashboard features a streamlined sidebar menu. Many items are now located in the unified Resource menu.

Resources that were previously accessible in the sidebar of the legacy UI are now located in the unified Resource menu.