Skip to main content

Using Video with Vue 3

Using the SignalWire Video API and Javascript SDK you can quickly build an app that leverages powerful video conferencing features along with Room Previews and fully customize the experience for your users.

The end result: screen showing the list of rooms.

This sample application relies on the SignalWire Video API and the SignalWire Javascript SDK. We do all the heavy lifting so that all you need to do is focus on building your application.

Table of Contents

Features

The in-call screen.
  • Join or Create temporary Room Sessions
  • Meeting controls such as Mute Audio/Video and Share Screen
  • Change Camera and Microphone devices
  • Change Room Layouts
  • List Rooms with Room Previews
  • Join Active Rooms from the homepage

Getting Started

The application has two parts, the frontend and the backend. They're built to run independently but the frontend does require the backend in order to make requests to the SignalWire Video API. Instructions are provided for running each independently in a virtual environment using Replit or running locally on your machine.

Local Setup

This guide walks you through setting up the example application using a terminal and NodeJS. At the time of writing this it has been tested on OSX and Linux.

These instructions assume you have basic understanding of working within a terminal and have NodeJS, NPM and Git installed.

Before beginning you'll need to create a SignalWire space and obtain some credentials. See Getting Started with the SignalWire Video API.

Once you have credentials, start by cloning this repository locally.

git clone https://github.com/signalwire/signalwire-video-vuejs

Backend

  1. Install node modules for the backend.
cd signalwire-video-vuejs/
cd ../backend
npm install
  1. Configure your SignalWire Space URL, Project-ID and API-Token in an environment file named .env in the backend directory. Optionally you can change the Port that the backend is served on from here as well.

If running both the frontend and backend on the same machine, please avoid using port 8080.

USERNAME=<Project ID>
API_TOKEN=<API-TOKEN>
API_URL=https://<Space Name>.signalwire.com/api/video
PORT=3080
  1. Start the backend server using NodeJS.
node index.js

Frontend

  1. Open another terminal, navigate to the repository, and install node modules for the frontend.
cd signalwire-video-vuejs/
cd frontend/
npm install
  1. Optionally configure an environment file named .env in the frontend directory. By default the project expects the backend URL to be hosted at localhost:3080. You can customize this with the VUE_APP_URL environment variable.
VUE_APP_URL=http://backend.com
  1. You can serve the frontend with a hot-reload (updates on code changes) using the following command.
npm run serve

The application should then be hosted at localhost:8080.

Using Replit

This guide walks you through using Replit, a cloud based coding environment, to run both the backend and the frontend. The end result is a hosted instance with a link that can be shared for others to use.

Replit.

Replit is a cloud based coding environment. It lets you upload code and run it in a virtual machine from your browser, for free! We have two premade Replits that you can fork to run the frontend and the backend. There are some variables that need to be set first. This guide walks you through that.

Before beginning you'll need to create a SignalWire space and obtain some credentials. See Getting Started with the SignalWire Video API.

Replit Backend

  1. Navigate to https://replit.com/@virgilvox/signalwire-video-vuejs-backend
  2. Click on fork.
  3. From the side menu select the lock shaped icon to open the Secrets (Environment Variables) options.
Replit "secrets" settings.
  1. Click on "Edit raw JSON". Paste in the following and add your own credentials.
{
"USERNAME": "",
"API_TOKEN": "",
"API_URL": "https://<your space>.signalwire.com/api/video",
"PORT": "8080"
}
"Secrets" configuration.
  1. Click Run to start the server.
  2. One running, the preview browser will display a link in its address bar. Copy this, you'll need it to configure the backend.

Replit Frontend

  1. Navigate to https://replit.com/@virgilvox/signalwire-video-vuejs-frontend

  2. Click on fork.

  3. From the side menu select the lock shaped icon to open the Secrets (Environment Variables) options.

  4. Add a new secret with the key "VUE_APP_URL". Paste in the URL for the backend and click "Add new secret".

  5. Click Run.

Frontend Docs

The frontend is built in Vue 3. This doc goes over all the components, framework specific details, and the api helper class.

Frontend Docs

Backend Docs

The backend is a simple NodeJS Express server. It interacts with the SignalWire API.

Backend Docs