mirror of https://github.com/OpenVidu/openvidu.git
openvidu-components: Added directive examples and clean testapp
- Clean test components - Avoid using backend in developmentpull/713/head
csantosm
parent
aa0c78b882
commit
4fc878f796
|
|
@ -1,7 +1,12 @@
|
||||||
# Openvidu Angular
|
# 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
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,51 +5,57 @@ import { NgModule } from '@angular/core';
|
||||||
import { AppRoutingModule } from './app.routing.module';
|
import { AppRoutingModule } from './app.routing.module';
|
||||||
import { AppComponent } from './app.component';
|
import { AppComponent } from './app.component';
|
||||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
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';
|
import { environment } from 'src/environments/environment';
|
||||||
|
|
||||||
// openvidu-angular
|
|
||||||
|
|
||||||
import { CallComponent } from './openvidu-call/call.component';
|
import { CallComponent } from './openvidu-call/call.component';
|
||||||
import { ToolbarTestComponent } from './components/toolbar-test/toolbar-test.component';
|
|
||||||
import { DashboardComponent } from './dashboard/dashboard.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 { 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({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
AppComponent,
|
AppComponent,
|
||||||
DashboardComponent,
|
DashboardComponent,
|
||||||
CallComponent,
|
CallComponent,
|
||||||
ToolbarTestComponent,
|
TestingComponent,
|
||||||
ChatTestComponent,
|
ExamplesDashboardComponent,
|
||||||
LayoutTestComponent,
|
ToolbarDirectiveComponent,
|
||||||
StreamTestComponent,
|
ToolbarAdditionalButtonsDirectiveComponent,
|
||||||
TestingComponent
|
LayoutDirectiveComponent,
|
||||||
|
StreamDirectiveComponent,
|
||||||
|
PanelDirectiveComponent,
|
||||||
|
ParticipantsPanelDirectiveComponent,
|
||||||
|
ChatPanelDirectiveComponent,
|
||||||
|
ParticipantPanelItemDirectiveComponent,
|
||||||
|
ParticipantPanelItemElementsDirectiveComponent
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
MatCheckboxModule,
|
MatCheckboxModule,
|
||||||
MatButtonModule,
|
MatButtonModule,
|
||||||
MatIconModule,
|
MatIconModule,
|
||||||
|
MatMenuModule,
|
||||||
BrowserAnimationsModule,
|
BrowserAnimationsModule,
|
||||||
OpenViduAngularModule.forRoot(environment),
|
OpenViduAngularModule.forRoot(environment),
|
||||||
AppRoutingModule // Order is important, AppRoutingModule must be the last import for useHash working
|
AppRoutingModule // Order is important, AppRoutingModule must be the last import for useHash working
|
||||||
],
|
],
|
||||||
providers: [VideoconferenceComponent, ToolbarComponent, ChatPanelComponent, SessionComponent, LayoutComponent],
|
providers: [],
|
||||||
bootstrap: [AppComponent]
|
bootstrap: [AppComponent]
|
||||||
})
|
})
|
||||||
export class AppModule {}
|
export class AppModule {}
|
||||||
|
|
|
||||||
|
|
@ -2,20 +2,34 @@ import { NgModule } from '@angular/core';
|
||||||
import { Routes, RouterModule } from '@angular/router';
|
import { Routes, RouterModule } from '@angular/router';
|
||||||
import { DashboardComponent } from './dashboard/dashboard.component';
|
import { DashboardComponent } from './dashboard/dashboard.component';
|
||||||
import { CallComponent } from './openvidu-call/call.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 { 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 = [
|
const routes: Routes = [
|
||||||
{ path: '', component: DashboardComponent },
|
{ path: '', component: DashboardComponent },
|
||||||
{ path: 'call', component: CallComponent },
|
{ path: 'call', component: CallComponent },
|
||||||
{ path: 'toolbar', component: ToolbarTestComponent },
|
{ path: 'testing', component: TestingComponent },
|
||||||
{ path: 'chat', component: ChatTestComponent },
|
|
||||||
{ path: 'layout', component: LayoutTestComponent },
|
{ path: 'examples', component: ExamplesDashboardComponent},
|
||||||
{ path: 'stream', component: StreamTestComponent },
|
{ path: 'examples/toolbarDirective', component: ToolbarDirectiveComponent },
|
||||||
{ path: 'testing', component: TestingComponent }
|
{ 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({
|
@NgModule({
|
||||||
imports: [RouterModule.forRoot(routes, { useHash: true })],
|
imports: [RouterModule.forRoot(routes, { useHash: true })],
|
||||||
|
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
<p>chat-test works!</p>
|
|
||||||
<!-- Toolbar -->
|
|
||||||
<div class="toolbar" role="banner">
|
|
||||||
<img width="40" alt="Openvidu Logo" src="assets/images/openvidu_globe.png" />
|
|
||||||
<span>openvidu-components-angular</span>
|
|
||||||
<div class="spacer"></div>
|
|
||||||
<a aria-label="OpenVidu on twitter" target="_blank" rel="noopener" href="https://twitter.com/openvidu" title="Twitter">
|
|
||||||
<svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
|
|
||||||
<rect width="400" height="400" fill="none" />
|
|
||||||
<path
|
|
||||||
d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23"
|
|
||||||
fill="#fff"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="back-button" >
|
|
||||||
|
|
||||||
|
|
||||||
<a routerLink="/">
|
|
||||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
|
||||||
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2" />
|
|
||||||
<path d="M0 0h24v24H0z" fill="none" />
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a routerLink="/">
|
|
||||||
Go back to Dashboard page
|
|
||||||
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="chat-test-container">
|
|
||||||
<!-- OPENVIDU CHAT -->
|
|
||||||
<ov-chat-panel></ov-chat-panel>
|
|
||||||
<span>WARNING: Like chat component need an active room, this page only allow check and test the UI</span>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -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<ChatTestComponent>;
|
|
||||||
|
|
||||||
beforeEach(async () => {
|
|
||||||
await TestBed.configureTestingModule({
|
|
||||||
declarations: [ ChatTestComponent ]
|
|
||||||
})
|
|
||||||
.compileComponents();
|
|
||||||
});
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
fixture = TestBed.createComponent(ChatTestComponent);
|
|
||||||
component = fixture.componentInstance;
|
|
||||||
fixture.detectChanges();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should create', () => {
|
|
||||||
expect(component).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -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 {
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
|
|
||||||
<!-- Toolbar -->
|
|
||||||
<div class="toolbar" role="banner">
|
|
||||||
<img width="40" alt="Openvidu Logo" src="assets/images/openvidu_globe.png" />
|
|
||||||
<span>openvidu-components-angular</span>
|
|
||||||
<div class="spacer"></div>
|
|
||||||
<a aria-label="OpenVidu on twitter" target="_blank" rel="noopener" href="https://twitter.com/openvidu" title="Twitter">
|
|
||||||
<svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
|
|
||||||
<rect width="400" height="400" fill="none" />
|
|
||||||
<path
|
|
||||||
d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23"
|
|
||||||
fill="#fff"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="back-button">
|
|
||||||
<a routerLink="/">
|
|
||||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
|
||||||
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2" />
|
|
||||||
<path d="M0 0h24v24H0z" fill="none" />
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
|
|
||||||
<a routerLink="/">Go back to Dashboard page</a>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="buttons">
|
|
||||||
<button mat-raised-button (click)="addParticipant()">Add participant</button>
|
|
||||||
<button mat-raised-button color="warn" (click)="deleteParticipant()">Delete participant</button>
|
|
||||||
<button mat-raised-button color="primary" (click)="toggleMenu()">Toggle Chat</button>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="layout-test-container">
|
|
||||||
<!-- OPENVIDU LAYOUT -->
|
|
||||||
<ov-layout></ov-layout>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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<LayoutTestComponent>;
|
|
||||||
|
|
||||||
beforeEach(async () => {
|
|
||||||
await TestBed.configureTestingModule({
|
|
||||||
declarations: [ LayoutTestComponent ]
|
|
||||||
})
|
|
||||||
.compileComponents();
|
|
||||||
});
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
fixture = TestBed.createComponent(LayoutTestComponent);
|
|
||||||
component = fixture.componentInstance;
|
|
||||||
fixture.detectChanges();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should create', () => {
|
|
||||||
expect(component).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -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();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,37 +0,0 @@
|
||||||
|
|
||||||
<!-- Toolbar -->
|
|
||||||
<div class="toolbar" role="banner">
|
|
||||||
<img width="40" alt="Openvidu Logo" src="assets/images/openvidu_globe.png" />
|
|
||||||
<span>openvidu-components-angular</span>
|
|
||||||
<div class="spacer"></div>
|
|
||||||
<a aria-label="OpenVidu on twitter" target="_blank" rel="noopener" href="https://twitter.com/openvidu" title="Twitter">
|
|
||||||
<svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
|
|
||||||
<rect width="400" height="400" fill="none" />
|
|
||||||
<path
|
|
||||||
d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23"
|
|
||||||
fill="#fff"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="back-button">
|
|
||||||
<a routerLink="/">
|
|
||||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
|
||||||
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2" />
|
|
||||||
<path d="M0 0h24v24H0z" fill="none" />
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
|
|
||||||
<a routerLink="/">Go back to Dashboard page</a>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="stream-test-container">
|
|
||||||
|
|
||||||
<ov-stream [stream]="stream"></ov-stream>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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<StreamTestComponent>;
|
|
||||||
|
|
||||||
beforeEach(async () => {
|
|
||||||
await TestBed.configureTestingModule({
|
|
||||||
declarations: [ StreamTestComponent ]
|
|
||||||
})
|
|
||||||
.compileComponents();
|
|
||||||
});
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
fixture = TestBed.createComponent(StreamTestComponent);
|
|
||||||
component = fixture.componentInstance;
|
|
||||||
fixture.detectChanges();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should create', () => {
|
|
||||||
expect(component).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -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();
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,32 +0,0 @@
|
||||||
<!-- Toolbar -->
|
|
||||||
<div class="toolbar" role="banner">
|
|
||||||
<img width="40" alt="Openvidu Logo" src="assets/images/openvidu_globe.png" />
|
|
||||||
<span>openvidu-components-angular</span>
|
|
||||||
<div class="spacer"></div>
|
|
||||||
<a aria-label="OpenVidu on twitter" target="_blank" rel="noopener" href="https://twitter.com/openvidu" title="Twitter">
|
|
||||||
<svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
|
|
||||||
<rect width="400" height="400" fill="none" />
|
|
||||||
<path
|
|
||||||
d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23"
|
|
||||||
fill="#fff"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="back-button">
|
|
||||||
<a routerLink="/">
|
|
||||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
|
||||||
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2" />
|
|
||||||
<path d="M0 0h24v24H0z" fill="none" />
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
<a routerLink="/">Go back to Dashboard page</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="toolbar-test-container">
|
|
||||||
<!-- OPENVIDU TOOLBAR -->
|
|
||||||
<ov-toolbar></ov-toolbar>
|
|
||||||
<span>WARNING: Like toolbar component need a active room, this page only allow check and test the UI</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -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<ToolbarTestComponent>;
|
|
||||||
|
|
||||||
beforeEach(async () => {
|
|
||||||
await TestBed.configureTestingModule({
|
|
||||||
declarations: [ ToolbarTestComponent ]
|
|
||||||
})
|
|
||||||
.compileComponents();
|
|
||||||
});
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
fixture = TestBed.createComponent(ToolbarTestComponent);
|
|
||||||
component = fixture.componentInstance;
|
|
||||||
fixture.detectChanges();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should create', () => {
|
|
||||||
expect(component).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -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 {
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -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({
|
@Component({
|
||||||
selector: 'app-chatPanel-directive',
|
selector: 'app-chatPanel-directive',
|
||||||
template: ` <p>toolbar-directive works!</p> `,
|
template: `
|
||||||
styleUrls: ['./chatPanel-directive.component.scss']
|
<ov-videoconference
|
||||||
|
(onJoinButtonClicked)="onJoinButtonClicked()"
|
||||||
|
(onSessionCreated)="onSessionCreated($event)"
|
||||||
|
[tokens]="tokens"
|
||||||
|
[toolbarDisplaySessionName]="false"
|
||||||
|
>
|
||||||
|
<div *ovChatPanel id="my-panel">
|
||||||
|
<h3>Chat</h3>
|
||||||
|
<div>
|
||||||
|
<ul>
|
||||||
|
<li *ngFor="let msg of messages">{{ msg }}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<input value="Hello" #input />
|
||||||
|
<button (click)="send(input.value)">Send</button>
|
||||||
|
</div>
|
||||||
|
</ov-videoconference>
|
||||||
|
`,
|
||||||
|
styles: [
|
||||||
|
`
|
||||||
|
#my-panel {
|
||||||
|
background: #aafffc;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
]
|
||||||
})
|
})
|
||||||
export class ChatPanelDirectiveComponent implements OnInit {
|
export class ChatPanelDirectiveComponent {
|
||||||
constructor() {}
|
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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@ export class ExamplesDashboardComponent implements OnInit {
|
||||||
ngOnInit(): void {}
|
ngOnInit(): void {}
|
||||||
|
|
||||||
goTo(path: string) {
|
goTo(path: string) {
|
||||||
this.router.navigate([`/${path}`]);
|
this.router.navigate([`examples/${path}`]);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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({
|
@Component({
|
||||||
selector: 'app-layout-directive',
|
selector: 'app-layout-directive',
|
||||||
template: ` <p>layout-directive works!</p> `,
|
styles: [
|
||||||
})
|
`
|
||||||
export class LayoutDirectiveComponent implements OnInit {
|
.container {
|
||||||
constructor() {}
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
ngOnInit(): void {}
|
.item {
|
||||||
|
flex: 0 50%;
|
||||||
|
height: 250px;
|
||||||
|
margin-bottom: 2%;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
],
|
||||||
|
template: `
|
||||||
|
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
|
||||||
|
<div *ovLayout>
|
||||||
|
<div class="container">
|
||||||
|
<div class="item" *ngFor="let stream of localParticipant | streams">
|
||||||
|
<ov-stream [stream]="stream"></ov-stream>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item" *ngFor="let stream of remoteParticipants | streams">
|
||||||
|
<ov-stream [stream]="stream"></ov-stream>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ov-videoconference>
|
||||||
|
`
|
||||||
|
})
|
||||||
|
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)
|
||||||
|
};
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,33 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { TokenModel } from 'openvidu-angular';
|
||||||
|
import { RestService } from 'src/app/services/rest.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-panel-directive',
|
selector: 'app-panel-directive',
|
||||||
template: ` <p>toolbar-directive works!</p> `,
|
template: `
|
||||||
styleUrls: ['./panel-directive.component.scss']
|
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
|
||||||
|
<div *ovPanel>
|
||||||
|
<div>HOLA?</div>
|
||||||
|
<div *ovChatPanel>
|
||||||
|
<ov-chat-panel></ov-chat-panel>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ov-videoconference>
|
||||||
|
`
|
||||||
})
|
})
|
||||||
export class PanelDirectiveComponent implements OnInit {
|
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 {}
|
ngOnInit(): void {}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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: `
|
||||||
|
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
|
||||||
|
<div *ovParticipantPanelItem="let participant">
|
||||||
|
<ov-participant-panel-item [participant]="participant"></ov-participant-panel-item>
|
||||||
|
|
||||||
|
<button mat-icon-button [matMenuTriggerFor]="menu"><mat-icon>more_vert</mat-icon></button>
|
||||||
|
<mat-menu #menu="matMenu">
|
||||||
|
<button mat-menu-item>Item 1</button>
|
||||||
|
<button mat-menu-item>Item 2</button>
|
||||||
|
</mat-menu>
|
||||||
|
</div>
|
||||||
|
</ov-videoconference>
|
||||||
|
`,
|
||||||
|
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;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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: `
|
||||||
|
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
|
||||||
|
<div *ovParticipantsPanel id="my-panel">
|
||||||
|
<ul id="local">
|
||||||
|
<li>{{ localParticipant.nickname }}</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ul id="remote">
|
||||||
|
<li *ngFor="let p of remoteParticipants">{{ p.nickname }}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</ov-videoconference>
|
||||||
|
`,
|
||||||
|
styles: [``]
|
||||||
|
})
|
||||||
|
export class ParticipantPanelItemElementsDirectiveComponent {
|
||||||
|
tokens: TokenModel;
|
||||||
|
sessionId = 'participants-panel-directive-example';
|
||||||
|
OPENVIDU_URL = 'https://localhost:4443';
|
||||||
|
OPENVIDU_SECRET = 'MY_SECRET';
|
||||||
|
|
||||||
|
constructor(private restService: RestService, 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)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -1,12 +1,77 @@
|
||||||
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({
|
@Component({
|
||||||
selector: 'app-participantsPanel-directive',
|
selector: 'app-participantsPanel-directive',
|
||||||
template: ` <p>participantsPanel-directive works!</p> `,
|
template: `
|
||||||
styleUrls: ['./participantsPanel-directive.component.scss']
|
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
|
||||||
})
|
<div *ovParticipantsPanel id="my-panel">
|
||||||
export class ParticipantsPanelDirectiveComponent implements OnInit {
|
<ul id="local">
|
||||||
constructor() {}
|
<li>{{localParticipant.nickname}}</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
ngOnInit(): void {}
|
<ul id="remote">
|
||||||
|
<li *ngFor="let p of remoteParticipants">{{p.nickname}}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</ov-videoconference>
|
||||||
|
`,
|
||||||
|
styles: [
|
||||||
|
`
|
||||||
|
#my-panel {
|
||||||
|
background: #faff7f;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
#my-panel > #local {
|
||||||
|
background: #a184ff;
|
||||||
|
}
|
||||||
|
#my-panel > #remote {
|
||||||
|
background: #7fb8ff;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class ParticipantsPanelDirectiveComponent 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;
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,40 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
|
import { TokenModel } from 'openvidu-angular';
|
||||||
|
import { RestService } from 'src/app/services/rest.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-stream-directive',
|
selector: 'app-stream-directive',
|
||||||
template: ` <p>stream-directive works!</p> `,
|
styles: [
|
||||||
|
`
|
||||||
|
p {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
border: 2px solid;
|
||||||
|
background: #000000;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
],
|
||||||
|
template: `
|
||||||
|
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
|
||||||
|
<div *ovStream="let stream">
|
||||||
|
<ov-stream [stream]="stream" [displayParticipantName]="false"></ov-stream>
|
||||||
|
<p>{{ stream.participant.nickname }}</p>
|
||||||
|
</div>
|
||||||
|
</ov-videoconference>
|
||||||
|
`
|
||||||
})
|
})
|
||||||
export class StreamDirectiveComponent implements OnInit {
|
export class StreamDirectiveComponent {
|
||||||
constructor() {}
|
tokens: TokenModel;
|
||||||
|
sessionId = 'toolbar-directive-example';
|
||||||
|
OPENVIDU_URL = 'https://localhost:4443';
|
||||||
|
OPENVIDU_SECRET = 'MY_SECRET';
|
||||||
|
|
||||||
ngOnInit(): void {}
|
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)
|
||||||
|
};
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
import { OpenViduService, ParticipantService, TokenModel } from 'openvidu-angular';
|
import { OpenViduService, TokenModel } from 'openvidu-angular';
|
||||||
import { RestService } from 'src/app/services/rest.service';
|
import { RestService } from 'src/app/services/rest.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
|
@ -7,8 +7,8 @@ import { RestService } from 'src/app/services/rest.service';
|
||||||
template: `
|
template: `
|
||||||
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
|
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
|
||||||
<div *ovToolbar style="text-align: center;">
|
<div *ovToolbar style="text-align: center;">
|
||||||
<button (click)="toggleVideo()">Mute Video</button>
|
<button (click)="toggleVideo()">Toggle Video</button>
|
||||||
<button>Mute Audio</button>
|
<button (click)="toggleAudio()">Toggle Audio</button>
|
||||||
</div>
|
</div>
|
||||||
</ov-videoconference>
|
</ov-videoconference>
|
||||||
`
|
`
|
||||||
|
|
@ -18,11 +18,9 @@ export class ToolbarDirectiveComponent implements OnInit {
|
||||||
sessionId = 'toolbar-directive-example';
|
sessionId = 'toolbar-directive-example';
|
||||||
OPENVIDU_URL = 'https://localhost:4443';
|
OPENVIDU_URL = 'https://localhost:4443';
|
||||||
OPENVIDU_SECRET = 'MY_SECRET';
|
OPENVIDU_SECRET = 'MY_SECRET';
|
||||||
constructor(
|
publishVideo = true;
|
||||||
private restService: RestService,
|
publishAudio = true;
|
||||||
private participantService: ParticipantService,
|
constructor(private restService: RestService, private openviduService: OpenViduService) {}
|
||||||
private openviduService: OpenViduService
|
|
||||||
) {}
|
|
||||||
|
|
||||||
ngOnInit(): void {}
|
ngOnInit(): void {}
|
||||||
|
|
||||||
|
|
@ -34,7 +32,12 @@ export class ToolbarDirectiveComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleVideo() {
|
toggleVideo() {
|
||||||
const publishVideo = !this.participantService.hasCameraVideoActive();
|
this.publishVideo = !this.publishVideo;
|
||||||
// this.openviduService.publishVideo(this.participantService.getMyCameraPublisher(), publishVideo);
|
this.openviduService.publishVideo(this.publishVideo);
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleAudio() {
|
||||||
|
this.publishAudio = !this.publishAudio;
|
||||||
|
this.openviduService.publishAudio(this.publishAudio);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-toolbarAdditionalButtons-directive',
|
|
||||||
template: ` <p>toolbar-directive works!</p> `,
|
|
||||||
})
|
|
||||||
export class ToolbarAdditionalButtonsDirectiveComponent implements OnInit {
|
|
||||||
constructor() {}
|
|
||||||
|
|
||||||
ngOnInit(): void {}
|
|
||||||
}
|
|
||||||
|
|
@ -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: `
|
||||||
|
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
|
||||||
|
<div *ovToolbarAdditionalButtons style="text-align: center;">
|
||||||
|
<button (click)="toggleVideo()">Toggle Video</button>
|
||||||
|
<button (click)="toggleAudio()">Toggle Audio</button>
|
||||||
|
</div>
|
||||||
|
</ov-videoconference>
|
||||||
|
`
|
||||||
|
})
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -8,9 +8,11 @@
|
||||||
(onToolbarFullscreenButtonClicked)="onToolbarFullscreenButtonClicked()"
|
(onToolbarFullscreenButtonClicked)="onToolbarFullscreenButtonClicked()"
|
||||||
(onToolbarParticipantsPanelButtonClicked)="onToolbarParticipantsPanelButtonClicked()"
|
(onToolbarParticipantsPanelButtonClicked)="onToolbarParticipantsPanelButtonClicked()"
|
||||||
(onToolbarChatPanelButtonClicked)="onToolbarChatPanelButtonClicked()"
|
(onToolbarChatPanelButtonClicked)="onToolbarChatPanelButtonClicked()"
|
||||||
[prejoin]="false"
|
[minimal]="false"
|
||||||
>
|
>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- <div *ovParticipantPanelItemElements>
|
<!-- <div *ovParticipantPanelItemElements>
|
||||||
<p>EXTRA INFO</p>
|
<p>EXTRA INFO</p>
|
||||||
</div> -->
|
</div> -->
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,9 @@ import { Router } from '@angular/router';
|
||||||
})
|
})
|
||||||
export class CallComponent implements OnInit {
|
export class CallComponent implements OnInit {
|
||||||
value = true;
|
value = true;
|
||||||
sessionId = 'qqqq';
|
sessionId = 'daily-call';
|
||||||
|
OPENVIDU_URL = 'https://localhost:4443';
|
||||||
|
OPENVIDU_SECRET = 'MY_SECRET';
|
||||||
tokens: { webcam: string; screen: string };
|
tokens: { webcam: string; screen: string };
|
||||||
|
|
||||||
joinSessionClicked: boolean = false;
|
joinSessionClicked: boolean = false;
|
||||||
|
|
@ -19,18 +21,22 @@ export class CallComponent implements OnInit {
|
||||||
|
|
||||||
async ngOnInit() {
|
async ngOnInit() {
|
||||||
this.tokens = {
|
this.tokens = {
|
||||||
webcam: 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)
|
screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
async onJoinClicked() {
|
async onJoinClicked() {
|
||||||
console.warn('VC JOIN BUTTON CLICKED');
|
console.warn('VC JOIN BUTTON CLICKED');
|
||||||
|
|
||||||
this.tokens = {
|
// this.tokens = {
|
||||||
webcam: await this.restService.getToken(this.sessionId),
|
// webcam: await this.restService.getToken(this.sessionId),
|
||||||
screen: await this.restService.getToken(this.sessionId)
|
// screen: await this.restService.getToken(this.sessionId)
|
||||||
};
|
// };
|
||||||
|
|
||||||
|
console.log(await this.restService.getToken(this.sessionId))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// setInterval(() => {
|
// setInterval(() => {
|
||||||
// this.value = !this.value;
|
// this.value = !this.value;
|
||||||
|
|
|
||||||
|
|
@ -13,68 +13,77 @@ export class RestService {
|
||||||
this.baseHref = '/' + (!!window.location.pathname.split('/')[1] ? window.location.pathname.split('/')[1] + '/' : '');
|
this.baseHref = '/' + (!!window.location.pathname.split('/')[1] ? window.location.pathname.split('/')[1] + '/' : '');
|
||||||
}
|
}
|
||||||
async getToken(sessionId: string, openviduServerUrl?: string, openviduSecret?: string): Promise<string> {
|
async getToken(sessionId: string, openviduServerUrl?: string, openviduSecret?: string): Promise<string> {
|
||||||
// if (!!openviduServerUrl && !!openviduSecret) {
|
if (!!openviduServerUrl && !!openviduSecret) {
|
||||||
// const _sessionId = await this.createSession(sessionId, openviduServerUrl, openviduSecret);
|
const _sessionId = await this.createSession(sessionId, openviduServerUrl, openviduSecret);
|
||||||
// return await this.createToken(_sessionId, openviduServerUrl, openviduSecret);
|
return await this.createToken(_sessionId, openviduServerUrl, openviduSecret);
|
||||||
// }
|
|
||||||
try {
|
|
||||||
return lastValueFrom(this.http.post<any>(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;
|
|
||||||
}
|
}
|
||||||
|
// try {
|
||||||
|
// return lastValueFrom(this.http.post<any>(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<string> {
|
/**
|
||||||
// return new Promise((resolve, reject) => {
|
*
|
||||||
// const body = JSON.stringify({ customSessionId: sessionId });
|
* * WARNING: This is why this tutorial is an insecure application.
|
||||||
// const options = {
|
* * We need to ask OpenVidu Server for a user token in order to connect to our session.
|
||||||
// headers: new HttpHeaders({
|
* * This process should entirely take place in our server-side
|
||||||
// Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + openviduSecret),
|
*/
|
||||||
// 'Content-Type': 'application/json'
|
private createSession(sessionId: string, openviduServerUrl: string, openviduSecret: string): Promise<string> {
|
||||||
// })
|
return new Promise((resolve, reject) => {
|
||||||
// };
|
const body = JSON.stringify({ customSessionId: sessionId });
|
||||||
// return this.http
|
const options = {
|
||||||
// .post<any>(openviduServerUrl + '/openvidu/api/sessions', body, options)
|
headers: new HttpHeaders({
|
||||||
// .pipe(
|
Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + openviduSecret),
|
||||||
// catchError((error) => {
|
'Content-Type': 'application/json'
|
||||||
// if (error.status === 409) {
|
})
|
||||||
// resolve(sessionId);
|
};
|
||||||
// }
|
return this.http
|
||||||
// if (error.statusText === 'Unknown Error') {
|
.post<any>(openviduServerUrl + '/openvidu/api/sessions', body, options)
|
||||||
// reject({ status: 401, message: 'ERR_CERT_AUTHORITY_INVALID' });
|
.pipe(
|
||||||
// }
|
catchError((error) => {
|
||||||
// return observableThrowError(error);
|
if (error.status === 409) {
|
||||||
// })
|
resolve(sessionId);
|
||||||
// )
|
}
|
||||||
// .subscribe((response) => {
|
if (error.statusText === 'Unknown Error') {
|
||||||
// resolve(response.id);
|
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<string> {
|
private createToken(sessionId: string, openviduServerUrl: string, openviduSecret: string): Promise<string> {
|
||||||
// return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
// const body = JSON.stringify({});
|
const body = JSON.stringify({});
|
||||||
// const options = {
|
const options = {
|
||||||
// headers: new HttpHeaders({
|
headers: new HttpHeaders({
|
||||||
// Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + openviduSecret),
|
Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + openviduSecret),
|
||||||
// 'Content-Type': 'application/json'
|
'Content-Type': 'application/json'
|
||||||
// })
|
})
|
||||||
// };
|
};
|
||||||
// return this.http
|
return this.http
|
||||||
// .post<any>(openviduServerUrl + '/openvidu/api/sessions/' + sessionId + '/connection', body, options)
|
.post<any>(openviduServerUrl + '/openvidu/api/sessions/' + sessionId + '/connection', body, options)
|
||||||
// .pipe(
|
.pipe(
|
||||||
// catchError((error) => {
|
catchError((error) => {
|
||||||
// reject(error);
|
reject(error);
|
||||||
// return observableThrowError(error);
|
return observableThrowError(error);
|
||||||
// })
|
})
|
||||||
// )
|
)
|
||||||
// .subscribe((response) => {
|
.subscribe((response) => {
|
||||||
// resolve(response.token);
|
|
||||||
// });
|
console.warn(response);
|
||||||
// });
|
|
||||||
// }
|
resolve(response.token);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue