mirror of https://github.com/OpenVidu/openvidu.git
100 lines
2.8 KiB
Markdown
100 lines
2.8 KiB
Markdown
# 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**](https://openvidu.io/latest/docs/ui-components/angular-components/).
|
|
|
|
1. Create an Angular Project (>= 17.0.0)
|
|
|
|
```bash
|
|
ng new your-project-name
|
|
```
|
|
|
|
2. Add Angular Material to your project
|
|
|
|
```bash
|
|
ng add @angular/material
|
|
```
|
|
|
|
3. Install OpenVidu Components Angular
|
|
|
|
```bash
|
|
npm install openvidu-components-angular
|
|
```
|
|
|
|
4. Import and use OpenVidu Components Angular
|
|
|
|
```typescript
|
|
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:
|
|
|
|
```scss
|
|
: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
|
|
|
|
```html
|
|
<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**](https://openvidu.io/latest/docs/reference-docs/openvidu-components-angular/).
|
|
|
|
## Support
|
|
|
|
If you have any questions or need assistance, please reach out to our [**Support page**](https://openvidu.io/support/).
|