ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

openvidu-components: Updated doc

pull/715/head
csantosm 2022-04-18 12:50:20 +02:00
parent 56984fd465
commit d0f1e9a121
2 changed files with 71 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
openvidu-components-angular/projects/openvidu-angular/README.md
View File

@ -15,7 +15,7 @@ npm -v
ng v ng v
``` ```
## How to install ## How to install it
1. You need to install the openvidu-angular library in your Angular application: 1. You need to install the openvidu-angular library in your Angular application:
@ -29,13 +29,14 @@ npm install openvidu-angular
ng add @angular/material ng add @angular/material
``` ```
## How to use it ## Configure it
You need import the openvidu-angular module in your `app.module.ts`: You need import the openvidu-angular module in your `app.module.ts`:
```typescript ```typescript
import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular'; import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular';
import { environment } from 'src/environments/environment';
const config: OpenViduAngularConfig = { const config: OpenViduAngularConfig = {
production: environment.production production: environment.production
@ -47,4 +48,27 @@ const config: OpenViduAngularConfig = {
OpenViduAngularModule.forRoot(config) OpenViduAngularModule.forRoot(config)
] ]
}) })
```
You also can add the default styles in your `styles.scss` file:
```css
:root {
--ov-primary-color: #303030;
--ov-secondary-color: #3e3f3f;
--ov-secondary-light-color: #e6e6e6;
--ov-tertiary-color: #598eff;
--ov-warn-color: #EB5144;
--ov-accent-color: #ffae35;
--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;
}
``` ```

90
openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts
View File

