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
```
## How to install
## How to install it
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
```
## How to use it
## Configure it
You need import the openvidu-angular module in your `app.module.ts`:
```typescript
import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular';
import { environment } from 'src/environments/environment';
const config: OpenViduAngularConfig = {
production: environment.production
@ -47,4 +48,27 @@ const config: OpenViduAngularConfig = {
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.
* 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
@ -26,12 +26,12 @@ import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';
* OPENVIDU_SECRET = 'MY_SECRET';
* publishVideo = true;
* publishAudio = true;
* constructor(private restService: RestService, private openviduService: OpenViduService) {}
* constructor(private httpClient: HttpClient, private openviduService: OpenViduService) {}
*
* async onJoinButtonClicked() {
* this.tokens = {
* webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
* screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
* webcam: await this.getToken(),
* screen: await this.getToken()
* };
* }
*
@ -63,7 +63,7 @@ export class 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.
*
* _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
@ -84,15 +84,15 @@ export class ToolbarDirective {
* OPENVIDU_SECRET = 'MY_SECRET';
*
* constructor(
* private restService: RestService,
* private httpClient: HttpClient,
* private openviduService: OpenViduService,
* private participantService: ParticipantService
* ) {}
*
* async onJoinButtonClicked() {
* this.tokens = {
* webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
* screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
* webcam: await this.getToken(),
* screen: await this.getToken()
* };
* }
*
@ -123,7 +123,7 @@ export class ToolbarAdditionalButtonsDirective {
* 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}.
*
* _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
@ -141,12 +141,12 @@ export class ToolbarAdditionalButtonsDirective {
* OPENVIDU_URL = 'https://localhost:4443';
* OPENVIDU_SECRET = 'MY_SECRET';
*
* constructor(private restService: RestService) {}
* constructor(private httpClient: HttpClient) {}
*
* async onJoinButtonClicked() {
* this.tokens = {
* webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
* screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
* webcam: await this.getToken(),
* 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
* 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
@ -190,12 +190,12 @@ export class ToolbarAdditionalPanelButtonsDirective {
* OPENVIDU_URL = 'https://localhost:4443';
* OPENVIDU_SECRET = 'MY_SECRET';
*
* constructor(private restService: RestService) {}
* constructor(private httpClient: HttpClient) {}
*
* async onJoinButtonClicked() {
* this.tokens = {
* webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
* screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
* webcam: await this.getToken(),
* 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}
* 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
@ -253,7 +253,7 @@ export class PanelDirective {
* OPENVIDU_SECRET = 'MY_SECRET';
* showExternalPanel: boolean = false;
* showExternalPanel2: boolean = false;
* constructor(private restService: RestService, private panelService: PanelService) {}
* constructor(private httpClient: HttpClient, private panelService: PanelService) {}
*
* ngOnInit() {
* this.subscribeToPanelToggling();
@ -266,8 +266,8 @@ export class PanelDirective {
* }
* async onJoinButtonClicked() {
* this.tokens = {
* webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
* screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
* webcam: await this.getToken(),
* screen: await this.getToken()
* };
* }
* 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.
* 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
* <ov-videoconference
@ -328,12 +328,12 @@ export class AdditionalPanelsDirective {
* OPENVIDU_SECRET = 'MY_SECRET';
* session: Session;
* messages: string[] = [];
* constructor(private restService: RestService) {}
* constructor(private httpClient: HttpClient) {}
*
* async onJoinButtonClicked() {
* this.tokens = {
* webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
* screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
* webcam: await this.getToken(),
* 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.
* 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
* <ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
@ -401,7 +401,7 @@ export class ChatPanelDirective {
* remoteParticipantsSubs: Subscription;
*
* constructor(
* private restService: RestService,
* private httpClient: HttpClient,
* private participantService: ParticipantService
* ) {}
*
@ -416,8 +416,8 @@ export class ChatPanelDirective {
*
* async onJoinButtonClicked() {
* this.tokens = {
* webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
* screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
* webcam: await this.getToken(),
* screen: await this.getToken()
* };
* }
* subscribeToParticipants() {
@ -449,7 +449,7 @@ export class ParticipantsPanelDirective {
* the `let` keyword and referencing to the `participant` variable: `*ovParticipantPanelItem="let participant"`.
* 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
* <ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
@ -473,12 +473,12 @@ export class ParticipantsPanelDirective {
* OPENVIDU_URL = 'https://localhost:4443';
* OPENVIDU_SECRET = 'MY_SECRET';
*
* constructor(private restService: RestService) {}
* constructor(private httpClient: HttpClient) {}
*
* async onJoinButtonClicked() {
* this.tokens = {
* webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
* screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
* webcam: await this.getToken(),
* 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.
*
*
* _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
* <ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
@ -521,12 +521,12 @@ export class ParticipantPanelItemDirective {
* OPENVIDU_URL = 'https://localhost:4443';
* OPENVIDU_SECRET = 'MY_SECRET';
*
* constructor(private restService: RestService, private openviduService: OpenViduService) {}
* constructor(private httpClient: HttpClient, private openviduService: OpenViduService) {}
*
* async onJoinButtonClicked() {
* this.tokens = {
* webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
* screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
* webcam: await this.getToken(),
* 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,
* 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
* <ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
@ -583,7 +583,7 @@ export class ParticipantPanelItemElementsDirective {
* remoteParticipantsSubs: Subscription;
*
* constructor(
* private restService: RestService,
* private httpClient: HttpClient,
* private participantService: ParticipantService
* ) {}
*
@ -598,8 +598,8 @@ export class ParticipantPanelItemElementsDirective {
*
* async onJoinButtonClicked() {
* this.tokens = {
* webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
* screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
* webcam: await this.getToken(),
* screen: await this.getToken()
* };
* }
* 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
* 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
* <ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
@ -648,12 +648,12 @@ export class LayoutDirective {
* OPENVIDU_URL = 'https://localhost:4443';
* OPENVIDU_SECRET = 'MY_SECRET';
*
* constructor(private restService: RestService) {}
* constructor(private httpClient: HttpClient) {}
*
* async onJoinButtonClicked() {
* this.tokens = {
* webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
* screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
* webcam: await this.getToken(),
* screen: await this.getToken()
* };
* }
* }