2.8 KiB

Raw Blame History

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.

2.8 KiB Raw Blame History