openvidu-components-angular
v3.0.0
Published
Build powerful video conferencing applications with ease using OpenVidu Components Angular.
Downloads
415
Readme
Welcome to OpenVidu Components Angular
Build powerful video conferencing applications with ease using OpenVidu Components Angular.
Introduction
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.
Getting Started
To get started with OpenVidu Components Angular, visit our Getting Started guide.
Create an Angular Project (>= 17.0.0)
ng new your-project-name
Add Angular Material to your project
ng add @angular/material
Install OpenVidu Components Angular
npm install openvidu-components-angular
Import and use OpenVidu Components Angular
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 {
/* Basic colors */
--ov-background-color: #303030; // Background color
--ov-surface-color: #ffffff; // Surfaces colors (panels, dialogs)
/* Text colors */
--ov-text-primary-color: #ffffff; // Text color over primary background
--ov-text-surface-color: #1d1d1d; // Text color over surface background
/* Action colors */
--ov-primary-action-color: #273235; // Primary color for buttons, etc.
--ov-secondary-action-color: #f1f1f1; // Secondary color for buttons, etc.
--ov-accent-action-color: #0089ab; // Color for highlighted elements
/* Status colors */
--ov-error-color: #eb5144; // Error color
--ov-warn-color: #ffba53; // Warning color
/* Radius */
--ov-toolbar-buttons-radius: 50%; // Radius for toolbar buttons
--ov-leave-button-radius: 10px; // Radius for leave button
--ov-video-radius: 5px; // Radius for video elements
--ov-surface-radius: 5px; // Radius for surface elements
}
Usage
<ov-videoconference
[token]="token"
[livekitUrl]="LIVEKIT_URL"
(onTokenRequested)="onTokenRequested($event)"
>
</ov-videoconference>
API Documentation
For detailed information on OpenVidu Angular Components, refer to our API Reference.
Support
If you have any questions or need assistance, please reach out to our Support page.