Build powerful video conferencing applications with ease using OpenVidu Components Angular.
Angular Components are the simplest way to create real-time videoconferencing apps with Angular. There's no need to manage state or low-level events; Angular Components from OpenVidu handle all the complexity for you.
To get started with OpenVidu Components Angular, visit our Getting Started guide.
Create an Angular Project (>= 17.0.0)
Example :ng new your-project-name
Add Angular Material to your project
Example :ng add @angular/material
Install OpenVidu Components Angular
Example :npm install openvidu-components-angular
Import and use OpenVidu Components Angular
Example :import { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';
// Other imports ...
const config: OpenViduComponentsConfig = {
production: environment.production
};
bootstrapApplication(AppComponent, {
providers: [
importProvidersFrom(
OpenViduComponentsModule.forRoot(config)
// Other imports ...
),
provideAnimations()
]
}).catch((err) => console.error(err));
You can also customize the styles in your styles.scss
file:
:root {
--ov-primary-color: #303030;
--ov-secondary-color: #3e3f3f;
--ov-tertiary-color: #598eff;
--ov-warn-color: #eb5144;
--ov-accent-color: #ffae35;
--ov-light-color: #e6e6e6;
--ov-logo-background-color: #3a3d3d;
--ov-text-color: #ffffff;
--ov-panel-text-color: #1d1d1d;
--ov-panel-background: #ffffff;
--ov-buttons-radius: 50%;
--ov-leave-button-radius: 10px;
--ov-video-radius: 5px;
--ov-panel-radius: 5px;
}
<ov-videoconference
[token]="token"
[livekitUrl]="LIVEKIT_URL"
(onTokenRequested)="onTokenRequested($event)"
>
</ov-videoconference>
For detailed information on OpenVidu Angular Components, refer to our API Reference.
If you have any questions or need assistance, please reach out to our Support page.