openvidu-components-angular

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 {
	--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;
}

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.