@ -2,9 +2,9 @@ import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';
/** /**
* The ***ovToolbar** directive allows to replace the default toolbar component injecting your custom template. * The ***ovToolbar** directive allows to replace the default toolbar component injecting your custom template.
* In the example below we've replaced the default toolbar and added the **toggleAudio** and **toggleVide** features. * In the example below we've replaced the default toolbar and added the **toggleAudio** and **toggleVideo** features.
* *
* You can run the sample [here](components/openvidu-custom-toolbar#run-this-tutorial). * You can run the __openvidu-custom-toolbar__ sample [here](https://docs.openvidu.io/en/stable/components/openvidu-custom-toolbar#run-this-tutorial).
* *
* *
*```html *```html
@ -26,12 +26,12 @@ import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';
* OPENVIDU_SECRET = 'MY_SECRET'; * OPENVIDU_SECRET = 'MY_SECRET';
* publishVideo = true; * publishVideo = true;
* publishAudio = true; * publishAudio = true;
* constructor(private restService: RestService, private openviduService: OpenViduService) {} * constructor(private httpClient: HttpClient, private openviduService: OpenViduService) {}
* *
* async onJoinButtonClicked() { * async onJoinButtonClicked() {
* this.tokens = { * this.tokens = {
* webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET), * webcam: await this.getToken(),
* screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET) * screen: await this.getToken()
* }; * };
* } * }
* *
@ -63,7 +63,7 @@ export class ToolbarDirective {
* We've added the same buttons as the {@link ToolbarDirective}. * We've added the same buttons as the {@link ToolbarDirective}.
* Here we are using the {@link ParticipantService} fror checking the audio or video status. * Here we are using the {@link ParticipantService} fror checking the audio or video status.
* *
* _You can check the sample [here]()_. * You can run the sample [here](https://docs.openvidu.io/en/stable/components/openvidu-toolbar-buttons#run-this-tutorial).
* *
* *
*```html *```html
@ -84,15 +84,15 @@ export class ToolbarDirective {
* OPENVIDU_SECRET = 'MY_SECRET'; * OPENVIDU_SECRET = 'MY_SECRET';
* *
* constructor( * constructor(
* private restService: RestService, * private httpClient: HttpClient,
* private openviduService: OpenViduService, * private openviduService: OpenViduService,
* private participantService: ParticipantService * private participantService: ParticipantService
* ) {} * ) {}
* *
* async onJoinButtonClicked() { * async onJoinButtonClicked() {
* this.tokens = { * this.tokens = {
* webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET), * webcam: await this.getToken(),
* screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET) * screen: await this.getToken()
* }; * };
* } * }
* *
@ -123,7 +123,7 @@ export class ToolbarAdditionalButtonsDirective {
* The ***ovToolbarAdditionalPanelButtons** directive allows to add additional **panel buttons** to the toolbar. * The ***ovToolbarAdditionalPanelButtons** directive allows to add additional **panel buttons** to the toolbar.
* We've added a simple button without any functionality. For being able to toggle the panel you can see the {@link AdditionalPanelsDirective}. * We've added a simple button without any functionality. For being able to toggle the panel you can see the {@link AdditionalPanelsDirective}.
* *
* _You can check the sample [here]()_. * You can run the sample [here](https://docs.openvidu.io/en/stable/components/openvidu-toolbar-panel-buttons#run-this-tutorial).
* *
* *
*```html *```html
@ -141,12 +141,12 @@ export class ToolbarAdditionalButtonsDirective {
* OPENVIDU_URL = 'https://localhost:4443'; * OPENVIDU_URL = 'https://localhost:4443';
* OPENVIDU_SECRET = 'MY_SECRET'; * OPENVIDU_SECRET = 'MY_SECRET';
* *
* constructor(private restService: RestService) {} * constructor(private httpClient: HttpClient) {}
* *
* async onJoinButtonClicked() { * async onJoinButtonClicked() {
* this.tokens = { * this.tokens = {
* webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET), * webcam: await this.getToken(),
* screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET) * screen: await this.getToken()
* }; * };
* } * }
* } * }
@ -170,7 +170,7 @@ export class ToolbarAdditionalPanelButtonsDirective {
* In this example we're going to replace the entire {@link PanelComponent} using the ***ovPanel** directive. Inside of it, we're customizing * In this example we're going to replace the entire {@link PanelComponent} using the ***ovPanel** directive. Inside of it, we're customizing
* the {@link ParticipantsPanelComponent} and {@link ChatPanelcomponent} using theirs directives. * the {@link ParticipantsPanelComponent} and {@link ChatPanelcomponent} using theirs directives.
* *
* _You can check the sample [here]()_. * You can run the sample [here](https://docs.openvidu.io/en/stable/components/openvidu-custom-panels#run-this-tutorial).
* *
* *
*```html *```html
@ -190,12 +190,12 @@ export class ToolbarAdditionalPanelButtonsDirective {
* OPENVIDU_URL = 'https://localhost:4443'; * OPENVIDU_URL = 'https://localhost:4443';
* OPENVIDU_SECRET = 'MY_SECRET'; * OPENVIDU_SECRET = 'MY_SECRET';
* *
* constructor(private restService: RestService) {} * constructor(private httpClient: HttpClient) {}
* *
* async onJoinButtonClicked() { * async onJoinButtonClicked() {
* this.tokens = { * this.tokens = {
* webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET), * webcam: await this.getToken(),
* screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET) * screen: await this.getToken()
* }; * };
* } * }
* } * }
@ -219,7 +219,7 @@ export class PanelDirective {
* As we want to toggle this new panel as the others, we need to add a new button in the {@link ToolbarComponent} * As we want to toggle this new panel as the others, we need to add a new button in the {@link ToolbarComponent}
* using the {@link ToolbarAdditionalPanelButtonsDirective}. * using the {@link ToolbarAdditionalPanelButtonsDirective}.
* *
* _You can check the sample [here]()_. * You can run the sample [here](https://docs.openvidu.io/en/stable/components/openvidu-additional-panels#run-this-tutorial).
* *
* *
*```html *```html
@ -253,7 +253,7 @@ export class PanelDirective {
* OPENVIDU_SECRET = 'MY_SECRET'; * OPENVIDU_SECRET = 'MY_SECRET';
* showExternalPanel: boolean = false; * showExternalPanel: boolean = false;
* showExternalPanel2: boolean = false; * showExternalPanel2: boolean = false;
* constructor(private restService: RestService, private panelService: PanelService) {} * constructor(private httpClient: HttpClient, private panelService: PanelService) {}
* *
* ngOnInit() { * ngOnInit() {
* this.subscribeToPanelToggling(); * this.subscribeToPanelToggling();
@ -266,8 +266,8 @@ export class PanelDirective {
* } * }
* async onJoinButtonClicked() { * async onJoinButtonClicked() {
* this.tokens = { * this.tokens = {
* webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET), * webcam: await this.getToken(),
* screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET) * screen: await this.getToken()
* }; * };
* } * }
* toggleMyPanel(type: string) { * toggleMyPanel(type: string) {
@ -291,7 +291,7 @@ export class AdditionalPanelsDirective {
* The ***ovChatPanel** directive allows to replace the default chat panel template injecting your own component. * The ***ovChatPanel** directive allows to replace the default chat panel template injecting your own component.
* Here we're going to redefine the chat template in a few code lines. * Here we're going to redefine the chat template in a few code lines.
* *
* _You can check the sample [here]()_. * You can run the sample [here](https://docs.openvidu.io/en/stable/components/openvidu-custom-chat-panel#run-this-tutorial).
* *
* ```html * ```html
* <ov-videoconference * <ov-videoconference
@ -328,12 +328,12 @@ export class AdditionalPanelsDirective {
* OPENVIDU_SECRET = 'MY_SECRET'; * OPENVIDU_SECRET = 'MY_SECRET';
* session: Session; * session: Session;
* messages: string[] = []; * messages: string[] = [];
* constructor(private restService: RestService) {} * constructor(private httpClient: HttpClient) {}
* *
* async onJoinButtonClicked() { * async onJoinButtonClicked() {
* this.tokens = { * this.tokens = {
* webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET), * webcam: await this.getToken(),
* screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET) * screen: await this.getToken()
* }; * };
* } * }
* *
@ -368,7 +368,7 @@ export class ChatPanelDirective {
* The ***ovParticipantsPanel** directive allows to replace the default participants panel template injecting your own component. * The ***ovParticipantsPanel** directive allows to replace the default participants panel template injecting your own component.
* Here we're going to redefine the participants template in a few code lines. * Here we're going to redefine the participants template in a few code lines.
* *
* _You can check the sample [here]()_. * You can run the sample [here](https://docs.openvidu.io/en/stable/components/openvidu-custom-participants-panel#run-this-tutorial).
* *
* ```html * ```html
* <ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens"> * <ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
@ -401,7 +401,7 @@ export class ChatPanelDirective {
* remoteParticipantsSubs: Subscription; * remoteParticipantsSubs: Subscription;
* *
* constructor( * constructor(
* private restService: RestService, * private httpClient: HttpClient,
* private participantService: ParticipantService * private participantService: ParticipantService
* ) {} * ) {}
* *
@ -416,8 +416,8 @@ export class ChatPanelDirective {
* *
* async onJoinButtonClicked() { * async onJoinButtonClicked() {
* this.tokens = { * this.tokens = {
* webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET), * webcam: await this.getToken(),
* screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET) * screen: await this.getToken()
* }; * };
* } * }
* subscribeToParticipants() { * subscribeToParticipants() {
@ -449,7 +449,7 @@ export class ParticipantsPanelDirective {
* the `let` keyword and referencing to the `participant` variable: `*ovParticipantPanelItem="let participant"`. * the `let` keyword and referencing to the `participant` variable: `*ovParticipantPanelItem="let participant"`.
* Now we can access to the {@link ParticipantAbstractModel} object. * Now we can access to the {@link ParticipantAbstractModel} object.
* *
* _You can check the sample [here]()_. * You can run the sample [here](https://docs.openvidu.io/en/stable/components/openvidu-custom-participant-panel-item#run-this-tutorial).
* *
* ```html * ```html
* <ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens"> * <ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
@ -473,12 +473,12 @@ export class ParticipantsPanelDirective {
* OPENVIDU_URL = 'https://localhost:4443'; * OPENVIDU_URL = 'https://localhost:4443';
* OPENVIDU_SECRET = 'MY_SECRET'; * OPENVIDU_SECRET = 'MY_SECRET';
* *
* constructor(private restService: RestService) {} * constructor(private httpClient: HttpClient) {}
* *
* async onJoinButtonClicked() { * async onJoinButtonClicked() {
* this.tokens = { * this.tokens = {
* webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET), * webcam: await this.getToken(),
* screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET) * screen: await this.getToken()
* }; * };
* } * }
* } * }
@ -502,7 +502,7 @@ export class ParticipantPanelItemDirective {
* Now we can access to the {@link ParticipantAbstractModel} object and enable the button just for local participants. * Now we can access to the {@link ParticipantAbstractModel} object and enable the button just for local participants.
* *
* *
* _You can check the sample [here]()_. * You can run the sample [here](https://docs.openvidu.io/en/stable/components/openvidu-custom-participant-panel-item-element#run-this-tutorial).
* *
* ```html * ```html
* <ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens"> * <ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
@ -521,12 +521,12 @@ export class ParticipantPanelItemDirective {
* OPENVIDU_URL = 'https://localhost:4443'; * OPENVIDU_URL = 'https://localhost:4443';
* OPENVIDU_SECRET = 'MY_SECRET'; * OPENVIDU_SECRET = 'MY_SECRET';
* *
* constructor(private restService: RestService, private openviduService: OpenViduService) {} * constructor(private httpClient: HttpClient, private openviduService: OpenViduService) {}
* *
* async onJoinButtonClicked() { * async onJoinButtonClicked() {
* this.tokens = { * this.tokens = {
* webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET), * webcam: await this.getToken(),
* screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET) * screen: await this.getToken()
* }; * };
* } * }
* *
@ -554,7 +554,7 @@ export class ParticipantPanelItemElementsDirective {
* As the deafult {@link StreamComponent} needs the participant stream, and as the participants streams extraction is not trivial, * As the deafult {@link StreamComponent} needs the participant stream, and as the participants streams extraction is not trivial,
* openvidu-angular provides us a {@link ParticipantStreamsPipe}for extracting the streams of each participant with ease. * openvidu-angular provides us a {@link ParticipantStreamsPipe}for extracting the streams of each participant with ease.
* *
* _You can check the sample [here]()_. * You can run the sample [here](https://docs.openvidu.io/en/stable/components/openvidu-custom-layout#run-this-tutorial).
* *
* ```html * ```html
* <ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens"> * <ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
@ -583,7 +583,7 @@ export class ParticipantPanelItemElementsDirective {
* remoteParticipantsSubs: Subscription; * remoteParticipantsSubs: Subscription;
* *
* constructor( * constructor(
* private restService: RestService, * private httpClient: HttpClient,
* private participantService: ParticipantService * private participantService: ParticipantService
* ) {} * ) {}
* *
@ -598,8 +598,8 @@ export class ParticipantPanelItemElementsDirective {
* *
* async onJoinButtonClicked() { * async onJoinButtonClicked() {
* this.tokens = { * this.tokens = {
* webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET), * webcam: await this.getToken(),
* screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET) * screen: await this.getToken()
* }; * };
* } * }
* subscribeToParticipants() { * subscribeToParticipants() {
@ -630,7 +630,7 @@ export class LayoutDirective {
* With ***ovStream** directive we can access to the stream object from its context using the `let` keyword and * With ***ovStream** directive we can access to the stream object from its context using the `let` keyword and
* referencing to the `stream` variable: `*ovStream="let stream"`. Now we can access to the {@link StreamModel} object. * referencing to the `stream` variable: `*ovStream="let stream"`. Now we can access to the {@link StreamModel} object.
* *
* _You can check the sample [here]()_. * You can run the sample [here](https://docs.openvidu.io/en/stable/components/openvidu-custom-stream#run-this-tutorial).
* *
* ```html * ```html
* <ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens"> * <ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
@ -648,12 +648,12 @@ export class LayoutDirective {
* OPENVIDU_URL = 'https://localhost:4443'; * OPENVIDU_URL = 'https://localhost:4443';
* OPENVIDU_SECRET = 'MY_SECRET'; * OPENVIDU_SECRET = 'MY_SECRET';
* *
* constructor(private restService: RestService) {} * constructor(private httpClient: HttpClient) {}
* *
* async onJoinButtonClicked() { * async onJoinButtonClicked() {
* this.tokens = { * this.tokens = {
* webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET), * webcam: await this.getToken(),
* screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET) * screen: await this.getToken()
* }; * };
* } * }
* } * }