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

openvidu-components-angular: update all code snippets to match tutorials

pull/672/merge
pabloFuente 2022-08-08 18:53:38 +02:00
parent 5a5fcc4d5e
commit a729cea252
5 changed files with 375 additions and 332 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
openvidu-components-angular/generate-docs.sh Normal file → Executable file
View File

3
openvidu-components-angular/projects/openvidu-angular/doc/tsconfig.doc.json
View File

@ -12,6 +12,5 @@
"src/test.ts", "src/test.ts",
"../src/lib/**/*.mock.ts", "../src/lib/**/*.mock.ts",
"../src/lib/**/*.spec.ts", "../src/lib/**/*.spec.ts",
]
],
} }

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

@ -1,14 +1,14 @@
import { Directive, TemplateRef, ViewContainerRef } from '@angular/core'; 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 with a custom one.
* In the example below we've replaced the default toolbar and added the **toggleAudio** and **toggleVideo** features. * In the example below we've replaced the default toolbar and added the **toggleAudio** and **toggleVideo** buttons.
* * Here we are using the {@link OpenViduService} for publishing/unpublishing the audio and video.
* You can run the __openvidu-custom-toolbar__ sample [here](https://docs.openvidu.io/en/stable/components/openvidu-custom-toolbar#run-this-tutorial).
* *
* You can run the associated tutorial [here](https://docs.openvidu.io/en/stable/components/openvidu-custom-toolbar#running-this-tutorial).
* *
*```html *```html
* <ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens"> *<ov-videoconference [tokens]="tokens">
* <div *ovToolbar style="text-align: center;"> * <div *ovToolbar style="text-align: center;">
* <button (click)="toggleVideo()">Toggle Video</button> * <button (click)="toggleVideo()">Toggle Video</button>
* <button (click)="toggleAudio()">Toggle Audio</button> * <button (click)="toggleAudio()">Toggle Audio</button>
@ -16,19 +16,18 @@ import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';
*</ov-videoconference> *</ov-videoconference>
* ``` * ```
* *
* We have used the {@link OpenViduService} for publishing/unpublishing the audio and video.
*
* ```javascript * ```javascript
* export class ToolbarDirectiveComponent { * export class ToolbarDirectiveComponent {
* tokens: TokenModel; *
* sessionId = 'toolbar-directive-example'; * sessionId = 'toolbar-directive-example';
* OPENVIDU_URL = 'https://localhost:4443'; * tokens!: TokenModel;
* OPENVIDU_SECRET = 'MY_SECRET'; *
* publishVideo = true; * publishVideo = true;
* publishAudio = true; * publishAudio = true;
*
* constructor(private httpClient: HttpClient, private openviduService: OpenViduService) { } * constructor(private httpClient: HttpClient, private openviduService: OpenViduService) { }
* *
* async onJoinButtonClicked() { * async ngOnInit() {
* this.tokens = { * this.tokens = {
* webcam: await this.getToken(), * webcam: await this.getToken(),
* screen: await this.getToken() * screen: await this.getToken()
@ -44,6 +43,11 @@ import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';
* this.publishAudio = !this.publishAudio; * this.publishAudio = !this.publishAudio;
* this.openviduService.publishAudio(this.publishAudio); * this.openviduService.publishAudio(this.publishAudio);
* } * }
*
* async getToken(): Promise<string> {
* // Returns an OpeVidu token
* }
*
* } * }
* ``` * ```
* *
@ -60,28 +64,33 @@ export class ToolbarDirective {
/** /**
* The ***ovToolbarAdditionalButtons** directive allows to add additional buttons to center buttons group. * The ***ovToolbarAdditionalButtons** directive allows to add additional buttons to center buttons group.
* We've added the same buttons as the {@link ToolbarDirective}. * In the example below 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} to check the audio or video status.
*
* You can run the sample [here](https://docs.openvidu.io/en/stable/components/openvidu-toolbar-buttons#run-this-tutorial).
* *
* You can run the associated tutorial [here](https://docs.openvidu.io/en/stable/components/openvidu-toolbar-buttons#running-this-tutorial).
* *
*```html *```html
* <ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens"> *<ov-videoconference [tokens]="tokens" [toolbarDisplaySessionName]="false">
* <div *ovToolbarAdditionalButtons style="text-align: center;"> * <div *ovToolbarAdditionalButtons style="text-align: center;">
* <button (click)="toggleVideo()">Toggle Video</button> * <button mat-icon-button (click)="toggleVideo()">
* <button (click)="toggleAudio()">Toggle Audio</button> * <mat-icon>videocam</mat-icon>
* </button>
* <button mat-icon-button (click)="toggleAudio()">
* <mat-icon>mic</mat-icon>
* </button>
* </div> * </div>
*</ov-videoconference> *</ov-videoconference>
* ``` * ```
* *
* ```javascript * ```javascript
* export class ToolbarAdditionalButtonsDirectiveComponent { * export class ToolbarAdditionalButtonsDirectiveComponent {
* tokens: TokenModel;
* sessionId = 'toolbar-additionalbtn-directive-example';
* *
* OPENVIDU_URL = 'https://localhost:4443'; sessionId = "panel-directive-example";
* OPENVIDU_SECRET = 'MY_SECRET'; tokens!: TokenModel;
* sessionId = 'toolbar-additionalbtn-directive-example';
* tokens!: TokenModel;
* *
* constructor( * constructor(
* private httpClient: HttpClient, * private httpClient: HttpClient,
@ -89,7 +98,7 @@ export class ToolbarDirective {
* private participantService: ParticipantService * private participantService: ParticipantService
* ) { } * ) { }
* *
* async onJoinButtonClicked() { * async ngOnInit() {
* this.tokens = { * this.tokens = {
* webcam: await this.getToken(), * webcam: await this.getToken(),
* screen: await this.getToken() * screen: await this.getToken()
@ -105,6 +114,11 @@ export class ToolbarDirective {
* const publishAudio = !this.participantService.isMyAudioActive(); * const publishAudio = !this.participantService.isMyAudioActive();
* this.openviduService.publishAudio(publishAudio); * this.openviduService.publishAudio(publishAudio);
* } * }
*
* async getToken(): Promise<string> {
* // Returns an OpeVidu token
* }
*
* } * }
* ``` * ```
*/ */
@ -121,34 +135,41 @@ 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}. * In the example below we've added a simple button without any functionality. To learn how to toggle the panel check the {@link AdditionalPanelsDirective}.
*
* You can run the sample [here](https://docs.openvidu.io/en/stable/components/openvidu-toolbar-panel-buttons#run-this-tutorial).
* *
* You can run the associated tutorial [here](https://docs.openvidu.io/en/stable/components/openvidu-toolbar-panel-buttons#running-this-tutorial).
* *
*```html *```html
* <ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens"> *<ov-videoconference [tokens]="tokens" [toolbarDisplaySessionName]="false">
* <div *ovToolbarAdditionalPanelButtons style="text-align: center;"> * <div *ovToolbarAdditionalPanelButtons style="text-align: center;">
* <button>MY PANEL</button> * <button (click)="onButtonClicked()">MY PANEL</button>
* </div> * </div>
*</ov-videoconference> *</ov-videoconference>
* ``` * ```
* *
* ```javascript * ```javascript
* export class ToolbarAdditionalPanelButtonsDirectiveComponent { * export class ToolbarAdditionalPanelButtonsDirectiveComponent {
* tokens: TokenModel; *
* sessionId = 'toolbar-additionalPanelbtn'; * sessionId = "toolbar-additionalPanelbtn";
* OPENVIDU_URL = 'https://localhost:4443'; * tokens!: TokenModel;
* OPENVIDU_SECRET = 'MY_SECRET';
* *
* constructor(private httpClient: HttpClient) { } * constructor(private httpClient: HttpClient) { }
* *
* async onJoinButtonClicked() { * async ngOnInit() {
* this.tokens = { * this.tokens = {
* webcam: await this.getToken(), * webcam: await this.getToken(),
* screen: await this.getToken() * screen: await this.getToken(),
* }; * };
* } * }
*
* onButtonClicked() {
* alert('button clicked');
* }
*
* async getToken(): Promise<string> {
* // Returns an OpeVidu token
* }
*
* } * }
* ``` * ```
*/ */
@ -164,40 +185,44 @@ export class ToolbarAdditionalPanelButtonsDirective {
/** /**
* The ***ovPanel** directive allows to replace the default panels with your own. This directive also allows us insert elements * The ***ovPanel** directive allows to replace the default panels with your own custom panels. This directive also allows to insert elements
* tagged with the {@link ChatPanelDirective}, {@link ParticipantsPanelDirective} and {@link AdditionalPanelsDirective}. * tagged with the {@link ChatPanelDirective}, {@link ParticipantsPanelDirective} and {@link AdditionalPanelsDirective}.
* *
* In this example we're going to replace the entire {@link PanelComponent} using the ***ovPanel** directive. Inside of it, we're customizing * In the example below we replace the entire {@link PanelComponent} using the ***ovPanel** directive. Inside of it, we customize
* the {@link ParticipantsPanelComponent} and {@link ChatPanelcomponent} using theirs directives. * the {@link ParticipantsPanelComponent} and {@link ChatPanelcomponent} using their own directives.
*
* You can run the sample [here](https://docs.openvidu.io/en/stable/components/openvidu-custom-panels#run-this-tutorial).
* *
* You can run the associated tutorial [here](https://docs.openvidu.io/en/stable/components/openvidu-custom-panels#running-this-tutorial).
* *
*```html *```html
* <ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens"> *<ov-videoconference [tokens]="tokens">
* <ov-panel *ovPanel> * <ov-panel *ovPanel>
* <div *ovChatPanel>This is my custom chat panel</div> * <div *ovChatPanel id="my-chat-panel">This is my custom chat panel</div>
* <div *ovParticipantsPanel id="my-participants-panel">This is my custom participants panel</div> * <div *ovParticipantsPanel id="my-participants-panel">
* This is my custom participants panel
* </div>
* </ov-panel> * </ov-panel>
*</ov-videoconference> *</ov-videoconference>
* ``` * ```
* *
* ```javascript * ```javascript
* export class PanelDirectiveComponent { * export class PanelDirectiveComponent {
* tokens: TokenModel;
* sessionId = 'panel-directive-example';
* *
* OPENVIDU_URL = 'https://localhost:4443'; * sessionId = "panel-directive-example";
* OPENVIDU_SECRET = 'MY_SECRET'; * tokens!: TokenModel;
* *
* constructor(private httpClient: HttpClient) { } * constructor(private httpClient: HttpClient) { }
* *
* async onJoinButtonClicked() { * async ngOnInit() {
* this.tokens = { * this.tokens = {
* webcam: await this.getToken(), * webcam: await this.getToken(),
* screen: await this.getToken() * screen: await this.getToken(),
* }; * };
* } * }
*
* async getToken(): Promise<string> {
* // Returns an OpeVidu token
* }
*
* } * }
* ``` * ```
*/ */
@ -213,20 +238,23 @@ export class PanelDirective {
/** /**
* The ***ovAdditionalPanels** directive allows to add more extra panels to the {@link PanelComponent}. In this example we've added a new * The ***ovAdditionalPanels** directive allows to add more extra panels to the {@link PanelComponent}. In this example we add a new
* panel besides the defaults. * panel alongside the default ones.
* *
* As we want to toggle this new panel as the others, we need to add a new button in the {@link ToolbarComponent} * To mimic the toggling behavior of the default panels, we need to add a new button in the {@link ToolbarComponent}
* using the {@link ToolbarAdditionalPanelButtonsDirective}. * using the {@link ToolbarAdditionalPanelButtonsDirective}.
* *
* You can run the sample [here](https://docs.openvidu.io/en/stable/components/openvidu-additional-panels#run-this-tutorial). * You can run the associated tutorial [here](https://docs.openvidu.io/en/stable/components/openvidu-additional-panels#running-this-tutorial).
*
* *
*```html *```html
* <ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens"> *<ov-videoconference [tokens]="tokens" [toolbarDisplaySessionName]="false">
* <div *ovToolbarAdditionalPanelButtons style="text-align: center;"> * <div *ovToolbarAdditionalPanelButtons style="text-align: center;">
* <button (click)="toggleMyPanel('my-panel')">MY PANEL</button> * <button mat-icon-button (click)="toggleMyPanel('my-panel')">
* <button (click)="toggleMyPanel('my-panel2')">OTHER PANEL</button> * <mat-icon>360</mat-icon>
* </button>
* <button mat-icon-button (click)="toggleMyPanel('my-panel2')">
* <mat-icon>star</mat-icon>
* </button>
* </div> * </div>
* <div *ovAdditionalPanels id="my-panels"> * <div *ovAdditionalPanels id="my-panels">
* <div id="my-panel1" *ngIf="showExternalPanel"> * <div id="my-panel1" *ngIf="showExternalPanel">
@ -242,37 +270,48 @@ export class PanelDirective {
* ``` * ```
* <br/> * <br/>
* *
* We need to subscribe to the {@link ../injectables/PanelService.html#panelOpenedObs panelOpenedObs} Observable for listening the panel status and update our boolean variables * We need to subscribe to the {@link ../injectables/PanelService.html#panelOpenedObs panelOpenedObs} Observable to listen to the panel status and update our boolean variables
* (`showExternalPanel` and `showExternalPanel2`) for show and hide our panels. * (`showExternalPanel` and `showExternalPanel2`) in charge of showing or hiding them.
* *
* ```javascript * ```javascript
* export class AdditionalPanelsDirectiveComponent implements OnInit { * export class AdditionalPanelsDirectiveComponent implements OnInit {
* tokens: TokenModel; *
* sessionId = 'chat-panel-directive-example'; * sessionId = "toolbar-additionalbtn-directive-example";
* OPENVIDU_URL = 'https://localhost:4443'; * tokens!: TokenModel;
* OPENVIDU_SECRET = 'MY_SECRET'; *
* showExternalPanel: boolean = false; * showExternalPanel: boolean = false;
* showExternalPanel2: boolean = false; * showExternalPanel2: boolean = false;
* constructor(private httpClient: HttpClient, private panelService: PanelService) {}
* *
* ngOnInit() { * constructor(
* private httpClient: HttpClient,
* private panelService: PanelService
* ) { }
*
* async ngOnInit() {
* this.subscribeToPanelToggling(); * this.subscribeToPanelToggling();
* }
* subscribeToPanelToggling() {
* this.panelService.panelOpenedObs.subscribe((ev: PanelEvent) => {
* this.showExternalPanel = ev.opened && ev.type === 'my-panel';
* this.showExternalPanel2 = ev.opened && ev.type === 'my-panel2';
* });
* }
* async onJoinButtonClicked() {
* this.tokens = { * this.tokens = {
* webcam: await this.getToken(), * webcam: await this.getToken(),
* screen: await this.getToken() * screen: await this.getToken(),
* }; * };
* } * }
*
* subscribeToPanelToggling() {
* this.panelService.panelOpenedObs.subscribe(
* (ev: { opened: boolean; type?: PanelType | string }) => {
* this.showExternalPanel = ev.opened && ev.type === "my-panel";
* this.showExternalPanel2 = ev.opened && ev.type === "my-panel2";
* }
* );
* }
*
* toggleMyPanel(type: string) { * toggleMyPanel(type: string) {
* this.panelService.togglePanel(type); * this.panelService.togglePanel(type);
* } * }
*
* async getToken(): Promise<string> {
* // Returns an OpeVidu token
* }
*
* } * }
* ``` * ```
*/ */
@ -288,17 +327,16 @@ 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 with a custom one.
* Here we're going to redefine the chat template in a few code lines. * In the example below we replace the chat template in a few lines of code.
* *
* You can run the sample [here](https://docs.openvidu.io/en/stable/components/openvidu-custom-chat-panel#run-this-tutorial). * You can run the associated tutorial [here](https://docs.openvidu.io/en/stable/components/openvidu-custom-chat-panel#running-this-tutorial).
* *
* ```html * ```html
*<ov-videoconference *<ov-videoconference
* (onJoinButtonClicked)="onJoinButtonClicked()"
* (onSessionCreated)="onSessionCreated($event)" * (onSessionCreated)="onSessionCreated($event)"
* [tokens]="tokens" * [tokens]="tokens"
* > * [toolbarDisplaySessionName]="false">
* <div *ovChatPanel id="my-panel"> * <div *ovChatPanel id="my-panel">
* <h3>Chat</h3> * <h3>Chat</h3>
* <div> * <div>
@ -313,27 +351,28 @@ export class AdditionalPanelsDirective {
*``` *```
* <br/> * <br/>
* *
* As we need to get the **openvidu-browser [Session](https://docs.openvidu.io/en/stable/api/openvidu-browser/classes/Session.html)** * As we need to get the openvidu-browser **[Session](https://docs.openvidu.io/en/stable/api/openvidu-browser/classes/Session.html)**
* for sending messages to others, we can get it from the `onSessionCreated` event fired by the {@link VideoconferenceComponent} * object for sending messages to others, we can get it from the `onSessionCreated` event fired by the {@link VideoconferenceComponent}
* when the session has been created. * when the session has been created.
* *
* Once we have the session created, we can use the * Once we have the session created, we can use the
* [signal](https://docs.openvidu.io/en/stable/api/openvidu-browser/classes/Session.html#signal) method for sending our messages. * [signal](https://docs.openvidu.io/en/stable/api/openvidu-browser/classes/Session.html#signal) method to send our messages.
* *
* ```javascript * ```javascript
* export class ChatPanelDirectiveComponent { * export class ChatPanelDirectiveComponent {
* tokens: TokenModel; *
* sessionId = 'chat-panel-directive-example'; * sessionId = "chat-panel-directive-example";
* OPENVIDU_URL = 'https://localhost:4443'; * tokens!: TokenModel;
* OPENVIDU_SECRET = 'MY_SECRET'; *
* session: Session; * session!: Session;
* messages: string[] = []; * messages: string[] = [];
*
* constructor(private httpClient: HttpClient) { } * constructor(private httpClient: HttpClient) { }
* *
* async onJoinButtonClicked() { * async ngOnInit() {
* this.tokens = { * this.tokens = {
* webcam: await this.getToken(), * webcam: await this.getToken(),
* screen: await this.getToken() * screen: await this.getToken(),
* }; * };
* } * }
* *
@ -349,10 +388,15 @@ export class AdditionalPanelsDirective {
* const signalOptions: SignalOptions = { * const signalOptions: SignalOptions = {
* data: JSON.stringify({ message }), * data: JSON.stringify({ message }),
* type: Signal.CHAT, * type: Signal.CHAT,
* to: undefined * to: undefined,
* }; * };
* this.session.signal(signalOptions); * this.session.signal(signalOptions);
* } * }
*
* async getToken(): Promise<string> {
* // Returns an OpeVidu token
* }
*
* } * }
* ``` * ```
* *
@ -365,7 +409,7 @@ export class ChatPanelDirective {
} }
/** /**
* backgroundEffectsPanel does not provides customization * backgroundEffectsPanel does not provide any customization for now
* @internal * @internal
*/ */
@Directive({ @Directive({
@ -377,13 +421,16 @@ export class BackgroundEffectsPanelDirective {
/** /**
* The ***ovActivitiesPanel** directive allows to replace the default activities panel template injecting your own component. * The ***ovActivitiesPanel** directive allows to replace the default activities panel template with a custom one.
* Here we're going to redefine the activities template in a few code lines. * In the example below we replace the activities template in a few lines of code.
* *
* You can run the sample [here](https://docs.openvidu.io/en/stable/components/openvidu-custom-activities-panel#run-this-tutorial). * You can run the associated tutorial [here](https://docs.openvidu.io/en/stable/components/openvidu-custom-activities-panel#running-this-tutorial).
* *
* ```html * ```html
* <ov-videoconference [tokens]="tokens"> *<ov-videoconference
* [tokens]="tokens"
* [toolbarRecordingButton]="false"
* [toolbarDisplaySessionName]="false">
* <div *ovActivitiesPanel id="my-panel"> * <div *ovActivitiesPanel id="my-panel">
* <h3>ACTIVITIES</h3> * <h3>ACTIVITIES</h3>
* <div> * <div>
@ -394,15 +441,14 @@ export class BackgroundEffectsPanelDirective {
*``` *```
* <br/> * <br/>
* *
* As we need to assign the tokens to the the {@link VideoconferenceComponent}, we can request the tokens on the ngOnInit Angular lifecycle. * As we need to assign the OpenVidu Tokens to the {@link VideoconferenceComponent}, we request them on the ngOnInit Angular lifecycle hook.
* *
* ```javascript * ```javascript
* export class AppComponent implements OnInit { * export class AppComponent implements OnInit {
* tokens: TokenModel; *
* sessionId = 'activities-panel-directive-example'; * sessionId = "activities-panel-directive-example";
* OPENVIDU_URL = 'https://localhost:4443'; * tokens!: TokenModel;
* OPENVIDU_SECRET = 'MY_SECRET'; *
* constructor(private httpClient: HttpClient) { } * constructor(private httpClient: HttpClient) { }
* *
* async ngOnInit() { * async ngOnInit() {
@ -412,6 +458,10 @@ export class BackgroundEffectsPanelDirective {
* }; * };
* } * }
* *
* async getToken(): Promise<string> {
* // Returns an OpeVidu token
* }
*
*} *}
* ``` * ```
* *
@ -424,48 +474,46 @@ export class ActivitiesPanelDirective {
} }
/** /**
* 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 with a custom one.
* Here we're going to redefine the participants template in a few code lines. * In the example below we replace the participants template in a few lines of code.
* *
* You can run the sample [here](https://docs.openvidu.io/en/stable/components/openvidu-custom-participants-panel#run-this-tutorial). * You can run the associated tutorial [here](https://docs.openvidu.io/en/stable/components/openvidu-custom-participants-panel#running-this-tutorial).
* *
* ```html * ```html
* <ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens"> *<ov-videoconference [tokens]="tokens" [toolbarDisplaySessionName]="false" (onSessionCreated)="subscribeToParticipants()">
* <div *ovParticipantsPanel id="my-panel"> * <div *ovParticipantsPanel id="my-panel">
* <ul id="local"> * <ul id="local">
* <li>{{localParticipant.nickname}}</li> * <li>{{localParticipant.nickname}}</li>
* </ul> * </ul>
*
* <ul id="remote"> * <ul id="remote">
* <li *ngFor="let p of remoteParticipants">{{p.nickname}}</li> * <li *ngFor="let p of remoteParticipants">{{p.nickname}}</li>
* </ul> * </ul>
* </div> * </div>
*</ov-videoconference> *</ov-videoconference>
*``` *```
* <br/>
* *
* * We need to get the participants in our Session, so we use the {@link ParticipantService} to subscribe to the required Observables.
* As we need to get the participants in our session, we are subscribing to them using the {@link ParticipantService}. We'll get the local participant * We'll get the local participant and the remote participants to update our custom participants panel on any change.
* and the remote participants and we will be able to update the participants panel on every update.
*
* *
* ```javascript * ```javascript
* export class ParticipantsPanelDirectiveComponent implements OnInit, OnDestroy { * export class ParticipantsPanelDirectiveComponent implements OnInit, OnDestroy {
* tokens: TokenModel; *
* sessionId = 'participants-panel-directive-example'; * sessionId = 'participants-panel-directive-example';
* OPENVIDU_URL = 'https://localhost:4443'; * tokens!: TokenModel;
* OPENVIDU_SECRET = 'MY_SECRET';
* localParticipant: ParticipantAbstractModel;
* remoteParticipants: ParticipantAbstractModel[];
* localParticipantSubs: Subscription;
* remoteParticipantsSubs: Subscription;
* *
* constructor( * localParticipant!: ParticipantAbstractModel;
* private httpClient: HttpClient, * remoteParticipants!: ParticipantAbstractModel[];
* private participantService: ParticipantService * localParticipantSubs!: Subscription;
* ) {} * remoteParticipantsSubs!: Subscription;
* *
* ngOnInit(): void { * constructor(private httpClient: HttpClient, private participantService: ParticipantService) { }
* this.subscribeToParticipants(); *
* async ngOnInit() {
* this.tokens = {
* webcam: await this.getToken(),
* screen: await this.getToken()
* };
* } * }
* *
* ngOnDestroy() { * ngOnDestroy() {
@ -473,23 +521,20 @@ export class ActivitiesPanelDirective {
* this.remoteParticipantsSubs.unsubscribe(); * this.remoteParticipantsSubs.unsubscribe();
* } * }
* *
* async onJoinButtonClicked() {
* this.tokens = {
* webcam: await this.getToken(),
* screen: await this.getToken()
* };
* }
* subscribeToParticipants() { * subscribeToParticipants() {
* this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => { * this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => {
* this.localParticipant = p; * this.localParticipant = p;
* }); * });
*
* this.remoteParticipantsSubs = this.participantService.remoteParticipantsObs.subscribe((participants) => { * this.remoteParticipantsSubs = this.participantService.remoteParticipantsObs.subscribe((participants) => {
* this.remoteParticipants = participants; * this.remoteParticipants = participants;
* }); * });
* } * }
*
* async getToken(): Promise<string> {
* // Returns an OpeVidu token
* } * }
* *
* }
* ``` * ```
* *
*/ */
@ -502,16 +547,15 @@ export class ParticipantsPanelDirective {
/** /**
* The ***ovParticipantPanelItem** directive allows to replace the default participant panel item template in the {@link ParticipantsPanelComponent} injecting your own component. * The ***ovParticipantPanelItem** directive allows to replace the default participant panel item template in the {@link ParticipantsPanelComponent} with a custom one.
* *
* With ***ovParticipantPanelItem** directive we can access to the participant object from its context using * With ***ovParticipantPanelItem** directive we can access the participant object from its context using the `let` keyword and referencing the `participant`
* the `let` keyword and referencing to the `participant` variable: `*ovParticipantPanelItem="let participant"`. * variable: `*ovParticipantPanelItem="let participant"`. Now we can access the {@link ParticipantAbstractModel} object.
* Now we can access to the {@link ParticipantAbstractModel} object.
* *
* You can run the sample [here](https://docs.openvidu.io/en/stable/components/openvidu-custom-participant-panel-item#run-this-tutorial). * You can run the associated tutorial [here](https://docs.openvidu.io/en/stable/components/openvidu-custom-participant-panel-item#running-this-tutorial).
* *
* ```html * ```html
* <ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens"> *<ov-videoconference [tokens]="tokens" [toolbarDisplaySessionName]="false">
* <div *ovParticipantPanelItem="let participant" style="display: flex"> * <div *ovParticipantPanelItem="let participant" style="display: flex">
* <p>{{ participant.nickname }}</p> * <p>{{ participant.nickname }}</p>
* <button mat-icon-button [matMenuTriggerFor]="menu"><mat-icon>more_vert</mat-icon></button> * <button mat-icon-button [matMenuTriggerFor]="menu"><mat-icon>more_vert</mat-icon></button>
@ -523,25 +567,26 @@ export class ParticipantsPanelDirective {
*</ov-videoconference> *</ov-videoconference>
*``` *```
* *
*
*
* ```javascript * ```javascript
* export class ParticipantPanelItemDirectiveComponent { * export class ParticipantPanelItemDirectiveComponent {
* tokens: TokenModel; *
* sessionId = 'participants-panel-directive-example'; * sessionId = 'participants-panel-directive-example';
* OPENVIDU_URL = 'https://localhost:4443'; * tokens!: TokenModel;
* OPENVIDU_SECRET = 'MY_SECRET';
* *
* constructor(private httpClient: HttpClient) { } * constructor(private httpClient: HttpClient) { }
* *
* async onJoinButtonClicked() { * async ngOnInit() {
* this.tokens = { * this.tokens = {
* webcam: await this.getToken(), * webcam: await this.getToken(),
* screen: await this.getToken() * screen: await this.getToken()
* }; * };
* } * }
*
* async getToken(): Promise<string> {
* // Returns an OpeVidu token
* } * }
* *
* }
* ``` * ```
* *
*/ */
@ -554,49 +599,57 @@ export class ParticipantPanelItemDirective {
/** /**
* The ***ovParticipantPanelItemElements** directive allows to add elements to the {@link ParticipantsPanelItemComponent}. * The ***ovParticipantPanelItemElements** directive allows to add elements to the {@link ParticipantsPanelItemComponent}.
* Here we're going to add a simple button for disconnecting to the session. * In the example below we add a simple button to disconnect from the session.
* *
* With ***ovParticipantPanelItemElements** directive we can access to the participant object from its context using * With ***ovParticipantPanelItemElements** directive we can access the participant object from its context using
* the `let` keyword and referencing to the `participant` variable: `*ovParticipantPanelItem="let participant"`. * the `let` keyword and referencing the `participant` variable: `*ovParticipantPanelItem="let participant"`.
* Now we can access to the {@link ParticipantAbstractModel} object and enable the button just for local participants. * Now we can access the {@link ParticipantAbstractModel} object and enable the button just for the local participant.
* *
* * You can run the associated tutorial [here](https://docs.openvidu.io/en/stable/components/openvidu-custom-participant-panel-item-element#running-this-tutorial).
* 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
* *ngIf="connected"
* [tokens]="tokens"
* [toolbarDisplaySessionName]="false">
* <div *ovParticipantPanelItemElements="let participant"> * <div *ovParticipantPanelItemElements="let participant">
* <button *ngIf="participant.local" (click)="leaveSession()">Leave</button> * <button *ngIf="participant.local" (click)="leaveSession()">
* Leave
* </button>
* </div> * </div>
*</ov-videoconference> *</ov-videoconference>
*<div *ngIf="!connected" style="text-align: center;">Session disconnected</div>
*``` *```
* *
*
*
* ```javascript * ```javascript
* export class ParticipantPanelItemElementsDirectiveComponent { * export class ParticipantPanelItemElementsDirectiveComponent {
* tokens: TokenModel; *
* sessionId = 'participants-panel-directive-example'; * sessionId = "participants-panel-directive-example";
* OPENVIDU_URL = 'https://localhost:4443'; * tokens!: TokenModel;
* OPENVIDU_SECRET = 'MY_SECRET'; *
* connected = true;
* *
* constructor(private httpClient: HttpClient, private openviduService: OpenViduService) { } * constructor(private httpClient: HttpClient, private openviduService: OpenViduService) { }
* *
* async onJoinButtonClicked() { * async ngOnInit() {
* this.tokens = { * this.tokens = {
* webcam: await this.getToken(), * webcam: await this.getToken(),
* screen: await this.getToken() * screen: await this.getToken(),
* }; * };
* } * }
* *
* leaveSession() { * leaveSession() {
* this.openviduService.disconnect(); * this.openviduService.disconnect();
* this.connected = false;
* } * }
*
* async getToken(): Promise<string> {
* // Returns an OpeVidu token
* }
*
* } * }
* ``` * ```
*
*/ */
@Directive({ @Directive({
selector: '[ovParticipantPanelItemElements]' selector: '[ovParticipantPanelItemElements]'
}) })
@ -606,17 +659,16 @@ export class ParticipantPanelItemElementsDirective {
/** /**
* * The ***ovLayout** directive allows to replace the default session layout with a custom one.
* The ***ovLayout** directive allows us replacing the default layout with ours. As we have to add a stream for each participant,
* we must get the local and remote participants.
* *
* 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 a {@link ParticipantStreamsPipe} for easy extraction of the stream of each participant. In the example
* below you can see that on the HTML template, as the last component of the `*ngFor` statements (`| streams`).
* *
* You can run the sample [here](https://docs.openvidu.io/en/stable/components/openvidu-custom-layout#run-this-tutorial). * You can run the associated tutorial [here](https://docs.openvidu.io/en/stable/components/openvidu-custom-layout#running-this-tutorial).
* *
* ```html * ```html
* <ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens"> *<ov-videoconference [tokens]="tokens" (onSessionCreated)="subscribeToParticipants()">
* <div *ovLayout> * <div *ovLayout>
* <div class="container"> * <div class="container">
* <div class="item" *ngFor="let stream of localParticipant | streams"> * <div class="item" *ngFor="let stream of localParticipant | streams">
@ -630,24 +682,27 @@ export class ParticipantPanelItemElementsDirective {
*</ov-videoconference> *</ov-videoconference>
*``` *```
* *
* We need to get the participants in our Session, so we use the {@link ParticipantService} to subscribe to the required Observables.
* We'll get the local participant and the remote participants to display their streams in our custom session layout.
*
* ```javascript * ```javascript
* export class LayoutDirectiveComponent implements OnInit, OnDestroy { * export class LayoutDirectiveComponent implements OnInit, OnDestroy {
* tokens: TokenModel;
* sessionId = 'participants-panel-directive-example';
* OPENVIDU_URL = 'https://localhost:4443';
* OPENVIDU_SECRET = 'MY_SECRET';
* localParticipant: ParticipantAbstractModel;
* remoteParticipants: ParticipantAbstractModel[];
* localParticipantSubs: Subscription;
* remoteParticipantsSubs: Subscription;
* *
* constructor( * sessionId = 'layout-directive-example';
* private httpClient: HttpClient, * tokens!: TokenModel;
* private participantService: ParticipantService
* ) {}
* *
* ngOnInit(): void { * localParticipant!: ParticipantAbstractModel;
* this.subscribeToParticipants(); * remoteParticipants!: ParticipantAbstractModel[];
* localParticipantSubs!: Subscription;
* remoteParticipantsSubs!: Subscription;
*
* constructor(private httpClient: HttpClient, private participantService: ParticipantService) { }
*
* async ngOnInit() {
* this.tokens = {
* webcam: await this.getToken(),
* screen: await this.getToken()
* };
* } * }
* *
* ngOnDestroy() { * ngOnDestroy() {
@ -655,12 +710,6 @@ export class ParticipantPanelItemElementsDirective {
* this.remoteParticipantsSubs.unsubscribe(); * this.remoteParticipantsSubs.unsubscribe();
* } * }
* *
* async onJoinButtonClicked() {
* this.tokens = {
* webcam: await this.getToken(),
* screen: await this.getToken()
* };
* }
* subscribeToParticipants() { * subscribeToParticipants() {
* this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => { * this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => {
* this.localParticipant = p; * this.localParticipant = p;
@ -670,10 +719,13 @@ export class ParticipantPanelItemElementsDirective {
* this.remoteParticipants = participants; * this.remoteParticipants = participants;
* }); * });
* } * }
*
* async getToken(): Promise<string> {
* // Returns an OpeVidu token
* } * }
* *
* }
* ``` * ```
*
*/ */
@Directive({ @Directive({
selector: '[ovLayout]' selector: '[ovLayout]'
@ -683,16 +735,16 @@ export class LayoutDirective {
} }
/** /**
* The ***ovStream** directive allows to replace the default {@link StreamComponent} template injecting your own component. * The ***ovStream** directive allows to replace the default {@link StreamComponent} template injecting a custom one.
* In the example below, we have to customize the nickname position and styles replacing the default stream. * In the example below we customize the participant's nickname position and styles, replacing the default stream component.
* *
* 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 the `stream` variable: `*ovStream="let stream"`. Now we can access the {@link StreamModel} object.
* *
* You can run the sample [here](https://docs.openvidu.io/en/stable/components/openvidu-custom-stream#run-this-tutorial). * You can run the associated tutorial [here](https://docs.openvidu.io/en/stable/components/openvidu-custom-stream#running-this-tutorial).
* *
* ```html * ```html
* <ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens"> *<ov-videoconference [tokens]="tokens">
* <div *ovStream="let stream"> * <div *ovStream="let stream">
* <ov-stream [stream]="stream" [displayParticipantName]="false"></ov-stream> * <ov-stream [stream]="stream" [displayParticipantName]="false"></ov-stream>
* <p>{{ stream.participant.nickname }}</p> * <p>{{ stream.participant.nickname }}</p>
@ -702,24 +754,26 @@ export class LayoutDirective {
* *
* ```javascript * ```javascript
* export class StreamDirectiveComponent { * export class StreamDirectiveComponent {
* tokens: TokenModel; *
* sessionId = 'toolbar-directive-example'; * sessionId = 'toolbar-directive-example';
* OPENVIDU_URL = 'https://localhost:4443'; * tokens!: TokenModel;
* OPENVIDU_SECRET = 'MY_SECRET';
* *
* constructor(private httpClient: HttpClient) { } * constructor(private httpClient: HttpClient) { }
* *
* async onJoinButtonClicked() { * async ngOnInit() {
* this.tokens = { * this.tokens = {
* webcam: await this.getToken(), * webcam: await this.getToken(),
* screen: await this.getToken() * screen: await this.getToken()
* }; * };
* } * }
*
* async getToken(): Promise<string> {
* // Returns an OpeVidu token
* }
*
* } * }
* ``` * ```
*
*/ */
@Directive({ @Directive({
selector: '[ovStream]' selector: '[ovStream]'
}) })

2
openvidu-components-angular/src/app/openvidu-call/call.component.html
View File

@ -20,7 +20,7 @@
[recordingActivityRecordingError]="recordingError" [recordingActivityRecordingError]="recordingError"
[toolbarSettingsButton]="true" [toolbarSettingsButton]="true"
> >
<!-- <div *ovActivitiesPanel>HOLA</div> --> <!-- <div *ovActivitiesPanel>HELLO</div> -->
<!-- <ov-toolbar *ovToolbar [activitiesPanelButton]="false" <!-- <ov-toolbar *ovToolbar [activitiesPanelButton]="false"
[chatPanelButton]="false"></ov-toolbar> --> [chatPanelButton]="false"></ov-toolbar> -->

12
openvidu-components-angular/src/app/openvidu-call/call.component.ts
View File

@ -8,10 +8,9 @@ import { RestService } from '../services/rest.service';
styleUrls: ['./call.component.scss'] styleUrls: ['./call.component.scss']
}) })
export class CallComponent implements OnInit { export class CallComponent implements OnInit {
value = true; value = true;
sessionId = 'daily-call'; sessionId = 'daily-call';
OPENVIDU_URL = 'https://localhost:4443';
OPENVIDU_SECRET = 'MY_SECRET';
tokens: TokenModel; tokens: TokenModel;
joinSessionClicked: boolean = false; joinSessionClicked: boolean = false;
@ -23,21 +22,12 @@ export class CallComponent implements OnInit {
constructor(private restService: RestService, private recordingService: RecordingService) { } constructor(private restService: RestService, private recordingService: RecordingService) { }
async ngOnInit() { async ngOnInit() {
// 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)
// };
// console.log(this.tokens)
const response = await this.restService.getTokensFromBackend(this.sessionId); const response = await this.restService.getTokensFromBackend(this.sessionId);
this.recordingList = response.recordings; this.recordingList = response.recordings;
this.tokens = { this.tokens = {
webcam: response.cameraToken, webcam: response.cameraToken,
screen: response.screenToken screen: response.screenToken
}; };
console.log(this.tokens); console.log(this.tokens);
} }