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.
docker run --network host canyan/janus-gateway
Start a vanilla angular app. We don’t need routing and it doesn’t matter what stylesheet format you choose.
ng new videoroom-demo
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.component.htmllink in the
app.component.tsinclude janus configuration variables
app.component.scssstyle the component so the
janus-videoroomcomponent takes up the full window
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.