Angular Videoconference app

Over recent years, and expecially through the pandemic, we’ve seen a large number of new apps launch featuring video rooms. In this guide, we’ll show how to create your own angular webapp with a videoroom component. We assume you’re reasonably comfortable working with the Angular CLI and have installed Docker on your local dev machine.

Janus WebRTC Server

Any video conference app requires backend support. We’ll use the Janus WebRTC Server. You can do a lot with janus, but we’re just going to use the videoroom plugin. The videoroom plugin implements a Selective Forwarding Unit (SFU), which is a common approach to implementing a video conference with multiple attendees.

We’ll use a public docker image to run janus locally (thanks to canyan.io for maintaining this image). Run the following command to launch janus in a local docker container.

docker run --network host canyan/janus-gateway

Angular App

Start a vanilla angular app. We don’t need routing and it doesn’t matter what stylesheet format you choose.

ng new videoroom-demo
cd videoroom-demo

janus-angular

We use the janus-angular package for communicating with the Janus SFU. Install the package and all dependencies

yarn add janus-angular moment @ngrx/component-store webrtc-adapter

Next, You’ll need to make some minor edits. The embedded gist includes source code for these edits (this won’t work stackblitz because you need a locally running janus gateway).

• app.module.ts import JanusModule
• app.component.html link in the janus-videoroom component
• app.component.ts include janus configuration variables
• app.component.scss style the component so the janus-videoroom component takes up the full window

Next Steps

There are many more features of janus-angular that you can play with on the front end. There is a sample app here that shows off more of the features. Additionally, you can use janus for much more than just a video room. For example, you can use the videoroom plugin’s RTP forwarding to send a live video stream to an arbitrary RTP backend. You could use this to, e.g, make a clone of YouTube live.