Janus Videoroom Component
This is an angular library with features to make it easy to embed a videoroom into any angular app. Once you have a properly configured, public instance of a janus server with the videoroom plugin enabled, this library includes a directive that will connect clients in a videoroom.
Why build this?
When building a product that incorporates a videoroom, the interesting part of the product is how it helps users find, create, edit, join, and view videorooms. That's what gives the product it's competitive advantage. However, when we started working on our own product, we spent the vast majority of our engineering time working with low level webrtc signalling. This mismatch led us to believe there's room for improvement in this field. Our goal is to help other developers spend more time on their app and less time on webrtc details.
The Janus documentation and demos are great for understanding how the service works. However, the sample client code is not easy to adopt into your own application. This makes it so that developers need to write a lot of the low level code themselves and understand many of the details of the videoroom plugin. While more knowledge is always better than less, we believe it's possible to implement a videoroom without requiring the developer to understand intimate details of webrtc.
What does this implement?
The core function provided by this library is a component called JanusVideoroomComponent
that implements a videoroom. The selector for the component is janus-videoroom
. You can have a fully functional videoroom only specifying the URL of the janus gateway and the room ID. The videoroom supports the following features:
-
Room ID You can specify any
roomId
that is available on the janus gateway. - http and websocket connections You can specify an http and/or websocket URL. The component will prefer the websocket URL and fallback to the http URL.
- PINs You can specify a PIN for any room that requires it.
- Auto Resize Videos are automatically enlarged to take up the maximum screen real estate upon changing the size or orientation of the screen.
- Multiple Aspect Ratios Different source video aspect ratios are handled smoothly.
- Display Names You can specify the display name for anyone joining a videoroom.
- Publishers or Read Only Users Users can be publishers, who will send a feed from their camera/microphone, or they can be read only users that don't transmit anything.
- Simulcast Supported clients will publish 3 different quality video feeds and clients will dynamically pick the appropriate stream based on current network conditions
- Devices Device IDs can be input and dynamically changed so that users can change which input or output devices to use.
- ICE Servers In addition the the janus gateway, custom STUN/TURN servers can be specified.
- Mute Audio Audio can be muted for publishers.
- Supported Platforms Tested and works on Chrome (Windows, macOS, and android) and Safari (macOS and iOS).
What does this not implement?
In the spirit of doing one thing well, the janus-videoroom
component does not
implement many necessary parts of an application. For example, the component
supports muting the feed of a publisher. However, it does not implement a mute
button. The burden is put on the developer to implement the UX around how to
mute a feed.
The following is a non-exhaustive list of necessary items for most webapps that
are not implemented by JanusVideoroomComponent
. These will have to be
implemented by the application outside of this library.
- Janus room configuration Create/edit/delete operations on janus rooms are not supported
- UI elements for interaction Mute, change device, etc. are supported by the component, but it does not include UI elements for these.
- User Authentication
- Backend Storage
- Janus gateway deployment
How to use
Installation
Dependencies
janus-angular
has 3 peer dependencies: webrtc-adapter
, @ngrx/component-store
, and moment
. These can be installed by yarn
yarn add webrtc-adapter @ngrx/component-store moment
janus-angular
Installing Installation is available through yarn
yarn add janus-angular
Including the module
The JanusModule
must be included in your imports
for the module in which you wish to use the directive
import { JanusModule } from 'janus-angular';
...
@NgModule({
declarations: [
...
],
imports: [
...
JanusModule,
],
})
export class YourAppModule { }
Using the directive
The following minimal component will work with the demo deploy of janus.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['./app.component.scss'],
template: `
<janus-videoroom
[roomId]='roomId'
[wsUrl]='wsUrl'
>
</janus-videoroom>
`
})
export class AppComponent {
roomId = 1234;
wsUrl = 'wss://janus.conf.meetecho.com/ws';
}
Inputs/Outputs for the component are documented in the API docs on this site. Page for the component docs is here
Sample Application
We have written a small, sample application to show how to use the library. The repo lives here.
Janus setup
This is a client library tightly coupled with a Janus webrtc Server with the videoroom plugin. The documentation for that can be found on that Janus website here.
Future Work
In addition to tireless bug fixing and making sure it works on all platforms and networks, future work will include adding additional touchpoints in which someone can customize the videoroom. Overlays work great to give rough functionality to all supported features. However, there are often times when an app wants to implement buttons on a publisher video itself, or change the entire look and feel of the videoroom. We do this internally, and are working to release those touchpoints to the public package.
Donations
Are you happy with the product and want to support future development? We accept donations here. Donations fund development of new features on the library.
Source Code
Source code for this library lives here