diff --git a/openvidu-components-angular/README.md b/openvidu-components-angular/README.md
index cb1fd113..848b002d 100644
--- a/openvidu-components-angular/README.md
+++ b/openvidu-components-angular/README.md
@@ -1,7 +1,12 @@
# Openvidu Angular
-The easier way to build powerfull OpenVidu videoconference frontend applications.
+The easier way to build powerful OpenVidu videoconference frontend applications.
+
+How to install:
+
+```
+npm install openvidu-angular
+```
-
diff --git a/openvidu-components-angular/src/app/app.module.ts b/openvidu-components-angular/src/app/app.module.ts
index b40bd410..fc1f1094 100644
--- a/openvidu-components-angular/src/app/app.module.ts
+++ b/openvidu-components-angular/src/app/app.module.ts
@@ -5,51 +5,57 @@ import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app.routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
import { environment } from 'src/environments/environment';
-// openvidu-angular
-
import { CallComponent } from './openvidu-call/call.component';
-import { ToolbarTestComponent } from './components/toolbar-test/toolbar-test.component';
import { DashboardComponent } from './dashboard/dashboard.component';
-import { ChatTestComponent } from './components/chat-test/chat-test.component';
-import { LayoutTestComponent } from './components/layout-test/layout-test.component';
-import { StreamTestComponent } from './components/stream-test/stream-test.component';
-
-import {
- OpenViduAngularModule,
- ChatPanelComponent,
- ToolbarComponent,
- SessionComponent,
- LayoutComponent,
- VideoconferenceComponent
-} from 'openvidu-angular';
-import { MatButtonModule } from '@angular/material/button';
import { TestingComponent } from './testing-app/testing.component';
-import { MatIconModule } from '@angular/material/icon';
+import { ToolbarDirectiveComponent } from './examples/toolbar-directive/toolbar-directive.component';
+import { ToolbarAdditionalButtonsDirectiveComponent } from './examples/toolbarAdditionalButtons-directive/toolbarAdditionalButtons-directive.component';
+import { LayoutDirectiveComponent } from './examples/layout-directive/layout-directive.component';
+import { StreamDirectiveComponent } from './examples/stream-directive/stream-directive.component';
+import { PanelDirectiveComponent } from './examples/panel-directive/panel-directive.component';
+import { ParticipantsPanelDirectiveComponent } from './examples/participantsPanel-directive/participantsPanel-directive.component';
+import { ParticipantPanelItemDirectiveComponent } from './examples/participantPanelItem-directive/participantPanelItem-directive.component';
+import { ParticipantPanelItemElementsDirectiveComponent } from './examples/participantPanelItemElements-directive/participantPanelItemElements-directive.component';
+import { ChatPanelDirectiveComponent } from './examples/chatPanel-directive/chatPanel-directive.component';
+
+// openvidu-angular
+import { OpenViduAngularModule } from 'openvidu-angular';
+import { ExamplesDashboardComponent } from './examples/examples-dashboard/examples-dashboard.component';
@NgModule({
declarations: [
AppComponent,
DashboardComponent,
CallComponent,
- ToolbarTestComponent,
- ChatTestComponent,
- LayoutTestComponent,
- StreamTestComponent,
- TestingComponent
+ TestingComponent,
+ ExamplesDashboardComponent,
+ ToolbarDirectiveComponent,
+ ToolbarAdditionalButtonsDirectiveComponent,
+ LayoutDirectiveComponent,
+ StreamDirectiveComponent,
+ PanelDirectiveComponent,
+ ParticipantsPanelDirectiveComponent,
+ ChatPanelDirectiveComponent,
+ ParticipantPanelItemDirectiveComponent,
+ ParticipantPanelItemElementsDirectiveComponent
],
imports: [
BrowserModule,
MatCheckboxModule,
MatButtonModule,
MatIconModule,
+ MatMenuModule,
BrowserAnimationsModule,
OpenViduAngularModule.forRoot(environment),
AppRoutingModule // Order is important, AppRoutingModule must be the last import for useHash working
],
- providers: [VideoconferenceComponent, ToolbarComponent, ChatPanelComponent, SessionComponent, LayoutComponent],
+ providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
diff --git a/openvidu-components-angular/src/app/app.routing.module.ts b/openvidu-components-angular/src/app/app.routing.module.ts
index 08d3b3ae..c40b865e 100644
--- a/openvidu-components-angular/src/app/app.routing.module.ts
+++ b/openvidu-components-angular/src/app/app.routing.module.ts
@@ -2,20 +2,34 @@ import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { CallComponent } from './openvidu-call/call.component';
-import { ToolbarTestComponent } from './components/toolbar-test/toolbar-test.component';
-import { ChatTestComponent } from './components/chat-test/chat-test.component';
-import { LayoutTestComponent } from './components/layout-test/layout-test.component';
-import { StreamTestComponent } from './components/stream-test/stream-test.component';
import { TestingComponent } from './testing-app/testing.component';
+import { ExamplesDashboardComponent } from './examples/examples-dashboard/examples-dashboard.component';
+import { ToolbarDirectiveComponent } from './examples/toolbar-directive/toolbar-directive.component';
+import { ToolbarAdditionalButtonsDirectiveComponent } from './examples/toolbarAdditionalButtons-directive/toolbarAdditionalButtons-directive.component';
+import { LayoutDirectiveComponent } from './examples/layout-directive/layout-directive.component';
+import { StreamDirectiveComponent } from './examples/stream-directive/stream-directive.component';
+import { PanelDirectiveComponent } from './examples/panel-directive/panel-directive.component';
+import { ParticipantsPanelDirectiveComponent } from './examples/participantsPanel-directive/participantsPanel-directive.component';
+import { ChatPanelDirectiveComponent } from './examples/chatPanel-directive/chatPanel-directive.component';
+
+import { ParticipantPanelItemElementsDirectiveComponent } from './examples/participantPanelItemElements-directive/participantPanelItemElements-directive.component';
+import { ParticipantPanelItemDirectiveComponent } from './examples/participantPanelItem-directive/participantPanelItem-directive.component';
const routes: Routes = [
{ path: '', component: DashboardComponent },
{ path: 'call', component: CallComponent },
- { path: 'toolbar', component: ToolbarTestComponent },
- { path: 'chat', component: ChatTestComponent },
- { path: 'layout', component: LayoutTestComponent },
- { path: 'stream', component: StreamTestComponent },
- { path: 'testing', component: TestingComponent }
+ { path: 'testing', component: TestingComponent },
+
+ { path: 'examples', component: ExamplesDashboardComponent},
+ { path: 'examples/toolbarDirective', component: ToolbarDirectiveComponent },
+ { path: 'examples/toolbarAdditionalButtonsDirective', component: ToolbarAdditionalButtonsDirectiveComponent },
+ { path: 'examples/layoutDirective', component: LayoutDirectiveComponent },
+ { path: 'examples/streamDirective', component: StreamDirectiveComponent },
+ { path: 'examples/panelDirective', component: PanelDirectiveComponent },
+ { path: 'examples/participantsPanelDirective', component: ParticipantsPanelDirectiveComponent },
+ { path: 'examples/chatPanelDirective', component: ChatPanelDirectiveComponent },
+ { path: 'examples/participantPanelItemDirective', component: ParticipantPanelItemDirectiveComponent },
+ { path: 'examples/participantPanelItemElementsDirective', component: ParticipantPanelItemElementsDirectiveComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true })],
diff --git a/openvidu-components-angular/src/app/components/chat-test/chat-test.component.html b/openvidu-components-angular/src/app/components/chat-test/chat-test.component.html
deleted file mode 100644
index 771d704f..00000000
--- a/openvidu-components-angular/src/app/components/chat-test/chat-test.component.html
+++ /dev/null
@@ -1,41 +0,0 @@
-chat-test works!
-
-
-
-
-
-
-
-
- WARNING: Like chat component need an active room, this page only allow check and test the UI
-
-
-
-
diff --git a/openvidu-components-angular/src/app/components/chat-test/chat-test.component.scss b/openvidu-components-angular/src/app/components/chat-test/chat-test.component.scss
deleted file mode 100644
index 0d695bbf..00000000
--- a/openvidu-components-angular/src/app/components/chat-test/chat-test.component.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-#chat-test-container{
- background: #d1d1d1;
- position: absolute;
- left: 50px;
- right: 50px;
- top: 150px;
- border: solid 2px;
- height: 500px;
- text-align: center;
-
-
- span {
- position: relative;
- top: 50%;
- font-size: medium;
- width: 50px;
- font-weight: bold;
- }
-}
-
-
-::ng-deep #chat-container {
- width: 400px !important;
- right: 0;
-}
-
diff --git a/openvidu-components-angular/src/app/components/chat-test/chat-test.component.spec.ts b/openvidu-components-angular/src/app/components/chat-test/chat-test.component.spec.ts
deleted file mode 100644
index cdb9dff9..00000000
--- a/openvidu-components-angular/src/app/components/chat-test/chat-test.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ChatTestComponent } from './chat-test.component';
-
-describe('ChatTestComponent', () => {
- let component: ChatTestComponent;
- let fixture: ComponentFixture;
-
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- declarations: [ ChatTestComponent ]
- })
- .compileComponents();
- });
-
- beforeEach(() => {
- fixture = TestBed.createComponent(ChatTestComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/openvidu-components-angular/src/app/components/chat-test/chat-test.component.ts b/openvidu-components-angular/src/app/components/chat-test/chat-test.component.ts
deleted file mode 100644
index e31358cc..00000000
--- a/openvidu-components-angular/src/app/components/chat-test/chat-test.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
- selector: 'app-chat-test',
- templateUrl: './chat-test.component.html',
- styleUrls: ['./chat-test.component.scss']
-})
-export class ChatTestComponent implements OnInit {
-
- constructor() { }
-
- ngOnInit(): void {
- }
-
-}
diff --git a/openvidu-components-angular/src/app/components/layout-test/layout-test.component.html b/openvidu-components-angular/src/app/components/layout-test/layout-test.component.html
deleted file mode 100644
index 57a716de..00000000
--- a/openvidu-components-angular/src/app/components/layout-test/layout-test.component.html
+++ /dev/null
@@ -1,44 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/openvidu-components-angular/src/app/components/layout-test/layout-test.component.scss b/openvidu-components-angular/src/app/components/layout-test/layout-test.component.scss
deleted file mode 100644
index cc774124..00000000
--- a/openvidu-components-angular/src/app/components/layout-test/layout-test.component.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-#layout-test-container{
- background: #d1d1d1;
- position: absolute;
- left: 50px;
- right: 50px;
- top: 150px;
- border: solid 2px;
- height: calc(100% - 250px);
- text-align: center;
-
- span {
- position: relative;
- top: 50%;
- font-size: medium;
- font-weight: bold;
- }
-}
-
-#buttons {
- position: absolute;
- bottom: 20px;
- left: 0;
- right: 0;
- margin: auto;
- text-align: center;
- button {
- margin: 15px;
- }
-}
\ No newline at end of file
diff --git a/openvidu-components-angular/src/app/components/layout-test/layout-test.component.spec.ts b/openvidu-components-angular/src/app/components/layout-test/layout-test.component.spec.ts
deleted file mode 100644
index 5444f33f..00000000
--- a/openvidu-components-angular/src/app/components/layout-test/layout-test.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { LayoutTestComponent } from './layout-test.component';
-
-describe('LayoutTestComponent', () => {
- let component: LayoutTestComponent;
- let fixture: ComponentFixture;
-
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- declarations: [ LayoutTestComponent ]
- })
- .compileComponents();
- });
-
- beforeEach(() => {
- fixture = TestBed.createComponent(LayoutTestComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/openvidu-components-angular/src/app/components/layout-test/layout-test.component.ts b/openvidu-components-angular/src/app/components/layout-test/layout-test.component.ts
deleted file mode 100644
index 20578d01..00000000
--- a/openvidu-components-angular/src/app/components/layout-test/layout-test.component.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ParticipantService, SidenavMenuService } from 'openvidu-angular';
-
-@Component({
- selector: 'app-layout-test',
- templateUrl: './layout-test.component.html',
- styleUrls: ['./layout-test.component.scss']
-})
-export class LayoutTestComponent implements OnInit {
- connectionIds: string[] = [];
- constructor(private menuService: SidenavMenuService, private participantService: ParticipantService) {}
-
- ngOnInit(): void {}
-
- addParticipant() {
- const id = `test${Math.random()}`;
- const event: any = { connection: { connectionId: id } };
- this.connectionIds.push(id);
- //TODO
- // this.remoteUserService.add(event, null);
- }
-
- deleteParticipant() {
- if (this.connectionIds.length > 0) {
- //TODO:
- // this.remoteUserService.removeUserByConnectionId(this.connectionIds.pop());
- }
- }
-
- toggleMenu() {
- // this.menuService.toggleMenu();
- }
-}
diff --git a/openvidu-components-angular/src/app/components/stream-test/stream-test.component.html b/openvidu-components-angular/src/app/components/stream-test/stream-test.component.html
deleted file mode 100644
index 5d52c209..00000000
--- a/openvidu-components-angular/src/app/components/stream-test/stream-test.component.html
+++ /dev/null
@@ -1,37 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/openvidu-components-angular/src/app/components/stream-test/stream-test.component.scss b/openvidu-components-angular/src/app/components/stream-test/stream-test.component.scss
deleted file mode 100644
index aa9eb0be..00000000
--- a/openvidu-components-angular/src/app/components/stream-test/stream-test.component.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-#stream-test-container{
- background: #d1d1d1;
- position: absolute;
- left: 50px;
- right: 50px;
- top: 150px;
- border: solid 2px;
- height: calc(100% - 250px);
- text-align: center;
-
- span {
- position: relative;
- top: 50%;
- font-size: medium;
- font-weight: bold;
- }
-}
diff --git a/openvidu-components-angular/src/app/components/stream-test/stream-test.component.spec.ts b/openvidu-components-angular/src/app/components/stream-test/stream-test.component.spec.ts
deleted file mode 100644
index ff8823e7..00000000
--- a/openvidu-components-angular/src/app/components/stream-test/stream-test.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { StreamTestComponent } from './stream-test.component';
-
-describe('StreamTestComponent', () => {
- let component: StreamTestComponent;
- let fixture: ComponentFixture;
-
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- declarations: [ StreamTestComponent ]
- })
- .compileComponents();
- });
-
- beforeEach(() => {
- fixture = TestBed.createComponent(StreamTestComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/openvidu-components-angular/src/app/components/stream-test/stream-test.component.ts b/openvidu-components-angular/src/app/components/stream-test/stream-test.component.ts
deleted file mode 100644
index d5934c76..00000000
--- a/openvidu-components-angular/src/app/components/stream-test/stream-test.component.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ParticipantModel } from 'openvidu-angular';
-
-@Component({
- selector: 'app-stream-test',
- templateUrl: './stream-test.component.html',
- styleUrls: ['./stream-test.component.scss']
-})
-export class StreamTestComponent implements OnInit {
-
- stream: ParticipantModel;
- constructor() { }
-
- ngOnInit(): void {
- // this.stream = new ParticipantModel();
- }
-
-}
diff --git a/openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.html b/openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.html
deleted file mode 100644
index c17a109c..00000000
--- a/openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.html
+++ /dev/null
@@ -1,32 +0,0 @@
-
-
-
-
-
-
-
-
- WARNING: Like toolbar component need a active room, this page only allow check and test the UI
-
-
diff --git a/openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.scss b/openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.scss
deleted file mode 100644
index c2cc3e9e..00000000
--- a/openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-#toolbar-test-container{
- background: #d1d1d1;
- position: absolute;
- left: 50px;
- right: 50px;
- top: 150px;
- border: solid 2px;
- height: 300px;
- text-align: center;
-
- span {
- position: relative;
- top: 50%;
- font-size: medium;
- font-weight: bold;
- }
-}
-
diff --git a/openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.spec.ts b/openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.spec.ts
deleted file mode 100644
index c467e93e..00000000
--- a/openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ToolbarTestComponent } from './toolbar-test.component';
-
-describe('ToolbarTestComponent', () => {
- let component: ToolbarTestComponent;
- let fixture: ComponentFixture;
-
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- declarations: [ ToolbarTestComponent ]
- })
- .compileComponents();
- });
-
- beforeEach(() => {
- fixture = TestBed.createComponent(ToolbarTestComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.ts b/openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.ts
deleted file mode 100644
index 08157c84..00000000
--- a/openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
- selector: 'app-toolbar-test',
- templateUrl: './toolbar-test.component.html',
- styleUrls: ['./toolbar-test.component.scss',]
-})
-export class ToolbarTestComponent implements OnInit {
-
- constructor() { }
-
- ngOnInit(): void {
- }
-
-}
diff --git a/openvidu-components-angular/src/app/examples/chatPanel-directive/chatPanel-directive.component.scss b/openvidu-components-angular/src/app/examples/chatPanel-directive/chatPanel-directive.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/openvidu-components-angular/src/app/examples/chatPanel-directive/chatPanel-directive.component.ts b/openvidu-components-angular/src/app/examples/chatPanel-directive/chatPanel-directive.component.ts
index 8da405b1..afbab86e 100644
--- a/openvidu-components-angular/src/app/examples/chatPanel-directive/chatPanel-directive.component.ts
+++ b/openvidu-components-angular/src/app/examples/chatPanel-directive/chatPanel-directive.component.ts
@@ -1,12 +1,70 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { TokenModel, Signal } from 'openvidu-angular';
+import { Session, SignalOptions } from 'openvidu-browser';
+import { RestService } from 'src/app/services/rest.service';
@Component({
selector: 'app-chatPanel-directive',
- template: ` toolbar-directive works!
`,
- styleUrls: ['./chatPanel-directive.component.scss']
+ template: `
+
+
+
+ `,
+ styles: [
+ `
+ #my-panel {
+ background: #aafffc;
+ height: 100%;
+ overflow: hidden;
+ text-align: center;
+ }
+ `
+ ]
})
-export class ChatPanelDirectiveComponent implements OnInit {
- constructor() {}
+export class ChatPanelDirectiveComponent {
+ tokens: TokenModel;
+ sessionId = 'chat-panel-directive-example';
+ OPENVIDU_URL = 'https://localhost:4443';
+ OPENVIDU_SECRET = 'MY_SECRET';
+ session: Session;
+ messages: string[] = [];
+ constructor(private restService: RestService) {}
- ngOnInit(): void {}
+ 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)
+ };
+ }
+
+ onSessionCreated(session: Session) {
+ this.session = session;
+ this.session.on(`signal:${Signal.CHAT}`, (event: any) => {
+ const msg = JSON.parse(event.data).message;
+ this.messages.push(msg);
+ });
+ }
+
+ send(message: string): void {
+ const signalOptions: SignalOptions = {
+ data: JSON.stringify({ message }),
+ type: Signal.CHAT,
+ to: undefined
+ };
+ this.session.signal(signalOptions);
+ }
}
diff --git a/openvidu-components-angular/src/app/examples/examples-dashboard/examples-dashboard.component.ts b/openvidu-components-angular/src/app/examples/examples-dashboard/examples-dashboard.component.ts
index 9f601889..fc9e2ad0 100644
--- a/openvidu-components-angular/src/app/examples/examples-dashboard/examples-dashboard.component.ts
+++ b/openvidu-components-angular/src/app/examples/examples-dashboard/examples-dashboard.component.ts
@@ -13,7 +13,7 @@ export class ExamplesDashboardComponent implements OnInit {
ngOnInit(): void {}
goTo(path: string) {
- this.router.navigate([`/${path}`]);
+ this.router.navigate([`examples/${path}`]);
}
}
diff --git a/openvidu-components-angular/src/app/examples/layout-directive/layout-directive.component.ts b/openvidu-components-angular/src/app/examples/layout-directive/layout-directive.component.ts
index 27460486..d6087661 100644
--- a/openvidu-components-angular/src/app/examples/layout-directive/layout-directive.component.ts
+++ b/openvidu-components-angular/src/app/examples/layout-directive/layout-directive.component.ts
@@ -1,11 +1,75 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ParticipantAbstractModel, ParticipantService, TokenModel } from 'openvidu-angular';
+import { Subscription } from 'rxjs';
+import { RestService } from 'src/app/services/rest.service';
@Component({
selector: 'app-layout-directive',
- template: ` layout-directive works!
`,
-})
-export class LayoutDirectiveComponent implements OnInit {
- constructor() {}
+ styles: [
+ `
+ .container {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ }
- ngOnInit(): void {}
+ .item {
+ flex: 0 50%;
+ height: 250px;
+ margin-bottom: 2%;
+ }
+ `
+ ],
+ template: `
+
+
+
+ `
+})
+export class LayoutDirectiveComponent implements OnInit, OnDestroy {
+ tokens: TokenModel;
+ sessionId = 'layout-directive-example';
+ OPENVIDU_URL = 'https://localhost:4443';
+ OPENVIDU_SECRET = 'MY_SECRET';
+ localParticipant: ParticipantAbstractModel;
+ remoteParticipants: ParticipantAbstractModel[];
+ localParticipantSubs: Subscription;
+ remoteParticipantsSubs: Subscription;
+
+ constructor(private restService: RestService, private participantService: ParticipantService) {}
+
+ ngOnInit(): void {
+ this.subscribeToParticipants();
+ }
+
+ ngOnDestroy() {
+ this.localParticipantSubs.unsubscribe();
+ this.remoteParticipantsSubs.unsubscribe();
+ }
+ subscribeToParticipants() {
+ this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => {
+ this.localParticipant = p;
+ });
+
+ this.remoteParticipantsSubs = this.participantService.remoteParticipantsObs.subscribe((participants) => {
+ this.remoteParticipants = participants;
+ });
+ }
+
+ 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)
+ };
+ }
}
diff --git a/openvidu-components-angular/src/app/examples/layout-directive/toolbar-directive.component.scss b/openvidu-components-angular/src/app/examples/layout-directive/toolbar-directive.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/openvidu-components-angular/src/app/examples/panel-directive/panel-directive.component.scss b/openvidu-components-angular/src/app/examples/panel-directive/panel-directive.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/openvidu-components-angular/src/app/examples/panel-directive/panel-directive.component.ts b/openvidu-components-angular/src/app/examples/panel-directive/panel-directive.component.ts
index 381dc11d..7f0538e3 100644
--- a/openvidu-components-angular/src/app/examples/panel-directive/panel-directive.component.ts
+++ b/openvidu-components-angular/src/app/examples/panel-directive/panel-directive.component.ts
@@ -1,12 +1,33 @@
import { Component, OnInit } from '@angular/core';
+import { TokenModel } from 'openvidu-angular';
+import { RestService } from 'src/app/services/rest.service';
@Component({
selector: 'app-panel-directive',
- template: ` toolbar-directive works!
`,
- styleUrls: ['./panel-directive.component.scss']
+ template: `
+
+
+
+ `
})
export class PanelDirectiveComponent implements OnInit {
- constructor() {}
+ tokens: TokenModel;
+ sessionId = 'panel-directive-example';
+ OPENVIDU_URL = 'https://localhost:4443';
+ OPENVIDU_SECRET = 'MY_SECRET';
+ constructor(private restService: RestService) {}
+
+ 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)
+ };
+ }
ngOnInit(): void {}
}
diff --git a/openvidu-components-angular/src/app/examples/participantPanelItem-directive/participantPanelItem-directive.component.ts b/openvidu-components-angular/src/app/examples/participantPanelItem-directive/participantPanelItem-directive.component.ts
new file mode 100644
index 00000000..a87343e6
--- /dev/null
+++ b/openvidu-components-angular/src/app/examples/participantPanelItem-directive/participantPanelItem-directive.component.ts
@@ -0,0 +1,60 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ParticipantAbstractModel, ParticipantService, TokenModel } from 'openvidu-angular';
+import { Subscription } from 'rxjs';
+import { RestService } from 'src/app/services/rest.service';
+
+@Component({
+ selector: 'app-participantPanelItem-directive',
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ styles: [``]
+})
+export class ParticipantPanelItemDirectiveComponent 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(private restService: RestService, private participantService: ParticipantService) {}
+
+ ngOnInit(): void {
+ this.subscribeToParticipants();
+ }
+
+ ngOnDestroy() {
+ this.localParticipantSubs.unsubscribe();
+ this.remoteParticipantsSubs.unsubscribe();
+ }
+
+ 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)
+ };
+ }
+
+ subscribeToParticipants() {
+ this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => {
+ this.localParticipant = p;
+ });
+
+ this.remoteParticipantsSubs = this.participantService.remoteParticipantsObs.subscribe((participants) => {
+ this.remoteParticipants = participants;
+ });
+ }
+}
diff --git a/openvidu-components-angular/src/app/examples/participantPanelItemElements-directive/participantPanelItemElements-directive.component.ts b/openvidu-components-angular/src/app/examples/participantPanelItemElements-directive/participantPanelItemElements-directive.component.ts
new file mode 100644
index 00000000..be3b32a6
--- /dev/null
+++ b/openvidu-components-angular/src/app/examples/participantPanelItemElements-directive/participantPanelItemElements-directive.component.ts
@@ -0,0 +1,40 @@
+import { Component } from '@angular/core';
+import { ParticipantService, TokenModel } from 'openvidu-angular';
+import { RestService } from 'src/app/services/rest.service';
+
+@Component({
+ selector: 'app-participantPanelItemElements-directive',
+ template: `
+
+
+
+ - {{ localParticipant.nickname }}
+
+
+
+
participantsPanel-directive works!
`,
- styleUrls: ['./participantsPanel-directive.component.scss']
-})
-export class ParticipantsPanelDirectiveComponent implements OnInit {
- constructor() {}
+ template: `
+
+
+
+ - {{localParticipant.nickname}}
+
- ngOnInit(): void {}
+
+
stream-directive works!
`,
+ styles: [
+ `
+ p {
+ position: absolute;
+ bottom: 0;
+ border: 2px solid;
+ background: #000000;
+ }
+ `
+ ],
+ template: `
+
+
+
+
{{ stream.participant.nickname }}
+
-
-
+
+
`
@@ -18,11 +18,9 @@ export class ToolbarDirectiveComponent implements OnInit {
sessionId = 'toolbar-directive-example';
OPENVIDU_URL = 'https://localhost:4443';
OPENVIDU_SECRET = 'MY_SECRET';
- constructor(
- private restService: RestService,
- private participantService: ParticipantService,
- private openviduService: OpenViduService
- ) {}
+ publishVideo = true;
+ publishAudio = true;
+ constructor(private restService: RestService, private openviduService: OpenViduService) {}
ngOnInit(): void {}
@@ -34,7 +32,12 @@ export class ToolbarDirectiveComponent implements OnInit {
}
toggleVideo() {
- const publishVideo = !this.participantService.hasCameraVideoActive();
- // this.openviduService.publishVideo(this.participantService.getMyCameraPublisher(), publishVideo);
+ this.publishVideo = !this.publishVideo;
+ this.openviduService.publishVideo(this.publishVideo);
+ }
+
+ toggleAudio() {
+ this.publishAudio = !this.publishAudio;
+ this.openviduService.publishAudio(this.publishAudio);
}
}
diff --git a/openvidu-components-angular/src/app/examples/toolbarAdditionalButtons-directive/toolbar-directive.component.scss b/openvidu-components-angular/src/app/examples/toolbarAdditionalButtons-directive/toolbar-directive.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/openvidu-components-angular/src/app/examples/toolbarAdditionalButtons-directive/toolbar-directive.component.ts b/openvidu-components-angular/src/app/examples/toolbarAdditionalButtons-directive/toolbar-directive.component.ts
deleted file mode 100644
index 69bfff13..00000000
--- a/openvidu-components-angular/src/app/examples/toolbarAdditionalButtons-directive/toolbar-directive.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
- selector: 'app-toolbarAdditionalButtons-directive',
- template: ` toolbar-directive works!
`,
-})
-export class ToolbarAdditionalButtonsDirectiveComponent implements OnInit {
- constructor() {}
-
- ngOnInit(): void {}
-}
diff --git a/openvidu-components-angular/src/app/examples/toolbarAdditionalButtons-directive/toolbarAdditionalButtons-directive.component.ts b/openvidu-components-angular/src/app/examples/toolbarAdditionalButtons-directive/toolbarAdditionalButtons-directive.component.ts
new file mode 100644
index 00000000..ac2d79fa
--- /dev/null
+++ b/openvidu-components-angular/src/app/examples/toolbarAdditionalButtons-directive/toolbarAdditionalButtons-directive.component.ts
@@ -0,0 +1,43 @@
+import { Component } from '@angular/core';
+import { OpenViduService, ParticipantService, TokenModel } from 'openvidu-angular';
+import { RestService } from 'src/app/services/rest.service';
+
+@Component({
+ selector: 'app-toolbarAdditionalButtons-directive',
+ template: `
+
+
+
+
+
+
+ `
+})
+export class ToolbarAdditionalButtonsDirectiveComponent {
+ tokens: TokenModel;
+ sessionId = 'toolbar-additionalbtn-directive-example';
+ OPENVIDU_URL = 'https://localhost:4443';
+ OPENVIDU_SECRET = 'MY_SECRET';
+ constructor(
+ private restService: RestService,
+ 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)
+ };
+ }
+
+ toggleVideo() {
+ const publishVideo = !this.participantService.isMyVideoActive();
+ this.openviduService.publishVideo(publishVideo);
+ }
+
+ toggleAudio() {
+ const publishAudio = !this.participantService.isMyAudioActive();
+ this.openviduService.publishAudio(publishAudio);
+ }
+}
diff --git a/openvidu-components-angular/src/app/openvidu-call/call.component.html b/openvidu-components-angular/src/app/openvidu-call/call.component.html
index c49c6a98..6d1fa7e9 100644
--- a/openvidu-components-angular/src/app/openvidu-call/call.component.html
+++ b/openvidu-components-angular/src/app/openvidu-call/call.component.html
@@ -8,9 +8,11 @@
(onToolbarFullscreenButtonClicked)="onToolbarFullscreenButtonClicked()"
(onToolbarParticipantsPanelButtonClicked)="onToolbarParticipantsPanelButtonClicked()"
(onToolbarChatPanelButtonClicked)="onToolbarChatPanelButtonClicked()"
- [prejoin]="false"
+ [minimal]="false"
>
+
+
diff --git a/openvidu-components-angular/src/app/openvidu-call/call.component.ts b/openvidu-components-angular/src/app/openvidu-call/call.component.ts
index 7ea9911e..e8a6f305 100644
--- a/openvidu-components-angular/src/app/openvidu-call/call.component.ts
+++ b/openvidu-components-angular/src/app/openvidu-call/call.component.ts
@@ -8,7 +8,9 @@ import { Router } from '@angular/router';
})
export class CallComponent implements OnInit {
value = true;
- sessionId = 'qqqq';
+ sessionId = 'daily-call';
+ OPENVIDU_URL = 'https://localhost:4443';
+ OPENVIDU_SECRET = 'MY_SECRET';
tokens: { webcam: string; screen: string };
joinSessionClicked: boolean = false;
@@ -19,18 +21,22 @@ export class CallComponent implements OnInit {
async ngOnInit() {
this.tokens = {
- webcam: await this.restService.getToken(this.sessionId),
- screen: await this.restService.getToken(this.sessionId)
+ 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)
};
}
async onJoinClicked() {
console.warn('VC JOIN BUTTON CLICKED');
- this.tokens = {
- webcam: await this.restService.getToken(this.sessionId),
- screen: await this.restService.getToken(this.sessionId)
- };
+ // this.tokens = {
+ // webcam: await this.restService.getToken(this.sessionId),
+ // screen: await this.restService.getToken(this.sessionId)
+ // };
+
+ console.log(await this.restService.getToken(this.sessionId))
+
+
// setInterval(() => {
// this.value = !this.value;
diff --git a/openvidu-components-angular/src/app/services/rest.service.ts b/openvidu-components-angular/src/app/services/rest.service.ts
index 35ed5377..cec4921e 100644
--- a/openvidu-components-angular/src/app/services/rest.service.ts
+++ b/openvidu-components-angular/src/app/services/rest.service.ts
@@ -13,68 +13,77 @@ export class RestService {
this.baseHref = '/' + (!!window.location.pathname.split('/')[1] ? window.location.pathname.split('/')[1] + '/' : '');
}
async getToken(sessionId: string, openviduServerUrl?: string, openviduSecret?: string): Promise {
- // if (!!openviduServerUrl && !!openviduSecret) {
- // const _sessionId = await this.createSession(sessionId, openviduServerUrl, openviduSecret);
- // return await this.createToken(_sessionId, openviduServerUrl, openviduSecret);
- // }
- try {
- return lastValueFrom(this.http.post(this.baseHref + 'call', { sessionId }));
- } catch (error) {
- if (error.status === 404) {
- throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' };
- }
- throw error;
+ if (!!openviduServerUrl && !!openviduSecret) {
+ const _sessionId = await this.createSession(sessionId, openviduServerUrl, openviduSecret);
+ return await this.createToken(_sessionId, openviduServerUrl, openviduSecret);
}
+ // try {
+ // return lastValueFrom(this.http.post(this.baseHref + 'call', { sessionId }));
+ // } catch (error) {
+ // if (error.status === 404) {
+ // throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' };
+ // }
+ // throw error;
+ // }
}
- // private createSession(sessionId: string, openviduServerUrl: string, openviduSecret: string): Promise {
- // return new Promise((resolve, reject) => {
- // const body = JSON.stringify({ customSessionId: sessionId });
- // const options = {
- // headers: new HttpHeaders({
- // Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + openviduSecret),
- // 'Content-Type': 'application/json'
- // })
- // };
- // return this.http
- // .post(openviduServerUrl + '/openvidu/api/sessions', body, options)
- // .pipe(
- // catchError((error) => {
- // if (error.status === 409) {
- // resolve(sessionId);
- // }
- // if (error.statusText === 'Unknown Error') {
- // reject({ status: 401, message: 'ERR_CERT_AUTHORITY_INVALID' });
- // }
- // return observableThrowError(error);
- // })
- // )
- // .subscribe((response) => {
- // resolve(response.id);
- // });
- // });
- // }
+ /**
+ *
+ * * WARNING: This is why this tutorial is an insecure application.
+ * * We need to ask OpenVidu Server for a user token in order to connect to our session.
+ * * This process should entirely take place in our server-side
+ */
+ private createSession(sessionId: string, openviduServerUrl: string, openviduSecret: string): Promise {
+ return new Promise((resolve, reject) => {
+ const body = JSON.stringify({ customSessionId: sessionId });
+ const options = {
+ headers: new HttpHeaders({
+ Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + openviduSecret),
+ 'Content-Type': 'application/json'
+ })
+ };
+ return this.http
+ .post(openviduServerUrl + '/openvidu/api/sessions', body, options)
+ .pipe(
+ catchError((error) => {
+ if (error.status === 409) {
+ resolve(sessionId);
+ }
+ if (error.statusText === 'Unknown Error') {
+ reject({ status: 401, message: 'ERR_CERT_AUTHORITY_INVALID' });
+ }
+ return observableThrowError(error);
+ })
+ )
+ .subscribe((response) => {
+ resolve(response.id);
+ });
+ });
+ }
- // private createToken(sessionId: string, openviduServerUrl: string, openviduSecret: string): Promise {
- // return new Promise((resolve, reject) => {
- // const body = JSON.stringify({});
- // const options = {
- // headers: new HttpHeaders({
- // Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + openviduSecret),
- // 'Content-Type': 'application/json'
- // })
- // };
- // return this.http
- // .post(openviduServerUrl + '/openvidu/api/sessions/' + sessionId + '/connection', body, options)
- // .pipe(
- // catchError((error) => {
- // reject(error);
- // return observableThrowError(error);
- // })
- // )
- // .subscribe((response) => {
- // resolve(response.token);
- // });
- // });
- // }
+ private createToken(sessionId: string, openviduServerUrl: string, openviduSecret: string): Promise {
+ return new Promise((resolve, reject) => {
+ const body = JSON.stringify({});
+ const options = {
+ headers: new HttpHeaders({
+ Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + openviduSecret),
+ 'Content-Type': 'application/json'
+ })
+ };
+ return this.http
+ .post(openviduServerUrl + '/openvidu/api/sessions/' + sessionId + '/connection', body, options)
+ .pipe(
+ catchError((error) => {
+ reject(error);
+ return observableThrowError(error);
+ })
+ )
+ .subscribe((response) => {
+
+ console.warn(response);
+
+ resolve(response.token);
+ });
+ });
+ }
}
- openvidu-components-angular
-
-
-
-
-