Migrated components tutorials to OpenVidu Components 3
This commit is contained in:
Carlos Santos
parent
f12015954a
commit
7ce0b5c886
@ -1,16 +0,0 @@
|
||||
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
|
||||
# For additional information regarding the format and rule options, please see:
|
||||
# https://github.com/browserslist/browserslist#queries
|
||||
|
||||
# For the full list of supported browsers by the Angular framework, please see:
|
||||
# https://angular.io/guide/browser-support
|
||||
|
||||
# You can see what browsers were selected by your queries by running:
|
||||
# npx browserslist
|
||||
|
||||
last 1 Chrome version
|
||||
last 1 Firefox version
|
||||
last 2 Edge major versions
|
||||
last 2 Safari major versions
|
||||
last 2 iOS major versions
|
||||
Firefox ESR
|
||||
@ -113,5 +113,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": false
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -10,26 +10,26 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^14.2.11",
|
||||
"@angular/cdk": "^14.2.7",
|
||||
"@angular/common": "^14.2.11",
|
||||
"@angular/compiler": "^14.2.11",
|
||||
"@angular/core": "^14.2.11",
|
||||
"@angular/forms": "^14.2.11",
|
||||
"@angular/material": "^14.2.7",
|
||||
"@angular/platform-browser": "^14.2.11",
|
||||
"@angular/platform-browser-dynamic": "^14.2.11",
|
||||
"@angular/router": "^14.2.11",
|
||||
"openvidu-angular": "2.27.0",
|
||||
"@angular/animations": "^15.2.9",
|
||||
"@angular/cdk": "^15.2.9",
|
||||
"@angular/common": "^15.2.9",
|
||||
"@angular/compiler": "^15.2.9",
|
||||
"@angular/core": "^15.2.9",
|
||||
"@angular/forms": "^15.2.9",
|
||||
"@angular/material": "^15.2.9",
|
||||
"@angular/platform-browser": "^15.2.9",
|
||||
"@angular/platform-browser-dynamic": "^15.2.9",
|
||||
"@angular/router": "^15.2.9",
|
||||
"openvidu-angular": "file:../openvidu-angular-3.0.0-dev.tgz",
|
||||
"rxjs": "~7.5.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^14.2.10",
|
||||
"@angular/cli": "^14.2.10",
|
||||
"@angular/compiler-cli": "^14.2.11",
|
||||
"@types/node": "^12.11.1",
|
||||
"typescript": "~4.6.2"
|
||||
"@angular-devkit/build-angular": "^15.2.9",
|
||||
"@angular/cli": "^15.2.9",
|
||||
"@angular/compiler-cli": "^15.2.9",
|
||||
"@types/node": "16.11.9",
|
||||
"typescript": "4.8.4"
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,16 @@
|
||||
#my-panels {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
#my-panel1,
|
||||
#my-panel2 {
|
||||
text-align: center;
|
||||
height: calc(100% - 40px);
|
||||
margin: 20px;
|
||||
}
|
||||
#my-panel1 {
|
||||
background: #c9ffb2;
|
||||
}
|
||||
#my-panel2 {
|
||||
background: #ddf2ff;
|
||||
}
|
||||
@ -2,122 +2,88 @@ import { HttpClient } from "@angular/common/http";
|
||||
import { Component } from "@angular/core";
|
||||
import { lastValueFrom } from "rxjs";
|
||||
|
||||
import { PanelService, PanelType, TokenModel } from "openvidu-angular";
|
||||
import { PanelEvent, PanelService } from "openvidu-angular";
|
||||
import { environment } from 'src/environments/environment';
|
||||
|
||||
@Component({
|
||||
selector: "app-root",
|
||||
template: `
|
||||
<ov-videoconference [tokens]="tokens" [toolbarDisplaySessionName]="false">
|
||||
<!-- OpenVidu Video Conference Component -->
|
||||
<ov-videoconference [token]="token" [toolbarDisplaySessionName]="false" (onTokenRequested)="onTokenRequested($event)">
|
||||
<!-- Additional Toolbar Buttons -->
|
||||
<div *ovToolbarAdditionalPanelButtons style="text-align: center;">
|
||||
<button mat-icon-button (click)="toggleMyPanel('my-panel')">
|
||||
<mat-icon>360</mat-icon>
|
||||
<button mat-icon-button (click)="toggleMyPanel('my-panel1')">
|
||||
<mat-icon>360</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button (click)="toggleMyPanel('my-panel2')">
|
||||
<mat-icon>star</mat-icon>
|
||||
<mat-icon>star</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Additional Panels -->
|
||||
<div *ovAdditionalPanels id="my-panels">
|
||||
<div id="my-panel1" *ngIf="showExternalPanel">
|
||||
<h2>NEW PANEL</h2>
|
||||
<p>This is my new additional panel</p>
|
||||
<h2>NEW PANEL 1</h2>
|
||||
<p>This is my new additional panel</p>
|
||||
</div>
|
||||
<div id="my-panel2" *ngIf="showExternalPanel2">
|
||||
<h2>NEW PANEL 2</h2>
|
||||
<p>This is other new panel</p>
|
||||
<h2>NEW PANEL 2</h2>
|
||||
<p>This is another new panel</p>
|
||||
</div>
|
||||
</div>
|
||||
</ov-videoconference>
|
||||
</ov-videoconference>
|
||||
`,
|
||||
styles: [`
|
||||
#my-panels {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
#my-panel1,
|
||||
#my-panel2 {
|
||||
text-align: center;
|
||||
height: calc(100% - 40px);
|
||||
margin: 20px;
|
||||
}
|
||||
#my-panel1 {
|
||||
background: #c9ffb2;
|
||||
}
|
||||
#my-panel2 {
|
||||
background: #ddf2ff;
|
||||
}
|
||||
`]
|
||||
styleUrls: ["./app.component.scss"]
|
||||
})
|
||||
export class AppComponent {
|
||||
|
||||
// Define the URL of the application server
|
||||
APPLICATION_SERVER_URL = environment.applicationServerUrl;
|
||||
|
||||
sessionId = "toolbar-additionalbtn-directive-example";
|
||||
tokens!: TokenModel;
|
||||
// Define the name of the room and initialize the token variable
|
||||
roomName = 'additional-panels';
|
||||
token!: string;
|
||||
|
||||
// Flags to control the visibility of external panels
|
||||
showExternalPanel: boolean = false;
|
||||
showExternalPanel2: boolean = false;
|
||||
|
||||
constructor(
|
||||
private httpClient: HttpClient,
|
||||
private panelService: PanelService
|
||||
) { }
|
||||
constructor(private httpClient: HttpClient, private panelService: PanelService) { }
|
||||
|
||||
async ngOnInit() {
|
||||
ngOnInit() {
|
||||
this.subscribeToPanelToggling();
|
||||
this.tokens = {
|
||||
webcam: await this.getToken(),
|
||||
screen: await this.getToken(),
|
||||
};
|
||||
}
|
||||
|
||||
// Function to request a token when a participant joins the room
|
||||
async onTokenRequested(participantName: string) {
|
||||
const { token } = await this.getToken(this.roomName, participantName);
|
||||
this.token = token;
|
||||
}
|
||||
|
||||
// Subscribe to panel toggling events
|
||||
subscribeToPanelToggling() {
|
||||
this.panelService.panelOpenedObs.subscribe(
|
||||
(ev: { opened: boolean; type?: PanelType | string }) => {
|
||||
this.showExternalPanel = ev.opened && ev.type === "my-panel";
|
||||
this.showExternalPanel2 = ev.opened && ev.type === "my-panel2";
|
||||
}
|
||||
);
|
||||
this.panelService.panelOpenedObs.subscribe((ev: PanelEvent) => {
|
||||
this.showExternalPanel = ev.isOpened && ev.panelType === 'my-panel1';
|
||||
this.showExternalPanel2 = ev.isOpened && ev.panelType === 'my-panel2';
|
||||
});
|
||||
}
|
||||
|
||||
// Toggle the visibility of external panels
|
||||
toggleMyPanel(type: string) {
|
||||
this.panelService.togglePanel(type);
|
||||
}
|
||||
|
||||
/**
|
||||
* --------------------------------------------
|
||||
* GETTING A TOKEN FROM YOUR APPLICATION SERVER
|
||||
* --------------------------------------------
|
||||
* The methods below request the creation of a Session and a Token to
|
||||
* your application server. This keeps your OpenVidu deployment secure.
|
||||
*
|
||||
* In this sample code, there is no user control at all. Anybody could
|
||||
* access your application server endpoints! In a real production
|
||||
* environment, your application server must identify the user to allow
|
||||
* access to the endpoints.
|
||||
*
|
||||
* Visit https://docs.openvidu.io/en/stable/application-server to learn
|
||||
* more about the integration of OpenVidu in your application server.
|
||||
*/
|
||||
|
||||
async getToken(): Promise<string> {
|
||||
const sessionId = await this.createSession(this.sessionId);
|
||||
return await this.createToken(sessionId);
|
||||
}
|
||||
|
||||
createSession(sessionId: string): Promise<string> {
|
||||
return lastValueFrom(this.httpClient.post(
|
||||
this.APPLICATION_SERVER_URL + 'api/sessions',
|
||||
{ customSessionId: sessionId },
|
||||
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
|
||||
));
|
||||
}
|
||||
|
||||
createToken(sessionId: string): Promise<string> {
|
||||
return lastValueFrom(this.httpClient.post(
|
||||
this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections',
|
||||
{},
|
||||
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
|
||||
));
|
||||
// Function to get a token from the server
|
||||
async getToken(roomName: string, participantName: string): Promise<any> {
|
||||
try {
|
||||
// Send a POST request to the server to obtain a token
|
||||
return lastValueFrom(this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'api/sessions', { roomName, participantName }));
|
||||
} catch (error: any) {
|
||||
// Handle errors, e.g., if the server is not reachable
|
||||
if (error.status === 404) {
|
||||
throw { status: error.status, message: 'Cannot connect with the backend. ' + error.url + ' not found' };
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -7,6 +7,7 @@ import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular';
|
||||
import { environment } from 'src/environments/environment';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
|
||||
const config: OpenViduAngularConfig = {
|
||||
production: environment.production
|
||||
@ -21,6 +22,7 @@ const config: OpenViduAngularConfig = {
|
||||
BrowserAnimationsModule,
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
HttpClientModule,
|
||||
OpenViduAngularModule.forRoot(config)
|
||||
],
|
||||
providers: [],
|
||||
|
||||
@ -16,12 +16,13 @@
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "es2020",
|
||||
"target": "ES2022",
|
||||
"module": "es2020",
|
||||
"lib": [
|
||||
"es2020",
|
||||
"dom"
|
||||
]
|
||||
],
|
||||
"useDefineForClassFields": false
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
|
||||
# For additional information regarding the format and rule options, please see:
|
||||
# https://github.com/browserslist/browserslist#queries
|
||||
|
||||
# For the full list of supported browsers by the Angular framework, please see:
|
||||
# https://angular.io/guide/browser-support
|
||||
|
||||
# You can see what browsers were selected by your queries by running:
|
||||
# npx browserslist
|
||||
|
||||
last 1 Chrome version
|
||||
last 1 Firefox version
|
||||
last 2 Edge major versions
|
||||
last 2 Safari major versions
|
||||
last 2 iOS major versions
|
||||
Firefox ESR
|
||||
@ -86,5 +86,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": false
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -10,26 +10,26 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^14.2.11",
|
||||
"@angular/cdk": "^14.2.7",
|
||||
"@angular/common": "^14.2.11",
|
||||
"@angular/compiler": "^14.2.11",
|
||||
"@angular/core": "^14.2.11",
|
||||
"@angular/forms": "^14.2.11",
|
||||
"@angular/material": "^14.2.7",
|
||||
"@angular/platform-browser": "^14.2.11",
|
||||
"@angular/platform-browser-dynamic": "^14.2.11",
|
||||
"@angular/router": "^14.2.11",
|
||||
"openvidu-angular": "2.27.0",
|
||||
"@angular/animations": "^15.2.9",
|
||||
"@angular/cdk": "^15.2.9",
|
||||
"@angular/common": "^15.2.9",
|
||||
"@angular/compiler": "^15.2.9",
|
||||
"@angular/core": "^15.2.9",
|
||||
"@angular/forms": "^15.2.9",
|
||||
"@angular/material": "^15.2.9",
|
||||
"@angular/platform-browser": "^15.2.9",
|
||||
"@angular/platform-browser-dynamic": "^15.2.9",
|
||||
"@angular/router": "^15.2.9",
|
||||
"openvidu-angular": "file:../openvidu-angular-3.0.0-dev.tgz",
|
||||
"rxjs": "~7.5.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^14.2.10",
|
||||
"@angular/cli": "^14.2.10",
|
||||
"@angular/compiler-cli": "^14.2.11",
|
||||
"@angular-devkit/build-angular": "^15.2.9",
|
||||
"@angular/cli": "^15.2.9",
|
||||
"@angular/compiler-cli": "^15.2.9",
|
||||
"@types/node": "^12.11.1",
|
||||
"typescript": "~4.6.0"
|
||||
"typescript": "4.8.4"
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,12 +16,13 @@
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "es2020",
|
||||
"target": "ES2022",
|
||||
"module": "es2020",
|
||||
"lib": [
|
||||
"es2020",
|
||||
"dom"
|
||||
]
|
||||
],
|
||||
"useDefineForClassFields": false
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
|
||||
# For additional information regarding the format and rule options, please see:
|
||||
# https://github.com/browserslist/browserslist#queries
|
||||
|
||||
# For the full list of supported browsers by the Angular framework, please see:
|
||||
# https://angular.io/guide/browser-support
|
||||
|
||||
# You can see what browsers were selected by your queries by running:
|
||||
# npx browserslist
|
||||
|
||||
last 1 Chrome version
|
||||
last 1 Firefox version
|
||||
last 2 Edge major versions
|
||||
last 2 Safari major versions
|
||||
last 2 iOS major versions
|
||||
Firefox ESR
|
||||
@ -113,5 +113,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": false
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -10,26 +10,26 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^14.2.11",
|
||||
"@angular/cdk": "^14.2.7",
|
||||
"@angular/common": "^14.2.11",
|
||||
"@angular/compiler": "^14.2.11",
|
||||
"@angular/core": "^14.2.11",
|
||||
"@angular/forms": "^14.2.11",
|
||||
"@angular/material": "^14.2.7",
|
||||
"@angular/platform-browser": "^14.2.11",
|
||||
"@angular/platform-browser-dynamic": "^14.2.11",
|
||||
"@angular/router": "^14.2.11",
|
||||
"openvidu-angular": "2.27.0",
|
||||
"@angular/animations": "^15.2.9",
|
||||
"@angular/cdk": "^15.2.9",
|
||||
"@angular/common": "^15.2.9",
|
||||
"@angular/compiler": "^15.2.9",
|
||||
"@angular/core": "^15.2.9",
|
||||
"@angular/forms": "^15.2.9",
|
||||
"@angular/material": "^15.2.9",
|
||||
"@angular/platform-browser": "^15.2.9",
|
||||
"@angular/platform-browser-dynamic": "^15.2.9",
|
||||
"@angular/router": "^15.2.9",
|
||||
"openvidu-angular": "file:../openvidu-angular-3.0.0-dev.tgz",
|
||||
"rxjs": "~7.5.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^14.2.10",
|
||||
"@angular/cli": "^14.2.10",
|
||||
"@angular/compiler-cli": "^14.2.11",
|
||||
"@angular-devkit/build-angular": "^15.2.9",
|
||||
"@angular/cli": "^15.2.9",
|
||||
"@angular/compiler-cli": "^15.2.9",
|
||||
"@types/node": "^12.11.1",
|
||||
"typescript": "~4.6.2"
|
||||
"typescript": "4.8.4"
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,6 @@
|
||||
#my-panel {
|
||||
background: #aafffc;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
@ -1,17 +1,18 @@
|
||||
import { HttpClient } from "@angular/common/http";
|
||||
import { Component, OnInit } from "@angular/core";
|
||||
import { Component } from "@angular/core";
|
||||
import { lastValueFrom } from "rxjs";
|
||||
|
||||
import { TokenModel } from "openvidu-angular";
|
||||
import { environment } from 'src/environments/environment';
|
||||
|
||||
@Component({
|
||||
selector: "app-root",
|
||||
template: `
|
||||
<ov-videoconference
|
||||
[tokens]="tokens"
|
||||
[token]="token"
|
||||
[toolbarRecordingButton]="false"
|
||||
[toolbarDisplaySessionName]="false">
|
||||
[toolbarDisplaySessionName]="false"
|
||||
(onTokenRequested)="onTokenRequested($event)">
|
||||
|
||||
<!-- Custom activities panel -->
|
||||
<div *ovActivitiesPanel id="my-panel">
|
||||
<h3>ACTIVITIES</h3>
|
||||
<div>
|
||||
@ -20,65 +21,29 @@ import { environment } from 'src/environments/environment';
|
||||
</div>
|
||||
</ov-videoconference>
|
||||
`,
|
||||
styles: [`
|
||||
#my-panel {
|
||||
background: #aafffc;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
`]
|
||||
styleUrls: ['./app.component.scss']
|
||||
})
|
||||
export class AppComponent implements OnInit {
|
||||
export class AppComponent {
|
||||
|
||||
APPLICATION_SERVER_URL = environment.applicationServerUrl;
|
||||
|
||||
sessionId = "activities-panel-directive-example";
|
||||
tokens!: TokenModel;
|
||||
roomName = "custom-activities-panel";
|
||||
token!: string;
|
||||
|
||||
constructor(private httpClient: HttpClient) { }
|
||||
|
||||
async ngOnInit() {
|
||||
this.tokens = {
|
||||
webcam: await this.getToken(),
|
||||
screen: await this.getToken(),
|
||||
};
|
||||
async onTokenRequested(participantName: string) {
|
||||
const { token } = await this.getToken(this.roomName, participantName);
|
||||
this.token = token;
|
||||
}
|
||||
|
||||
/**
|
||||
* --------------------------------------------
|
||||
* GETTING A TOKEN FROM YOUR APPLICATION SERVER
|
||||
* --------------------------------------------
|
||||
* The methods below request the creation of a Session and a Token to
|
||||
* your application server. This keeps your OpenVidu deployment secure.
|
||||
*
|
||||
* In this sample code, there is no user control at all. Anybody could
|
||||
* access your application server endpoints! In a real production
|
||||
* environment, your application server must identify the user to allow
|
||||
* access to the endpoints.
|
||||
*
|
||||
* Visit https://docs.openvidu.io/en/stable/application-server to learn
|
||||
* more about the integration of OpenVidu in your application server.
|
||||
*/
|
||||
|
||||
async getToken(): Promise<string> {
|
||||
const sessionId = await this.createSession(this.sessionId);
|
||||
return await this.createToken(sessionId);
|
||||
}
|
||||
|
||||
createSession(sessionId: string): Promise<string> {
|
||||
return lastValueFrom(this.httpClient.post(
|
||||
this.APPLICATION_SERVER_URL + 'api/sessions',
|
||||
{ customSessionId: sessionId },
|
||||
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
|
||||
));
|
||||
}
|
||||
|
||||
createToken(sessionId: string): Promise<string> {
|
||||
return lastValueFrom(this.httpClient.post(
|
||||
this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections',
|
||||
{},
|
||||
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
|
||||
));
|
||||
getToken(roomName: string, participantName: string): Promise<any> {
|
||||
try {
|
||||
return lastValueFrom(this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'api/sessions', { roomName, participantName }));
|
||||
} catch (error: any) {
|
||||
if (error.status === 404) {
|
||||
throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' };
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -16,12 +16,13 @@
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "es2020",
|
||||
"target": "ES2022",
|
||||
"module": "es2020",
|
||||
"lib": [
|
||||
"es2020",
|
||||
"dom"
|
||||
]
|
||||
],
|
||||
"useDefineForClassFields": false
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
|
||||
# For additional information regarding the format and rule options, please see:
|
||||
# https://github.com/browserslist/browserslist#queries
|
||||
|
||||
# For the full list of supported browsers by the Angular framework, please see:
|
||||
# https://angular.io/guide/browser-support
|
||||
|
||||
# You can see what browsers were selected by your queries by running:
|
||||
# npx browserslist
|
||||
|
||||
last 1 Chrome version
|
||||
last 1 Firefox version
|
||||
last 2 Edge major versions
|
||||
last 2 Safari major versions
|
||||
last 2 iOS major versions
|
||||
Firefox ESR
|
||||
@ -113,5 +113,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": false
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -10,26 +10,26 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^14.2.11",
|
||||
"@angular/cdk": "^14.2.7",
|
||||
"@angular/common": "^14.2.11",
|
||||
"@angular/compiler": "^14.2.11",
|
||||
"@angular/core": "^14.2.11",
|
||||
"@angular/forms": "^14.2.11",
|
||||
"@angular/material": "^14.2.7",
|
||||
"@angular/platform-browser": "^14.2.11",
|
||||
"@angular/platform-browser-dynamic": "^14.2.11",
|
||||
"@angular/router": "^14.2.11",
|
||||
"openvidu-angular": "2.27.0",
|
||||
"@angular/animations": "^15.2.9",
|
||||
"@angular/cdk": "^15.2.9",
|
||||
"@angular/common": "^15.2.9",
|
||||
"@angular/compiler": "^15.2.9",
|
||||
"@angular/core": "^15.2.9",
|
||||
"@angular/forms": "^15.2.9",
|
||||
"@angular/material": "^15.2.9",
|
||||
"@angular/platform-browser": "^15.2.9",
|
||||
"@angular/platform-browser-dynamic": "^15.2.9",
|
||||
"@angular/router": "^15.2.9",
|
||||
"openvidu-angular": "file:../openvidu-angular-3.0.0-dev.tgz",
|
||||
"rxjs": "~7.5.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^14.2.10",
|
||||
"@angular/cli": "^14.2.10",
|
||||
"@angular/compiler-cli": "^14.2.11",
|
||||
"@angular-devkit/build-angular": "^15.2.9",
|
||||
"@angular/cli": "^15.2.9",
|
||||
"@angular/compiler-cli": "^15.2.9",
|
||||
"@types/node": "^12.11.1",
|
||||
"typescript": "~4.6.2"
|
||||
"typescript": "4.8.4"
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,6 @@
|
||||
#my-panel {
|
||||
background: #aafffc;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
@ -1,109 +1,99 @@
|
||||
import { HttpClient } from "@angular/common/http";
|
||||
import { Component, OnInit } from "@angular/core";
|
||||
import { Component } from "@angular/core";
|
||||
import { lastValueFrom } from "rxjs";
|
||||
|
||||
import { Signal, TokenModel } from "openvidu-angular";
|
||||
import { Session, SignalOptions } from "openvidu-browser";
|
||||
import { DataPacket_Kind, DataPublishOptions, DataTopic, ParticipantService, RemoteParticipant, Room, RoomEvent } from "openvidu-angular";
|
||||
import { environment } from 'src/environments/environment';
|
||||
|
||||
@Component({
|
||||
selector: "app-root",
|
||||
selector: 'app-root',
|
||||
template: `
|
||||
<!-- OpenVidu Video Conference Component -->
|
||||
<ov-videoconference
|
||||
(onSessionCreated)="onSessionCreated($event)"
|
||||
[tokens]="tokens"
|
||||
[toolbarDisplaySessionName]="false">
|
||||
(onRoomCreated)="onRoomCreated($event)"
|
||||
[token]="token"
|
||||
[toolbarDisplaySessionName]="false"
|
||||
(onTokenRequested)="onTokenRequested($event)"
|
||||
>
|
||||
<!-- Chat Panel -->
|
||||
<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>
|
||||
<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;
|
||||
}
|
||||
`]
|
||||
styleUrls: ['./app.component.scss'],
|
||||
})
|
||||
export class AppComponent implements OnInit {
|
||||
|
||||
export class AppComponent {
|
||||
// Define the URL of the application server
|
||||
APPLICATION_SERVER_URL = environment.applicationServerUrl;
|
||||
|
||||
sessionId = "chat-panel-directive-example";
|
||||
tokens!: TokenModel;
|
||||
|
||||
session!: Session;
|
||||
// Define the name of the room and initialize the token variable
|
||||
roomName = 'chat-panel-directive-example';
|
||||
token!: string;
|
||||
messages: string[] = [];
|
||||
|
||||
constructor(private httpClient: HttpClient) { }
|
||||
constructor(private httpClient: HttpClient, private participantService: ParticipantService) { }
|
||||
|
||||
async ngOnInit() {
|
||||
this.tokens = {
|
||||
webcam: await this.getToken(),
|
||||
screen: await this.getToken(),
|
||||
};
|
||||
// Function to request a token when a participant joins the room
|
||||
async onTokenRequested(participantName: string) {
|
||||
const { token } = await this.getToken(this.roomName, participantName);
|
||||
this.token = token;
|
||||
}
|
||||
|
||||
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);
|
||||
});
|
||||
// Event handler for room creation
|
||||
onRoomCreated(room: Room) {
|
||||
room.on(
|
||||
RoomEvent.DataReceived,
|
||||
(
|
||||
payload: Uint8Array,
|
||||
participant?: RemoteParticipant,
|
||||
_?: DataPacket_Kind,
|
||||
topic?: string
|
||||
) => {
|
||||
if (topic === DataTopic.CHAT) {
|
||||
const { message } = JSON.parse(new TextDecoder().decode(payload));
|
||||
const participantName = participant?.name || 'Unknown';
|
||||
this.messages.push(message);
|
||||
console.log(`Message received from ${participantName}:`, message);
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
send(message: string): void {
|
||||
const signalOptions: SignalOptions = {
|
||||
data: JSON.stringify({ message }),
|
||||
type: Signal.CHAT,
|
||||
to: undefined,
|
||||
};
|
||||
this.session.signal(signalOptions);
|
||||
// Function to send a chat message
|
||||
async send(message: string): Promise<void> {
|
||||
const strData = JSON.stringify({ message });
|
||||
const data: Uint8Array = new TextEncoder().encode(strData);
|
||||
const options: DataPublishOptions = { topic: DataTopic.CHAT };
|
||||
await this.participantService.publishData(data, options);
|
||||
this.messages.push(message);
|
||||
}
|
||||
|
||||
/**
|
||||
* --------------------------------------------
|
||||
* GETTING A TOKEN FROM YOUR APPLICATION SERVER
|
||||
* --------------------------------------------
|
||||
* The methods below request the creation of a Session and a Token to
|
||||
* your application server. This keeps your OpenVidu deployment secure.
|
||||
*
|
||||
* In this sample code, there is no user control at all. Anybody could
|
||||
* access your application server endpoints! In a real production
|
||||
* environment, your application server must identify the user to allow
|
||||
* access to the endpoints.
|
||||
*
|
||||
* Visit https://docs.openvidu.io/en/stable/application-server to learn
|
||||
* more about the integration of OpenVidu in your application server.
|
||||
*/
|
||||
|
||||
async getToken(): Promise<string> {
|
||||
const sessionId = await this.createSession(this.sessionId);
|
||||
return await this.createToken(sessionId);
|
||||
}
|
||||
|
||||
createSession(sessionId: string): Promise<string> {
|
||||
return lastValueFrom(this.httpClient.post(
|
||||
this.APPLICATION_SERVER_URL + 'api/sessions',
|
||||
{ customSessionId: sessionId },
|
||||
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
|
||||
));
|
||||
}
|
||||
|
||||
createToken(sessionId: string): Promise<string> {
|
||||
return lastValueFrom(this.httpClient.post(
|
||||
this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections',
|
||||
{},
|
||||
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
|
||||
));
|
||||
// Function to get a token from the server
|
||||
getToken(roomName: string, participantName: string): Promise<any> {
|
||||
try {
|
||||
// Send a POST request to the server to obtain a token
|
||||
return lastValueFrom(
|
||||
this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'api/sessions', {
|
||||
roomName,
|
||||
participantName,
|
||||
})
|
||||
);
|
||||
} catch (error: any) {
|
||||
// Handle errors, e.g., if the server is not reachable
|
||||
if (error.status === 404) {
|
||||
throw {
|
||||
status: error.status,
|
||||
message: 'Cannot connect with the backend. ' + error.url + ' not found',
|
||||
};
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -16,12 +16,13 @@
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "es2020",
|
||||
"target": "ES2022",
|
||||
"module": "es2020",
|
||||
"lib": [
|
||||
"es2020",
|
||||
"dom"
|
||||
]
|
||||
],
|
||||
"useDefineForClassFields": false
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
|
||||
# For additional information regarding the format and rule options, please see:
|
||||
# https://github.com/browserslist/browserslist#queries
|
||||
|
||||
# For the full list of supported browsers by the Angular framework, please see:
|
||||
# https://angular.io/guide/browser-support
|
||||
|
||||
# You can see what browsers were selected by your queries by running:
|
||||
# npx browserslist
|
||||
|
||||
last 1 Chrome version
|
||||
last 1 Firefox version
|
||||
last 2 Edge major versions
|
||||
last 2 Safari major versions
|
||||
last 2 iOS major versions
|
||||
Firefox ESR
|
||||
@ -113,5 +113,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": false
|
||||
}
|
||||
}
|
||||
|
||||
7236
openvidu-components/openvidu-custom-layout/package-lock.json
generated
7236
openvidu-components/openvidu-custom-layout/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -10,26 +10,26 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^14.2.11",
|
||||
"@angular/cdk": "^14.2.7",
|
||||
"@angular/common": "^14.2.11",
|
||||
"@angular/compiler": "^14.2.11",
|
||||
"@angular/core": "^14.2.11",
|
||||
"@angular/forms": "^14.2.11",
|
||||
"@angular/material": "^14.2.7",
|
||||
"@angular/platform-browser": "^14.2.11",
|
||||
"@angular/platform-browser-dynamic": "^14.2.11",
|
||||
"@angular/router": "^14.2.11",
|
||||
"openvidu-angular": "2.27.0",
|
||||
"@angular/animations": "^15.2.9",
|
||||
"@angular/cdk": "^15.2.9",
|
||||
"@angular/common": "^15.2.9",
|
||||
"@angular/compiler": "^15.2.9",
|
||||
"@angular/core": "^15.2.9",
|
||||
"@angular/forms": "^15.2.9",
|
||||
"@angular/material": "^15.2.9",
|
||||
"@angular/platform-browser": "^15.2.9",
|
||||
"@angular/platform-browser-dynamic": "^15.2.9",
|
||||
"@angular/router": "^15.2.9",
|
||||
"openvidu-angular": "file:../openvidu-angular-3.0.0-dev.tgz",
|
||||
"rxjs": "~7.5.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^14.2.10",
|
||||
"@angular/cli": "^14.2.10",
|
||||
"@angular/compiler-cli": "^14.2.11",
|
||||
"@angular-devkit/build-angular": "^15.2.9",
|
||||
"@angular/cli": "^15.2.9",
|
||||
"@angular/compiler-cli": "^15.2.9",
|
||||
"@types/node": "^12.11.1",
|
||||
"typescript": "~4.6.2"
|
||||
"typescript": "4.8.4"
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,13 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.item {
|
||||
flex: 0 50%;
|
||||
height: 250px;
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
@ -1,109 +1,107 @@
|
||||
import { HttpClient } from "@angular/common/http";
|
||||
import { Component, OnInit } from "@angular/core";
|
||||
import { Component, OnDestroy, OnInit } from "@angular/core";
|
||||
import { lastValueFrom, Subscription } from "rxjs";
|
||||
|
||||
import { ParticipantAbstractModel, ParticipantService, TokenModel } from "openvidu-angular";
|
||||
import { ParticipantModel, ParticipantService } from "openvidu-angular";
|
||||
import { environment } from 'src/environments/environment';
|
||||
|
||||
@Component({
|
||||
selector: "app-root",
|
||||
selector: 'app-root',
|
||||
template: `
|
||||
<ov-videoconference [tokens]="tokens" (onSessionCreated)="subscribeToParticipants()">
|
||||
<!-- OpenVidu Video Conference Component -->
|
||||
<ov-videoconference
|
||||
[token]="token"
|
||||
(onTokenRequested)="onTokenRequested($event)"
|
||||
>
|
||||
<!-- Custom Layout for Video Streams -->
|
||||
<div *ovLayout>
|
||||
<div class="container">
|
||||
<div class="item" *ngFor="let stream of localParticipant | streams">
|
||||
<ov-stream [stream]="stream"></ov-stream>
|
||||
<!-- Local Participant's Tracks -->
|
||||
<div *ngFor="let track of localParticipant.tracks" class="item"
|
||||
[ngClass]="{'hidden': track.isAudioTrack && !track.participant.onlyHasAudioTracks}"
|
||||
>
|
||||
<ov-stream [track]="track"></ov-stream>
|
||||
</div>
|
||||
<div class="item" *ngFor="let stream of remoteParticipants | streams">
|
||||
<ov-stream [stream]="stream"></ov-stream>
|
||||
|
||||
<!-- Remote Participants' Tracks -->
|
||||
<div *ngFor="let track of remoteParticipants | tracks" class="item"
|
||||
[ngClass]="{'hidden': track.isAudioTrack && !track.participant.onlyHasAudioTracks}"
|
||||
>
|
||||
<ov-stream [track]="track"></ov-stream>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ov-videoconference>
|
||||
`,
|
||||
styles: [`
|
||||
.container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.item {
|
||||
flex: 0 50%;
|
||||
height: 250px;
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
`]
|
||||
styleUrls: ['./app.component.scss'],
|
||||
})
|
||||
export class AppComponent implements OnInit {
|
||||
|
||||
export class AppComponent implements OnInit, OnDestroy {
|
||||
// Define the URL of the application server
|
||||
APPLICATION_SERVER_URL = environment.applicationServerUrl;
|
||||
|
||||
sessionId = 'layout-directive-example';
|
||||
tokens!: TokenModel;
|
||||
// Define the name of the room and initialize the token variable
|
||||
roomName = 'custom-layout';
|
||||
token!: string;
|
||||
|
||||
localParticipant!: ParticipantAbstractModel;
|
||||
remoteParticipants!: ParticipantAbstractModel[];
|
||||
// Participant-related properties
|
||||
localParticipant!: ParticipantModel;
|
||||
remoteParticipants!: ParticipantModel[];
|
||||
localParticipantSubs!: Subscription;
|
||||
remoteParticipantsSubs!: Subscription;
|
||||
|
||||
constructor(private httpClient: HttpClient, private participantService: ParticipantService) { }
|
||||
constructor(
|
||||
private httpClient: HttpClient,
|
||||
private participantService: ParticipantService
|
||||
) { }
|
||||
|
||||
async ngOnInit() {
|
||||
this.tokens = {
|
||||
webcam: await this.getToken(),
|
||||
screen: await this.getToken()
|
||||
};
|
||||
ngOnInit() {
|
||||
// Subscribe to participants' updates
|
||||
this.subscribeToParticipants();
|
||||
}
|
||||
|
||||
// Function to request a token when a participant joins the room
|
||||
async onTokenRequested(participantName: string) {
|
||||
const { token } = await this.getToken(this.roomName, participantName);
|
||||
this.token = token;
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
// Unsubscribe from participant updates to prevent memory leaks
|
||||
this.localParticipantSubs.unsubscribe();
|
||||
this.remoteParticipantsSubs.unsubscribe();
|
||||
}
|
||||
|
||||
// Subscribe to updates for local and remote participants
|
||||
subscribeToParticipants() {
|
||||
this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => {
|
||||
this.localParticipant = p;
|
||||
if (p) this.localParticipant = p;
|
||||
});
|
||||
|
||||
this.remoteParticipantsSubs = this.participantService.remoteParticipantsObs.subscribe((participants) => {
|
||||
this.remoteParticipants = participants;
|
||||
});
|
||||
this.remoteParticipantsSubs = this.participantService.remoteParticipantsObs.subscribe(
|
||||
(participants) => {
|
||||
this.remoteParticipants = participants;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* --------------------------------------------
|
||||
* GETTING A TOKEN FROM YOUR APPLICATION SERVER
|
||||
* --------------------------------------------
|
||||
* The methods below request the creation of a Session and a Token to
|
||||
* your application server. This keeps your OpenVidu deployment secure.
|
||||
*
|
||||
* In this sample code, there is no user control at all. Anybody could
|
||||
* access your application server endpoints! In a real production
|
||||
* environment, your application server must identify the user to allow
|
||||
* access to the endpoints.
|
||||
*
|
||||
* Visit https://docs.openvidu.io/en/stable/application-server to learn
|
||||
* more about the integration of OpenVidu in your application server.
|
||||
*/
|
||||
|
||||
async getToken(): Promise<string> {
|
||||
const sessionId = await this.createSession(this.sessionId);
|
||||
return await this.createToken(sessionId);
|
||||
}
|
||||
|
||||
createSession(sessionId: string): Promise<string> {
|
||||
return lastValueFrom(this.httpClient.post(
|
||||
this.APPLICATION_SERVER_URL + 'api/sessions',
|
||||
{ customSessionId: sessionId },
|
||||
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
|
||||
));
|
||||
}
|
||||
|
||||
createToken(sessionId: string): Promise<string> {
|
||||
return lastValueFrom(this.httpClient.post(
|
||||
this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections',
|
||||
{},
|
||||
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
|
||||
));
|
||||
// Function to get a token from the server
|
||||
getToken(roomName: string, participantName: string): Promise<any> {
|
||||
try {
|
||||
// Send a POST request to the server to obtain a token
|
||||
return lastValueFrom(
|
||||
this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'api/sessions', {
|
||||
roomName,
|
||||
participantName,
|
||||
})
|
||||
);
|
||||
} catch (error: any) {
|
||||
// Handle errors, e.g., if the server is not reachable
|
||||
if (error.status === 404) {
|
||||
throw {
|
||||
status: error.status,
|
||||
message: 'Cannot connect with the backend. ' + error.url + ' not found',
|
||||
};
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -16,12 +16,13 @@
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "es2020",
|
||||
"target": "ES2022",
|
||||
"module": "es2020",
|
||||
"lib": [
|
||||
"es2020",
|
||||
"dom"
|
||||
]
|
||||
],
|
||||
"useDefineForClassFields": false
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
|
||||
# For additional information regarding the format and rule options, please see:
|
||||
# https://github.com/browserslist/browserslist#queries
|
||||
|
||||
# For the full list of supported browsers by the Angular framework, please see:
|
||||
# https://angular.io/guide/browser-support
|
||||
|
||||
# You can see what browsers were selected by your queries by running:
|
||||
# npx browserslist
|
||||
|
||||
last 1 Chrome version
|
||||
last 1 Firefox version
|
||||
last 2 Edge major versions
|
||||
last 2 Safari major versions
|
||||
last 2 iOS major versions
|
||||
Firefox ESR
|
||||
@ -113,5 +113,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": false
|
||||
}
|
||||
}
|
||||
|
||||
7236
openvidu-components/openvidu-custom-panels/package-lock.json
generated
7236
openvidu-components/openvidu-custom-panels/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -10,26 +10,26 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^14.2.11",
|
||||
"@angular/cdk": "^14.2.7",
|
||||
"@angular/common": "^14.2.11",
|
||||
"@angular/compiler": "^14.2.11",
|
||||
"@angular/core": "^14.2.11",
|
||||
"@angular/forms": "^14.2.11",
|
||||
"@angular/material": "^14.2.7",
|
||||
"@angular/platform-browser": "^14.2.11",
|
||||
"@angular/platform-browser-dynamic": "^14.2.11",
|
||||
"@angular/router": "^14.2.11",
|
||||
"openvidu-angular": "2.27.0",
|
||||
"@angular/animations": "^15.2.9",
|
||||
"@angular/cdk": "^15.2.9",
|
||||
"@angular/common": "^15.2.9",
|
||||
"@angular/compiler": "^15.2.9",
|
||||
"@angular/core": "^15.2.9",
|
||||
"@angular/forms": "^15.2.9",
|
||||
"@angular/material": "^15.2.9",
|
||||
"@angular/platform-browser": "^15.2.9",
|
||||
"@angular/platform-browser-dynamic": "^15.2.9",
|
||||
"@angular/router": "^15.2.9",
|
||||
"openvidu-angular": "file:../openvidu-angular-3.0.0-dev.tgz",
|
||||
"rxjs": "~7.5.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^14.2.10",
|
||||
"@angular/cli": "^14.2.10",
|
||||
"@angular/compiler-cli": "^14.2.11",
|
||||
"@angular-devkit/build-angular": "^15.2.9",
|
||||
"@angular/cli": "^15.2.9",
|
||||
"@angular/compiler-cli": "^15.2.9",
|
||||
"@types/node": "^12.11.1",
|
||||
"typescript": "~4.6.2"
|
||||
"typescript": "4.8.4"
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
#my-chat-panel,
|
||||
#my-participants-panel,
|
||||
#my-activities-panel {
|
||||
text-align: center;
|
||||
height: calc(100% - 40px);
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
#my-chat-panel {
|
||||
background: #c9ffb2;
|
||||
}
|
||||
|
||||
#my-participants-panel {
|
||||
background: #ddf2ff;
|
||||
}
|
||||
|
||||
#my-activities-panel {
|
||||
background: #ffddc9;
|
||||
}
|
||||
@ -1,87 +1,69 @@
|
||||
import { HttpClient } from "@angular/common/http";
|
||||
import { Component, OnInit } from "@angular/core";
|
||||
import { Component } from "@angular/core";
|
||||
import { lastValueFrom } from "rxjs";
|
||||
|
||||
import { TokenModel } from "openvidu-angular";
|
||||
import { environment } from 'src/environments/environment';
|
||||
|
||||
@Component({
|
||||
selector: "app-root",
|
||||
template: `
|
||||
<ov-videoconference [tokens]="tokens">
|
||||
<!-- OpenVidu Video Conference Component -->
|
||||
<ov-videoconference [token]="token" (onTokenRequested)="onTokenRequested($event)">
|
||||
<!-- Custom Panels -->
|
||||
<ov-panel *ovPanel>
|
||||
|
||||
<!-- Custom Chat Panel -->
|
||||
<div *ovChatPanel id="my-chat-panel">This is my custom chat panel</div>
|
||||
|
||||
<!-- Custom Participants Panel -->
|
||||
<div *ovParticipantsPanel id="my-participants-panel">
|
||||
This is my custom participants panel
|
||||
</div>
|
||||
|
||||
<!-- Custom Activities Panel -->
|
||||
<div *ovActivitiesPanel id="my-activities-panel">This is my custom activities panel</div>
|
||||
|
||||
</ov-panel>
|
||||
</ov-videoconference>
|
||||
`,
|
||||
styles: [`
|
||||
#my-chat-panel,
|
||||
#my-participants-panel {
|
||||
text-align: center;
|
||||
height: calc(100% - 40px);
|
||||
margin: 20px;
|
||||
}
|
||||
#my-chat-panel {
|
||||
background: #c9ffb2;
|
||||
}
|
||||
#my-participants-panel {
|
||||
background: #ddf2ff;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class AppComponent implements OnInit {
|
||||
styleUrls: ["./app.component.scss"]
|
||||
|
||||
})
|
||||
export class AppComponent {
|
||||
// Define the URL of the application server
|
||||
APPLICATION_SERVER_URL = environment.applicationServerUrl;
|
||||
|
||||
sessionId = "panel-directive-example";
|
||||
tokens!: TokenModel;
|
||||
// Define the name of the room and initialize the token variable
|
||||
roomName = 'custom-panels';
|
||||
token!: string;
|
||||
|
||||
constructor(private httpClient: HttpClient) { }
|
||||
|
||||
async ngOnInit() {
|
||||
this.tokens = {
|
||||
webcam: await this.getToken(),
|
||||
screen: await this.getToken(),
|
||||
};
|
||||
// Function to request a token when a participant joins the room
|
||||
async onTokenRequested(participantName: string) {
|
||||
const { token } = await this.getToken(this.roomName, participantName);
|
||||
this.token = token;
|
||||
}
|
||||
|
||||
/**
|
||||
* --------------------------------------------
|
||||
* GETTING A TOKEN FROM YOUR APPLICATION SERVER
|
||||
* --------------------------------------------
|
||||
* The methods below request the creation of a Session and a Token to
|
||||
* your application server. This keeps your OpenVidu deployment secure.
|
||||
*
|
||||
* In this sample code, there is no user control at all. Anybody could
|
||||
* access your application server endpoints! In a real production
|
||||
* environment, your application server must identify the user to allow
|
||||
* access to the endpoints.
|
||||
*
|
||||
* Visit https://docs.openvidu.io/en/stable/application-server to learn
|
||||
* more about the integration of OpenVidu in your application server.
|
||||
*/
|
||||
|
||||
async getToken(): Promise<string> {
|
||||
const sessionId = await this.createSession(this.sessionId);
|
||||
return await this.createToken(sessionId);
|
||||
}
|
||||
|
||||
createSession(sessionId: string): Promise<string> {
|
||||
return lastValueFrom(this.httpClient.post(
|
||||
this.APPLICATION_SERVER_URL + 'api/sessions',
|
||||
{ customSessionId: sessionId },
|
||||
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
|
||||
));
|
||||
}
|
||||
|
||||
createToken(sessionId: string): Promise<string> {
|
||||
return lastValueFrom(this.httpClient.post(
|
||||
this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections',
|
||||
{},
|
||||
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
|
||||
));
|
||||
// Function to get a token from the server
|
||||
getToken(roomName: string, participantName: string): Promise<any> {
|
||||
try {
|
||||
// Send a POST request to the server to obtain a token
|
||||
return lastValueFrom(
|
||||
this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'api/sessions', {
|
||||
roomName,
|
||||
participantName,
|
||||
})
|
||||
);
|
||||
} catch (error: any) {
|
||||
// Handle errors, e.g., if the server is not reachable
|
||||
if (error.status === 404) {
|
||||
throw {
|
||||
status: error.status,
|
||||
message: 'Cannot connect with the backend. ' + error.url + ' not found',
|
||||
};
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -16,12 +16,13 @@
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "es2020",
|
||||
"target": "ES2022",
|
||||
"module": "es2020",
|
||||
"lib": [
|
||||
"es2020",
|
||||
"dom"
|
||||
]
|
||||
],
|
||||
"useDefineForClassFields": false
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
|
||||
# For additional information regarding the format and rule options, please see:
|
||||
# https://github.com/browserslist/browserslist#queries
|
||||
|
||||
# For the full list of supported browsers by the Angular framework, please see:
|
||||
# https://angular.io/guide/browser-support
|
||||
|
||||
# You can see what browsers were selected by your queries by running:
|
||||
# npx browserslist
|
||||
|
||||
last 1 Chrome version
|
||||
last 1 Firefox version
|
||||
last 2 Edge major versions
|
||||
last 2 Safari major versions
|
||||
last 2 iOS major versions
|
||||
Firefox ESR
|
||||
@ -113,5 +113,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": false
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -10,26 +10,26 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^14.2.11",
|
||||
"@angular/cdk": "^14.2.7",
|
||||
"@angular/common": "^14.2.11",
|
||||
"@angular/compiler": "^14.2.11",
|
||||
"@angular/core": "^14.2.11",
|
||||
"@angular/forms": "^14.2.11",
|
||||
"@angular/material": "^14.2.7",
|
||||
"@angular/platform-browser": "^14.2.11",
|
||||
"@angular/platform-browser-dynamic": "^14.2.11",
|
||||
"@angular/router": "^14.2.11",
|
||||
"openvidu-angular": "2.27.0",
|
||||
"@angular/animations": "^15.2.9",
|
||||
"@angular/cdk": "^15.2.9",
|
||||
"@angular/common": "^15.2.9",
|
||||
"@angular/compiler": "^15.2.9",
|
||||
"@angular/core": "^15.2.9",
|
||||
"@angular/forms": "^15.2.9",
|
||||
"@angular/material": "^15.2.9",
|
||||
"@angular/platform-browser": "^15.2.9",
|
||||
"@angular/platform-browser-dynamic": "^15.2.9",
|
||||
"@angular/router": "^15.2.9",
|
||||
"openvidu-angular": "file:../openvidu-angular-3.0.0-dev.tgz",
|
||||
"rxjs": "~7.5.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^14.2.10",
|
||||
"@angular/cli": "^14.2.10",
|
||||
"@angular/compiler-cli": "^14.2.11",
|
||||
"@angular-devkit/build-angular": "^15.2.9",
|
||||
"@angular/cli": "^15.2.9",
|
||||
"@angular/compiler-cli": "^15.2.9",
|
||||
"@types/node": "^12.11.1",
|
||||
"typescript": "~4.6.2"
|
||||
"typescript": "4.8.4"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,84 +1,78 @@
|
||||
import { HttpClient } from "@angular/common/http";
|
||||
import { Component, OnInit } from "@angular/core";
|
||||
import { Component } from "@angular/core";
|
||||
import { lastValueFrom } from "rxjs";
|
||||
|
||||
import { OpenViduService, TokenModel } from "openvidu-angular";
|
||||
import { OpenViduService } from "openvidu-angular";
|
||||
import { environment } from 'src/environments/environment';
|
||||
|
||||
@Component({
|
||||
selector: "app-root",
|
||||
template: `
|
||||
<!-- OpenVidu Video Conference Component -->
|
||||
<ov-videoconference
|
||||
*ngIf="connected"
|
||||
[tokens]="tokens"
|
||||
[toolbarDisplaySessionName]="false">
|
||||
[token]="token"
|
||||
[toolbarDisplaySessionName]="false"
|
||||
(onTokenRequested)="onTokenRequested($event)"
|
||||
>
|
||||
<!-- Participant Panel Item Elements -->
|
||||
<div *ovParticipantPanelItemElements="let participant">
|
||||
<button *ngIf="participant.local" (click)="leaveSession()">
|
||||
<!-- Leave Button for Local Participant -->
|
||||
<button *ngIf="participant.isLocal" (click)="leaveSession()">
|
||||
Leave
|
||||
</button>
|
||||
</div>
|
||||
</ov-videoconference>
|
||||
|
||||
<!-- Session Disconnected Message -->
|
||||
<div *ngIf="!connected" style="text-align: center;">Session disconnected</div>
|
||||
`,
|
||||
styles: []
|
||||
})
|
||||
export class AppComponent implements OnInit {
|
||||
|
||||
export class AppComponent {
|
||||
// Define the URL of the application server
|
||||
APPLICATION_SERVER_URL = environment.applicationServerUrl;
|
||||
|
||||
sessionId = "participants-panel-directive-example";
|
||||
tokens!: TokenModel;
|
||||
// Define the name of the room and initialize the token variable
|
||||
roomName = 'participant-panel-item-elements';
|
||||
token!: string;
|
||||
|
||||
// Flag to indicate session connection status
|
||||
connected = true;
|
||||
|
||||
constructor(private httpClient: HttpClient, private openviduService: OpenViduService) { }
|
||||
|
||||
async ngOnInit() {
|
||||
this.tokens = {
|
||||
webcam: await this.getToken(),
|
||||
screen: await this.getToken(),
|
||||
};
|
||||
// Function to request a token when a participant joins the room
|
||||
async onTokenRequested(participantName: string) {
|
||||
const { token } = await this.getToken(this.roomName, participantName);
|
||||
this.token = token;
|
||||
}
|
||||
|
||||
leaveSession() {
|
||||
this.openviduService.disconnect();
|
||||
// Function to leave the session
|
||||
async leaveSession() {
|
||||
await this.openviduService.disconnectRoom();
|
||||
this.connected = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* --------------------------------------------
|
||||
* GETTING A TOKEN FROM YOUR APPLICATION SERVER
|
||||
* --------------------------------------------
|
||||
* The methods below request the creation of a Session and a Token to
|
||||
* your application server. This keeps your OpenVidu deployment secure.
|
||||
*
|
||||
* In this sample code, there is no user control at all. Anybody could
|
||||
* access your application server endpoints! In a real production
|
||||
* environment, your application server must identify the user to allow
|
||||
* access to the endpoints.
|
||||
*
|
||||
* Visit https://docs.openvidu.io/en/stable/application-server to learn
|
||||
* more about the integration of OpenVidu in your application server.
|
||||
*/
|
||||
|
||||
async getToken(): Promise<string> {
|
||||
const sessionId = await this.createSession(this.sessionId);
|
||||
return await this.createToken(sessionId);
|
||||
}
|
||||
|
||||
createSession(sessionId: string): Promise<string> {
|
||||
return lastValueFrom(this.httpClient.post(
|
||||
this.APPLICATION_SERVER_URL + 'api/sessions',
|
||||
{ customSessionId: sessionId },
|
||||
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
|
||||
));
|
||||
}
|
||||
|
||||
createToken(sessionId: string): Promise<string> {
|
||||
return lastValueFrom(this.httpClient.post(
|
||||
this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections',
|
||||
{},
|
||||
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
|
||||
));
|
||||
// Function to get a token from the server
|
||||
getToken(roomName: string, participantName: string): Promise<any> {
|
||||
try {
|
||||
// Send a POST request to the server to obtain a token
|
||||
return lastValueFrom(
|
||||
this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'api/sessions', {
|
||||
roomName,
|
||||
participantName,
|
||||
})
|
||||
);
|
||||
} catch (error: any) {
|
||||
// Handle errors, e.g., if the server is not reachable
|
||||
if (error.status === 404) {
|
||||
throw {
|
||||
status: error.status,
|
||||
message: 'Cannot connect with the backend. ' + error.url + ' not found',
|
||||
};
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -16,12 +16,13 @@
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "es2020",
|
||||
"target": "ES2022",
|
||||
"module": "es2020",
|
||||
"lib": [
|
||||
"es2020",
|
||||
"dom"
|
||||
]
|
||||
],
|
||||
"useDefineForClassFields": false
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
|
||||
# For additional information regarding the format and rule options, please see:
|
||||
# https://github.com/browserslist/browserslist#queries
|
||||
|
||||
# For the full list of supported browsers by the Angular framework, please see:
|
||||
# https://angular.io/guide/browser-support
|
||||
|
||||
# You can see what browsers were selected by your queries by running:
|
||||
# npx browserslist
|
||||
|
||||
last 1 Chrome version
|
||||
last 1 Firefox version
|
||||
last 2 Edge major versions
|
||||
last 2 Safari major versions
|
||||
last 2 iOS major versions
|
||||
Firefox ESR
|
||||
@ -113,5 +113,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": false
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -10,26 +10,26 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^14.2.11",
|
||||
"@angular/cdk": "^14.2.7",
|
||||
"@angular/common": "^14.2.11",
|
||||
"@angular/compiler": "^14.2.11",
|
||||
"@angular/core": "^14.2.11",
|
||||
"@angular/forms": "^14.2.11",
|
||||
"@angular/material": "^14.2.7",
|
||||
"@angular/platform-browser": "^14.2.11",
|
||||
"@angular/platform-browser-dynamic": "^14.2.11",
|
||||
"@angular/router": "^14.2.11",
|
||||
"openvidu-angular": "2.27.0",
|
||||
"@angular/animations": "^15.2.9",
|
||||
"@angular/cdk": "^15.2.9",
|
||||
"@angular/common": "^15.2.9",
|
||||
"@angular/compiler": "^15.2.9",
|
||||
"@angular/core": "^15.2.9",
|
||||
"@angular/forms": "^15.2.9",
|
||||
"@angular/material": "^15.2.9",
|
||||
"@angular/platform-browser": "^15.2.9",
|
||||
"@angular/platform-browser-dynamic": "^15.2.9",
|
||||
"@angular/router": "^15.2.9",
|
||||
"openvidu-angular": "file:../openvidu-angular-3.0.0-dev.tgz",
|
||||
"rxjs": "~7.5.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^14.2.10",
|
||||
"@angular/cli": "^14.2.10",
|
||||
"@angular/compiler-cli": "^14.2.11",
|
||||
"@angular-devkit/build-angular": "^15.2.9",
|
||||
"@angular/cli": "^15.2.9",
|
||||
"@angular/compiler-cli": "^15.2.9",
|
||||
"@types/node": "^12.11.1",
|
||||
"typescript": "~4.6.2"
|
||||
"typescript": "4.8.4"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,17 +1,22 @@
|
||||
import { HttpClient } from "@angular/common/http";
|
||||
import { Component, OnInit } from "@angular/core";
|
||||
import { Component } from "@angular/core";
|
||||
import { lastValueFrom } from "rxjs";
|
||||
|
||||
import { TokenModel } from "openvidu-angular";
|
||||
import { environment } from 'src/environments/environment';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
template: `
|
||||
<ov-videoconference [tokens]="tokens" [toolbarDisplaySessionName]="false">
|
||||
<!-- OpenVidu Video Conference Component -->
|
||||
<ov-videoconference [token]="token" (onTokenRequested)="onTokenRequested($event)">
|
||||
<!-- Participant Panel Items -->
|
||||
<div *ovParticipantPanelItem="let participant" style="display: flex">
|
||||
<p>{{ participant.nickname }}</p>
|
||||
<p>{{ participant.name }}</p>
|
||||
|
||||
<!-- More Options Menu -->
|
||||
<button mat-icon-button [matMenuTriggerFor]="menu"><mat-icon>more_vert</mat-icon></button>
|
||||
|
||||
<!-- Menu Content -->
|
||||
<mat-menu #menu="matMenu">
|
||||
<button mat-menu-item>Button 1</button>
|
||||
<button mat-menu-item>Button 2</button>
|
||||
@ -21,56 +26,40 @@ import { environment } from 'src/environments/environment';
|
||||
`,
|
||||
styles: []
|
||||
})
|
||||
export class AppComponent implements OnInit {
|
||||
|
||||
export class AppComponent {
|
||||
// Define the URL of the application server
|
||||
APPLICATION_SERVER_URL = environment.applicationServerUrl;
|
||||
|
||||
sessionId = 'participants-panel-directive-example';
|
||||
tokens!: TokenModel;
|
||||
// Define the name of the room and initialize the token variable
|
||||
roomName = 'participant-panel-item';
|
||||
token!: string;
|
||||
|
||||
constructor(private httpClient: HttpClient) { }
|
||||
|
||||
async ngOnInit() {
|
||||
this.tokens = {
|
||||
webcam: await this.getToken(),
|
||||
screen: await this.getToken()
|
||||
};
|
||||
// Function to request a token when a participant joins the room
|
||||
async onTokenRequested(participantName: string) {
|
||||
const { token } = await this.getToken(this.roomName, participantName);
|
||||
this.token = token;
|
||||
}
|
||||
|
||||
/**
|
||||
* --------------------------------------------
|
||||
* GETTING A TOKEN FROM YOUR APPLICATION SERVER
|
||||
* --------------------------------------------
|
||||
* The methods below request the creation of a Session and a Token to
|
||||
* your application server. This keeps your OpenVidu deployment secure.
|
||||
*
|
||||
* In this sample code, there is no user control at all. Anybody could
|
||||
* access your application server endpoints! In a real production
|
||||
* environment, your application server must identify the user to allow
|
||||
* access to the endpoints.
|
||||
*
|
||||
* Visit https://docs.openvidu.io/en/stable/application-server to learn
|
||||
* more about the integration of OpenVidu in your application server.
|
||||
*/
|
||||
|
||||
async getToken(): Promise<string> {
|
||||
const sessionId = await this.createSession(this.sessionId);
|
||||
return await this.createToken(sessionId);
|
||||
}
|
||||
|
||||
createSession(sessionId: string): Promise<string> {
|
||||
return lastValueFrom(this.httpClient.post(
|
||||
this.APPLICATION_SERVER_URL + 'api/sessions',
|
||||
{ customSessionId: sessionId },
|
||||
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
|
||||
));
|
||||
}
|
||||
|
||||
createToken(sessionId: string): Promise<string> {
|
||||
return lastValueFrom(this.httpClient.post(
|
||||
this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections',
|
||||
{},
|
||||
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
|
||||
));
|
||||
// Function to get a token from the server
|
||||
getToken(roomName: string, participantName: string): Promise<any> {
|
||||
try {
|
||||
// Send a POST request to the server to obtain a token
|
||||
return lastValueFrom(
|
||||
this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'api/sessions', {
|
||||
roomName,
|
||||
participantName,
|
||||
})
|
||||
);
|
||||
} catch (error: any) {
|
||||
// Handle errors, e.g., if the server is not reachable
|
||||
if (error.status === 404) {
|
||||
throw {
|
||||
status: error.status,
|
||||
message: 'Cannot connect with the backend. ' + error.url + ' not found',
|
||||
};
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -16,12 +16,13 @@
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "es2020",
|
||||
"target": "ES2022",
|
||||
"module": "es2020",
|
||||
"lib": [
|
||||
"es2020",
|
||||
"dom"
|
||||
]
|
||||
],
|
||||
"useDefineForClassFields": false
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
|
||||
# For additional information regarding the format and rule options, please see:
|
||||
# https://github.com/browserslist/browserslist#queries
|
||||
|
||||
# For the full list of supported browsers by the Angular framework, please see:
|
||||
# https://angular.io/guide/browser-support
|
||||
|
||||
# You can see what browsers were selected by your queries by running:
|
||||
# npx browserslist
|
||||
|
||||
last 1 Chrome version
|
||||
last 1 Firefox version
|
||||
last 2 Edge major versions
|
||||
last 2 Safari major versions
|
||||
last 2 iOS major versions
|
||||
Firefox ESR
|
||||
@ -113,5 +113,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": false
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -10,26 +10,26 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^14.2.11",
|
||||
"@angular/cdk": "^14.2.7",
|
||||
"@angular/common": "^14.2.11",
|
||||
"@angular/compiler": "^14.2.11",
|
||||
"@angular/core": "^14.2.11",
|
||||
"@angular/forms": "^14.2.11",
|
||||
"@angular/material": "^14.2.7",
|
||||
"@angular/platform-browser": "^14.2.11",
|
||||
"@angular/platform-browser-dynamic": "^14.2.11",
|
||||
"@angular/router": "^14.2.11",
|
||||
"openvidu-angular": "2.27.0",
|
||||
"@angular/animations": "^15.2.9",
|
||||
"@angular/cdk": "^15.2.9",
|
||||
"@angular/common": "^15.2.9",
|
||||
"@angular/compiler": "^15.2.9",
|
||||
"@angular/core": "^15.2.9",
|
||||
"@angular/forms": "^15.2.9",
|
||||
"@angular/material": "^15.2.9",
|
||||
"@angular/platform-browser": "^15.2.9",
|
||||
"@angular/platform-browser-dynamic": "^15.2.9",
|
||||
"@angular/router": "^15.2.9",
|
||||
"openvidu-angular": "file:../openvidu-angular-3.0.0-dev.tgz",
|
||||
"rxjs": "~7.5.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^14.2.10",
|
||||
"@angular/cli": "^14.2.10",
|
||||
"@angular/compiler-cli": "^14.2.11",
|
||||
"@angular-devkit/build-angular": "^15.2.9",
|
||||
"@angular/cli": "^15.2.9",
|
||||
"@angular/compiler-cli": "^15.2.9",
|
||||
"@types/node": "^12.11.1",
|
||||
"typescript": "~4.6.2"
|
||||
"typescript": "4.8.4"
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,11 @@
|
||||
#my-panel {
|
||||
background: #faff7f;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
#my-panel > #local {
|
||||
background: #a184ff;
|
||||
}
|
||||
#my-panel > #remote {
|
||||
background: #7fb8ff;
|
||||
}
|
||||
@ -1,107 +1,94 @@
|
||||
import { HttpClient } from "@angular/common/http";
|
||||
import { Component, OnInit } from "@angular/core";
|
||||
import { Component, OnDestroy, OnInit } from "@angular/core";
|
||||
import { lastValueFrom, Subscription } from "rxjs";
|
||||
|
||||
import { ParticipantAbstractModel, ParticipantService, TokenModel } from "openvidu-angular";
|
||||
import { ParticipantModel, ParticipantService } from "openvidu-angular";
|
||||
import { environment } from 'src/environments/environment';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
template: `
|
||||
<ov-videoconference [tokens]="tokens" [toolbarDisplaySessionName]="false" (onSessionCreated)="subscribeToParticipants()">
|
||||
<!-- OpenVidu Video Conference Component -->
|
||||
<ov-videoconference [token]="token" (onTokenRequested)="onTokenRequested($event)">
|
||||
|
||||
<!-- Custom Participants Panel -->
|
||||
<div *ovParticipantsPanel id="my-panel">
|
||||
<ul id="local">
|
||||
<li>{{localParticipant.nickname}}</li>
|
||||
<li>{{localParticipant.name}}</li>
|
||||
</ul>
|
||||
<ul id="remote">
|
||||
<li *ngFor="let p of remoteParticipants">{{p.nickname}}</li>
|
||||
<li *ngFor="let p of remoteParticipants">{{p.name}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</ov-videoconference>
|
||||
`,
|
||||
styles: [`
|
||||
#my-panel {
|
||||
background: #faff7f;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
#my-panel > #local {
|
||||
background: #a184ff;
|
||||
}
|
||||
#my-panel > #remote {
|
||||
background: #7fb8ff;
|
||||
}
|
||||
`]
|
||||
styleUrls: ['./app.component.scss']
|
||||
})
|
||||
export class AppComponent implements OnInit {
|
||||
|
||||
export class AppComponent implements OnInit, OnDestroy {
|
||||
// Define the URL of the application server
|
||||
APPLICATION_SERVER_URL = environment.applicationServerUrl;
|
||||
// Define the name of the room and initialize the token variable
|
||||
roomName = 'custom-participants-panel';
|
||||
token!: string;
|
||||
|
||||
sessionId = 'participants-panel-directive-example';
|
||||
tokens!: TokenModel;
|
||||
|
||||
localParticipant!: ParticipantAbstractModel;
|
||||
remoteParticipants!: ParticipantAbstractModel[];
|
||||
// Participant-related properties
|
||||
localParticipant!: ParticipantModel;
|
||||
remoteParticipants!: ParticipantModel[];
|
||||
localParticipantSubs!: Subscription;
|
||||
remoteParticipantsSubs!: Subscription;
|
||||
|
||||
constructor(private httpClient: HttpClient, private participantService: ParticipantService) { }
|
||||
|
||||
async ngOnInit() {
|
||||
this.tokens = {
|
||||
webcam: await this.getToken(),
|
||||
screen: await this.getToken()
|
||||
};
|
||||
// Subscribes to updates for local and remote participants.
|
||||
ngOnInit() {
|
||||
this.subscribeToParticipants();
|
||||
}
|
||||
|
||||
// Unsubscribes from updates for local and remote participants to prevent memory leaks.
|
||||
ngOnDestroy() {
|
||||
this.localParticipantSubs.unsubscribe();
|
||||
this.remoteParticipantsSubs.unsubscribe();
|
||||
}
|
||||
|
||||
// Function called when a participant requests a token to join the room.
|
||||
async onTokenRequested(participantName: string) {
|
||||
const { token } = await this.getToken(this.roomName, participantName);
|
||||
this.token = token;
|
||||
}
|
||||
|
||||
// Subscribes to updates for local and remote participants.
|
||||
subscribeToParticipants() {
|
||||
this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => {
|
||||
this.localParticipant = p;
|
||||
});
|
||||
this.remoteParticipantsSubs = this.participantService.remoteParticipantsObs.subscribe((participants) => {
|
||||
this.remoteParticipants = participants;
|
||||
if (p) this.localParticipant = p;
|
||||
});
|
||||
|
||||
this.remoteParticipantsSubs = this.participantService.remoteParticipantsObs.subscribe(
|
||||
(participants) => {
|
||||
this.remoteParticipants = participants;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* --------------------------------------------
|
||||
* GETTING A TOKEN FROM YOUR APPLICATION SERVER
|
||||
* --------------------------------------------
|
||||
* The methods below request the creation of a Session and a Token to
|
||||
* your application server. This keeps your OpenVidu deployment secure.
|
||||
*
|
||||
* In this sample code, there is no user control at all. Anybody could
|
||||
* access your application server endpoints! In a real production
|
||||
* environment, your application server must identify the user to allow
|
||||
* access to the endpoints.
|
||||
*
|
||||
* Visit https://docs.openvidu.io/en/stable/application-server to learn
|
||||
* more about the integration of OpenVidu in your application server.
|
||||
*/
|
||||
|
||||
async getToken(): Promise<string> {
|
||||
const sessionId = await this.createSession(this.sessionId);
|
||||
return await this.createToken(sessionId);
|
||||
// Sends a request to the server to obtain a token for a participant.
|
||||
async getToken(roomName: string, participantName: string): Promise<any> {
|
||||
try {
|
||||
// Send a POST request to the server to obtain a token
|
||||
return lastValueFrom(
|
||||
this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'api/sessions', {
|
||||
roomName,
|
||||
participantName,
|
||||
})
|
||||
);
|
||||
} catch (error: any) {
|
||||
// Handle errors, e.g., if the server is not reachable
|
||||
if (error.status === 404) {
|
||||
throw {
|
||||
status: error.status,
|
||||
message: 'Cannot connect with the backend. ' + error.url + ' not found',
|
||||
};
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
createSession(sessionId: string): Promise<string> {
|
||||
return lastValueFrom(this.httpClient.post(
|
||||
this.APPLICATION_SERVER_URL + 'api/sessions',
|
||||
{ customSessionId: sessionId },
|
||||
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
|
||||
));
|
||||
}
|
||||
|
||||
createToken(sessionId: string): Promise<string> {
|
||||
return lastValueFrom(this.httpClient.post(
|
||||
this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections',
|
||||
{},
|
||||
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
|
||||
));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,12 +16,13 @@
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "es2020",
|
||||
"target": "ES2022",
|
||||
"module": "es2020",
|
||||
"lib": [
|
||||
"es2020",
|
||||
"dom"
|
||||
]
|
||||
],
|
||||
"useDefineForClassFields": false
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
|
||||
# For additional information regarding the format and rule options, please see:
|
||||
# https://github.com/browserslist/browserslist#queries
|
||||
|
||||
# For the full list of supported browsers by the Angular framework, please see:
|
||||
# https://angular.io/guide/browser-support
|
||||
|
||||
# You can see what browsers were selected by your queries by running:
|
||||
# npx browserslist
|
||||
|
||||
last 1 Chrome version
|
||||
last 1 Firefox version
|
||||
last 2 Edge major versions
|
||||
last 2 Safari major versions
|
||||
last 2 iOS major versions
|
||||
Firefox ESR
|
||||
@ -113,5 +113,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": false
|
||||
}
|
||||
}
|
||||
|
||||
7236
openvidu-components/openvidu-custom-stream/package-lock.json
generated
7236
openvidu-components/openvidu-custom-stream/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -10,26 +10,26 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^14.2.11",
|
||||
"@angular/cdk": "^14.2.7",
|
||||
"@angular/common": "^14.2.11",
|
||||
"@angular/compiler": "^14.2.11",
|
||||
"@angular/core": "^14.2.11",
|
||||
"@angular/forms": "^14.2.11",
|
||||
"@angular/material": "^14.2.7",
|
||||
"@angular/platform-browser": "^14.2.11",
|
||||
"@angular/platform-browser-dynamic": "^14.2.11",
|
||||
"@angular/router": "^14.2.11",
|
||||
"openvidu-angular": "2.27.0",
|
||||
"@angular/animations": "^15.2.9",
|
||||
"@angular/cdk": "^15.2.9",
|
||||
"@angular/common": "^15.2.9",
|
||||
"@angular/compiler": "^15.2.9",
|
||||
"@angular/core": "^15.2.9",
|
||||
"@angular/forms": "^15.2.9",
|
||||
"@angular/material": "^15.2.9",
|
||||
"@angular/platform-browser": "^15.2.9",
|
||||
"@angular/platform-browser-dynamic": "^15.2.9",
|
||||
"@angular/router": "^15.2.9",
|
||||
"openvidu-angular": "file:../openvidu-angular-3.0.0-dev.tgz",
|
||||
"rxjs": "~7.5.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^14.2.10",
|
||||
"@angular/cli": "^14.2.10",
|
||||
"@angular/compiler-cli": "^14.2.11",
|
||||
"@angular-devkit/build-angular": "^15.2.9",
|
||||
"@angular/cli": "^15.2.9",
|
||||
"@angular/compiler-cli": "^15.2.9",
|
||||
"@types/node": "^12.11.1",
|
||||
"typescript": "~4.6.2"
|
||||
"typescript": "4.8.4"
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,6 @@
|
||||
p {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
border: 2px solid;
|
||||
background: #000000;
|
||||
}
|
||||
@ -1,79 +1,64 @@
|
||||
import { HttpClient } from "@angular/common/http";
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component } from '@angular/core';
|
||||
import { lastValueFrom } from "rxjs";
|
||||
|
||||
import { TokenModel } from 'openvidu-angular';
|
||||
import { environment } from 'src/environments/environment';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
template: `
|
||||
<ov-videoconference [tokens]="tokens">
|
||||
<div *ovStream="let stream">
|
||||
<ov-stream [stream]="stream" [displayParticipantName]="false"></ov-stream>
|
||||
<p>{{ stream.participant.nickname }}</p>
|
||||
<!-- OpenVidu Video Conference Component -->
|
||||
<ov-videoconference [token]="token" (onTokenRequested)="onTokenRequested($event)">
|
||||
|
||||
<!-- Display Video Streams -->
|
||||
<div *ovStream="let track">
|
||||
|
||||
<!-- Video Stream Component -->
|
||||
<ov-stream [track]="track" [displayParticipantName]="false"></ov-stream>
|
||||
|
||||
<!-- Display Participant's Name -->
|
||||
<p>{{ track.participant.name }}</p>
|
||||
|
||||
</div>
|
||||
|
||||
</ov-videoconference>
|
||||
`,
|
||||
styles: [`
|
||||
p {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
border: 2px solid;
|
||||
background: #000000;
|
||||
}
|
||||
`]
|
||||
styleUrls: ['./app.component.scss']
|
||||
})
|
||||
export class AppComponent implements OnInit {
|
||||
|
||||
export class AppComponent {
|
||||
// Define the URL of the application server
|
||||
APPLICATION_SERVER_URL = environment.applicationServerUrl;
|
||||
|
||||
sessionId = 'toolbar-directive-example';
|
||||
tokens!: TokenModel;
|
||||
// Define the name of the room and initialize the token variable
|
||||
roomName = 'custom-stream';
|
||||
token!: string;
|
||||
|
||||
constructor(private httpClient: HttpClient) { }
|
||||
|
||||
async ngOnInit() {
|
||||
this.tokens = {
|
||||
webcam: await this.getToken(),
|
||||
screen: await this.getToken()
|
||||
};
|
||||
// Function to request a token when a participant joins the room
|
||||
async onTokenRequested(participantName: string) {
|
||||
const { token } = await this.getToken(this.roomName, participantName);
|
||||
this.token = token;
|
||||
}
|
||||
|
||||
/**
|
||||
* --------------------------------------------
|
||||
* GETTING A TOKEN FROM YOUR APPLICATION SERVER
|
||||
* --------------------------------------------
|
||||
* The methods below request the creation of a Session and a Token to
|
||||
* your application server. This keeps your OpenVidu deployment secure.
|
||||
*
|
||||
* In this sample code, there is no user control at all. Anybody could
|
||||
* access your application server endpoints! In a real production
|
||||
* environment, your application server must identify the user to allow
|
||||
* access to the endpoints.
|
||||
*
|
||||
* Visit https://docs.openvidu.io/en/stable/application-server to learn
|
||||
* more about the integration of OpenVidu in your application server.
|
||||
*/
|
||||
|
||||
async getToken(): Promise<string> {
|
||||
const sessionId = await this.createSession(this.sessionId);
|
||||
return await this.createToken(sessionId);
|
||||
}
|
||||
|
||||
createSession(sessionId: string): Promise<string> {
|
||||
return lastValueFrom(this.httpClient.post(
|
||||
this.APPLICATION_SERVER_URL + 'api/sessions',
|
||||
{ customSessionId: sessionId },
|
||||
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
|
||||
));
|
||||
}
|
||||
|
||||
createToken(sessionId: string): Promise<string> {
|
||||
return lastValueFrom(this.httpClient.post(
|
||||
this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections',
|
||||
{},
|
||||
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
|
||||
));
|
||||
// Function to get a token from the server
|
||||
getToken(roomName: string, participantName: string): Promise<any> {
|
||||
try {
|
||||
// Send a POST request to the server to obtain a token
|
||||
return lastValueFrom(
|
||||
this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'api/sessions', {
|
||||
roomName,
|
||||
participantName,
|
||||
})
|
||||
);
|
||||
} catch (error: any) {
|
||||
// Handle errors, e.g., if the server is not reachable
|
||||
if (error.status === 404) {
|
||||
throw {
|
||||
status: error.status,
|
||||
message: 'Cannot connect with the backend. ' + error.url + ' not found',
|
||||
};
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -16,12 +16,13 @@
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "es2020",
|
||||
"target": "ES2022",
|
||||
"module": "es2020",
|
||||
"lib": [
|
||||
"es2020",
|
||||
"dom"
|
||||
]
|
||||
],
|
||||
"useDefineForClassFields": false
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
|
||||
# For additional information regarding the format and rule options, please see:
|
||||
# https://github.com/browserslist/browserslist#queries
|
||||
|
||||
# For the full list of supported browsers by the Angular framework, please see:
|
||||
# https://angular.io/guide/browser-support
|
||||
|
||||
# You can see what browsers were selected by your queries by running:
|
||||
# npx browserslist
|
||||
|
||||
last 1 Chrome version
|
||||
last 1 Firefox version
|
||||
last 2 Edge major versions
|
||||
last 2 Safari major versions
|
||||
last 2 iOS major versions
|
||||
Firefox ESR
|
||||
@ -108,5 +108,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": false
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -10,26 +10,26 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^14.2.11",
|
||||
"@angular/cdk": "^14.2.7",
|
||||
"@angular/common": "^14.2.11",
|
||||
"@angular/compiler": "^14.2.11",
|
||||
"@angular/core": "^14.2.11",
|
||||
"@angular/forms": "^14.2.11",
|
||||
"@angular/material": "^14.2.7",
|
||||
"@angular/platform-browser": "^14.2.11",
|
||||
"@angular/platform-browser-dynamic": "^14.2.11",
|
||||
"@angular/router": "^14.2.11",
|
||||
"openvidu-angular": "2.27.0",
|
||||
"@angular/animations": "^15.2.9",
|
||||
"@angular/cdk": "^15.2.9",
|
||||
"@angular/common": "^15.2.9",
|
||||
"@angular/compiler": "^15.2.9",
|
||||
"@angular/core": "^15.2.9",
|
||||
"@angular/forms": "^15.2.9",
|
||||
"@angular/material": "^15.2.9",
|
||||
"@angular/platform-browser": "^15.2.9",
|
||||
"@angular/platform-browser-dynamic": "^15.2.9",
|
||||
"@angular/router": "^15.2.9",
|
||||
"openvidu-angular": "file:../openvidu-angular-3.0.0-dev.tgz",
|
||||
"rxjs": "~7.5.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^14.2.10",
|
||||
"@angular/cli": "^14.2.10",
|
||||
"@angular/compiler-cli": "^14.2.11",
|
||||
"@angular-devkit/build-angular": "^15.2.9",
|
||||
"@angular/cli": "^15.2.9",
|
||||
"@angular/compiler-cli": "^15.2.9",
|
||||
"@types/node": "^12.11.1",
|
||||
"typescript": "~4.6.2"
|
||||
"typescript": "4.8.4"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
import { HttpClient } from "@angular/common/http";
|
||||
import { Component, OnInit } from "@angular/core";
|
||||
import { Component } from "@angular/core";
|
||||
import { lastValueFrom } from "rxjs";
|
||||
|
||||
import { OpenViduService, TokenModel } from "openvidu-angular";
|
||||
import { ParticipantService } from "openvidu-angular";
|
||||
import { environment } from 'src/environments/environment';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
template: `
|
||||
<ov-videoconference [tokens]="tokens">
|
||||
<ov-videoconference [token]="token" (onTokenRequested)="onTokenRequested($event)">
|
||||
<div *ovToolbar style="text-align: center;">
|
||||
<button (click)="toggleVideo()">Toggle Video</button>
|
||||
<button (click)="toggleAudio()">Toggle Audio</button>
|
||||
@ -16,69 +16,46 @@ import { environment } from 'src/environments/environment';
|
||||
</ov-videoconference>
|
||||
`
|
||||
})
|
||||
export class AppComponent implements OnInit {
|
||||
export class AppComponent {
|
||||
|
||||
// The URL of the application server.
|
||||
APPLICATION_SERVER_URL = environment.applicationServerUrl;
|
||||
|
||||
sessionId = 'toolbar-directive-example';
|
||||
tokens!: TokenModel;
|
||||
// The name of the room.
|
||||
roomName = 'custom-toolbar';
|
||||
|
||||
publishVideo = true;
|
||||
publishAudio = true;
|
||||
// The token used to connect to the videoconference.
|
||||
token!: string;
|
||||
|
||||
constructor(private httpClient: HttpClient, private openviduService: OpenViduService) { }
|
||||
constructor(private httpClient: HttpClient, private participantService: ParticipantService) { }
|
||||
|
||||
async ngOnInit() {
|
||||
this.tokens = {
|
||||
webcam: await this.getToken(),
|
||||
screen: await this.getToken()
|
||||
};
|
||||
// Called when a token is requested for a participant.
|
||||
async onTokenRequested(participantName: string) {
|
||||
const { token } = await this.getToken(this.roomName, participantName);
|
||||
this.token = token;
|
||||
}
|
||||
|
||||
toggleVideo() {
|
||||
this.publishVideo = !this.publishVideo;
|
||||
this.openviduService.publishVideo(this.publishVideo);
|
||||
// Toggles the camera on and off.
|
||||
async toggleVideo() {
|
||||
const isCameraEnabled = this.participantService.isMyCameraEnabled();
|
||||
await this.participantService.setCameraEnabled(!isCameraEnabled);
|
||||
}
|
||||
|
||||
toggleAudio() {
|
||||
this.publishAudio = !this.publishAudio;
|
||||
this.openviduService.publishAudio(this.publishAudio);
|
||||
// Toggles the microphone on and off.
|
||||
async toggleAudio() {
|
||||
const isMicrophoneEnabled = this.participantService.isMyMicrophoneEnabled();
|
||||
await this.participantService.setMicrophoneEnabled(!isMicrophoneEnabled);
|
||||
}
|
||||
|
||||
/**
|
||||
* --------------------------------------------
|
||||
* GETTING A TOKEN FROM YOUR APPLICATION SERVER
|
||||
* --------------------------------------------
|
||||
* The methods below request the creation of a Session and a Token to
|
||||
* your application server. This keeps your OpenVidu deployment secure.
|
||||
*
|
||||
* In this sample code, there is no user control at all. Anybody could
|
||||
* access your application server endpoints! In a real production
|
||||
* environment, your application server must identify the user to allow
|
||||
* access to the endpoints.
|
||||
*
|
||||
* Visit https://docs.openvidu.io/en/stable/application-server to learn
|
||||
* more about the integration of OpenVidu in your application server.
|
||||
*/
|
||||
|
||||
async getToken(): Promise<string> {
|
||||
const sessionId = await this.createSession(this.sessionId);
|
||||
return await this.createToken(sessionId);
|
||||
}
|
||||
|
||||
createSession(sessionId: string): Promise<string> {
|
||||
return lastValueFrom(this.httpClient.post(
|
||||
this.APPLICATION_SERVER_URL + 'api/sessions',
|
||||
{ customSessionId: sessionId },
|
||||
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
|
||||
));
|
||||
}
|
||||
|
||||
createToken(sessionId: string): Promise<string> {
|
||||
return lastValueFrom(this.httpClient.post(
|
||||
this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections',
|
||||
{},
|
||||
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
|
||||
));
|
||||
// Gets a token for a participant.
|
||||
getToken(roomName: string, participantName: string): Promise<any> {
|
||||
try {
|
||||
return lastValueFrom(this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'api/sessions', { roomName, participantName }));
|
||||
} catch (error: any) {
|
||||
if (error.status === 404) {
|
||||
throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' };
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -7,20 +7,8 @@ import {
|
||||
platformBrowserDynamicTesting
|
||||
} from '@angular/platform-browser-dynamic/testing';
|
||||
|
||||
declare const require: {
|
||||
context(path: string, deep?: boolean, filter?: RegExp): {
|
||||
<T>(id: string): T;
|
||||
keys(): string[];
|
||||
};
|
||||
};
|
||||
|
||||
// First, initialize the Angular testing environment.
|
||||
getTestBed().initTestEnvironment(
|
||||
BrowserDynamicTestingModule,
|
||||
platformBrowserDynamicTesting(),
|
||||
);
|
||||
|
||||
// Then we find all the tests.
|
||||
const context = require.context('./', true, /\.spec\.ts$/);
|
||||
// And load the modules.
|
||||
context.keys().map(context);
|
||||
|
||||
@ -16,12 +16,13 @@
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "es2020",
|
||||
"target": "ES2022",
|
||||
"module": "es2020",
|
||||
"lib": [
|
||||
"es2020",
|
||||
"dom"
|
||||
]
|
||||
],
|
||||
"useDefineForClassFields": false
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
|
||||
# For additional information regarding the format and rule options, please see:
|
||||
# https://github.com/browserslist/browserslist#queries
|
||||
|
||||
# For the full list of supported browsers by the Angular framework, please see:
|
||||
# https://angular.io/guide/browser-support
|
||||
|
||||
# You can see what browsers were selected by your queries by running:
|
||||
# npx browserslist
|
||||
|
||||
last 1 Chrome version
|
||||
last 1 Firefox version
|
||||
last 2 Edge major versions
|
||||
last 2 Safari major versions
|
||||
last 2 iOS major versions
|
||||
Firefox ESR
|
||||
@ -108,5 +108,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": false
|
||||
}
|
||||
}
|
||||
|
||||
@ -1 +0,0 @@
|
||||
docker/
|
||||
@ -1,3 +0,0 @@
|
||||
SERVER_PORT=5000
|
||||
OPENVIDU_URL=http://localhost:4443/
|
||||
OPENVIDU_SECRET=MY_SECRET
|
||||
@ -1,129 +0,0 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
lerna-debug.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
*.lcov
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# Snowpack dependency directory (https://snowpack.dev/)
|
||||
web_modules/
|
||||
|
||||
# TypeScript cache
|
||||
*.tsbuildinfo
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional stylelint cache
|
||||
.stylelintcache
|
||||
|
||||
# Microbundle cache
|
||||
.rpt2_cache/
|
||||
.rts2_cache_cjs/
|
||||
.rts2_cache_es/
|
||||
.rts2_cache_umd/
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variable files
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
.env.local
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
.parcel-cache
|
||||
|
||||
# Next.js build output
|
||||
.next
|
||||
out
|
||||
|
||||
# Nuxt.js build / generate output
|
||||
.nuxt
|
||||
dist
|
||||
|
||||
# Gatsby files
|
||||
.cache/
|
||||
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||
# public
|
||||
|
||||
# vuepress build output
|
||||
.vuepress/dist
|
||||
|
||||
# vuepress v2.x temp and cache directory
|
||||
.temp
|
||||
.cache
|
||||
|
||||
# Docusaurus cache and generated files
|
||||
.docusaurus
|
||||
|
||||
# Serverless directories
|
||||
.serverless/
|
||||
|
||||
# FuseBox cache
|
||||
.fusebox/
|
||||
|
||||
# DynamoDB Local files
|
||||
.dynamodb/
|
||||
|
||||
# TernJS port file
|
||||
.tern-port
|
||||
|
||||
# Stores VSCode versions used for testing VSCode extensions
|
||||
.vscode-test
|
||||
|
||||
# yarn v2
|
||||
.yarn/cache
|
||||
.yarn/unplugged
|
||||
.yarn/build-state.yml
|
||||
.yarn/install-state.gz
|
||||
.pnp.*
|
||||
@ -1,30 +0,0 @@
|
||||
# openvidu-basic-node
|
||||
|
||||
This is a minimal OpenVidu server application sample built for Node with Express. Visit [Application server](https://docs.openvidu.io/en/stable/application-server/) documentation for further context.
|
||||
|
||||
It internally uses [openvidu-node-client SDK](https://docs.openvidu.io/en/stable/reference-docs/openvidu-node-client/).
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- [Node](https://nodejs.org/es/download/)
|
||||
|
||||
## Run
|
||||
|
||||
Download repository
|
||||
|
||||
```
|
||||
git clone git@github.com:OpenVidu/openvidu-tutorials.git
|
||||
cd openvidu-tutorials/openvidu-basic-node
|
||||
```
|
||||
|
||||
Install dependencies
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
Run the application
|
||||
|
||||
```
|
||||
node index.js
|
||||
```
|
||||
@ -1,11 +0,0 @@
|
||||
FROM node:16-alpine3.16
|
||||
|
||||
# Copy openvidu-basic-node
|
||||
COPY . /opt/openvidu-basic-node
|
||||
|
||||
# Install openvidu-basic-node dependencies
|
||||
RUN npm --prefix /opt/openvidu-basic-node install
|
||||
|
||||
WORKDIR /opt/openvidu-basic-node
|
||||
|
||||
ENTRYPOINT [ "node", "index.js" ]
|
||||
@ -1,9 +0,0 @@
|
||||
#!/bin/bash
|
||||
if [ $# -eq 0 ]; then
|
||||
echo "No version argument provided. Usage: \"./create_image.sh X.Y.Z\""
|
||||
exit 1
|
||||
fi
|
||||
|
||||
pushd ../
|
||||
|
||||
docker build --pull --no-cache --rm=true -f docker/Dockerfile -t "$1" .
|
||||
@ -1,57 +0,0 @@
|
||||
require("dotenv").config(!!process.env.CONFIG ? {path: process.env.CONFIG} : {});
|
||||
var express = require("express");
|
||||
var bodyParser = require("body-parser");
|
||||
var http = require("http");
|
||||
var OpenVidu = require("openvidu-node-client").OpenVidu;
|
||||
var cors = require("cors");
|
||||
var app = express();
|
||||
|
||||
// Environment variable: PORT where the node server is listening
|
||||
var SERVER_PORT = process.env.SERVER_PORT || 5000;
|
||||
// Environment variable: URL where our OpenVidu server is listening
|
||||
var OPENVIDU_URL = process.env.OPENVIDU_URL || 'http://localhost:4443';
|
||||
// Environment variable: secret shared with our OpenVidu server
|
||||
var OPENVIDU_SECRET = process.env.OPENVIDU_SECRET || 'MY_SECRET';
|
||||
|
||||
// Enable CORS support
|
||||
app.use(
|
||||
cors({
|
||||
origin: "*",
|
||||
})
|
||||
);
|
||||
|
||||
var server = http.createServer(app);
|
||||
var openvidu = new OpenVidu(OPENVIDU_URL, OPENVIDU_SECRET);
|
||||
|
||||
// Allow application/x-www-form-urlencoded
|
||||
app.use(bodyParser.urlencoded({ extended: true }));
|
||||
// Allow application/json
|
||||
app.use(bodyParser.json());
|
||||
|
||||
// Serve static resources if available
|
||||
app.use(express.static(__dirname + '/public'));
|
||||
|
||||
// Serve application
|
||||
server.listen(SERVER_PORT, () => {
|
||||
console.log("Application started on port: ", SERVER_PORT);
|
||||
console.warn('Application server connecting to OpenVidu at ' + OPENVIDU_URL);
|
||||
});
|
||||
|
||||
app.post("/api/sessions", async (req, res) => {
|
||||
var session = await openvidu.createSession(req.body);
|
||||
res.send(session.sessionId);
|
||||
});
|
||||
|
||||
app.post("/api/sessions/:sessionId/connections", async (req, res) => {
|
||||
var session = openvidu.activeSessions.find(
|
||||
(s) => s.sessionId === req.params.sessionId
|
||||
);
|
||||
if (!session) {
|
||||
res.status(404).send();
|
||||
} else {
|
||||
var connection = await session.createConnection(req.body);
|
||||
res.send(connection.token);
|
||||
}
|
||||
});
|
||||
|
||||
process.on('uncaughtException', err => console.error(err));
|
||||
@ -1,12 +0,0 @@
|
||||
{
|
||||
"name": "openvidu-basic-node",
|
||||
"version": "2.25.0",
|
||||
"main": "index.js",
|
||||
"dependencies": {
|
||||
"body-parser": "1.20.0",
|
||||
"cors": "2.8.5",
|
||||
"dotenv": "16.0.1",
|
||||
"express": "4.18.1",
|
||||
"openvidu-node-client": "2.27.0"
|
||||
}
|
||||
}
|
||||
7408
openvidu-components/openvidu-custom-ui/package-lock.json
generated
7408
openvidu-components/openvidu-custom-ui/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -10,25 +10,25 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^14.2.11",
|
||||
"@angular/cdk": "^14.2.7",
|
||||
"@angular/common": "^14.2.11",
|
||||
"@angular/compiler": "^14.2.11",
|
||||
"@angular/core": "^14.2.11",
|
||||
"@angular/forms": "^14.2.11",
|
||||
"@angular/material": "^14.2.7",
|
||||
"@angular/platform-browser": "^14.2.11",
|
||||
"@angular/platform-browser-dynamic": "^14.2.11",
|
||||
"@angular/router": "^14.2.11",
|
||||
"openvidu-angular": "2.27.0",
|
||||
"@angular/animations": "^15.2.9",
|
||||
"@angular/cdk": "^15.2.9",
|
||||
"@angular/common": "^15.2.9",
|
||||
"@angular/compiler": "^15.2.9",
|
||||
"@angular/core": "^15.2.9",
|
||||
"@angular/forms": "^15.2.9",
|
||||
"@angular/material": "^15.2.9",
|
||||
"@angular/platform-browser": "^15.2.9",
|
||||
"@angular/platform-browser-dynamic": "^15.2.9",
|
||||
"@angular/router": "^15.2.9",
|
||||
"openvidu-angular": "file:../openvidu-angular-3.0.0-dev.tgz",
|
||||
"rxjs": "~7.5.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^14.2.10",
|
||||
"@angular/cli": "^14.2.10",
|
||||
"@angular/compiler-cli": "^14.2.11",
|
||||
"@angular-devkit/build-angular": "^15.2.9",
|
||||
"@angular/cli": "^15.2.9",
|
||||
"@angular/compiler-cli": "^15.2.9",
|
||||
"@types/jasmine": "~3.10.0",
|
||||
"@types/node": "^12.11.1",
|
||||
"jasmine-core": "~4.0.0",
|
||||
@ -37,6 +37,6 @@
|
||||
"karma-coverage": "~2.1.0",
|
||||
"karma-jasmine": "~4.0.0",
|
||||
"karma-jasmine-html-reporter": "~1.7.0",
|
||||
"typescript": "~4.6.2"
|
||||
"typescript": "4.8.4"
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,64 +2,42 @@ import { HttpClient } from "@angular/common/http";
|
||||
import { Component } from "@angular/core";
|
||||
import { lastValueFrom } from "rxjs";
|
||||
|
||||
import { TokenModel } from "openvidu-angular";
|
||||
import { environment } from 'src/environments/environment';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
template: '<ov-videoconference [tokens]="tokens"></ov-videoconference>',
|
||||
template: '<ov-videoconference [token]="token" (onTokenRequested)="onTokenRequested($event)"></ov-videoconference>',
|
||||
styles: ['']
|
||||
})
|
||||
export class AppComponent {
|
||||
|
||||
// The URL of the application server.
|
||||
APPLICATION_SERVER_URL = environment.applicationServerUrl;
|
||||
|
||||
sessionId = 'openvidu-custom-ui';
|
||||
tokens!: TokenModel;
|
||||
// The name of the room to join.
|
||||
roomName = 'openvidu-custom-ui';
|
||||
|
||||
// The token used to join the room.
|
||||
token!: string;
|
||||
|
||||
// Creates a new instance of the AppComponent class.
|
||||
constructor(private httpClient: HttpClient) { }
|
||||
|
||||
async ngOnInit() {
|
||||
this.tokens = {
|
||||
webcam: await this.getToken(),
|
||||
screen: await this.getToken(),
|
||||
};
|
||||
// Requests a token to join the room with the given participant name.
|
||||
async onTokenRequested(participantName: string) {
|
||||
const { token } = await this.getToken(this.roomName, participantName);
|
||||
this.token = token;
|
||||
}
|
||||
|
||||
/**
|
||||
* --------------------------------------------
|
||||
* GETTING A TOKEN FROM YOUR APPLICATION SERVER
|
||||
* --------------------------------------------
|
||||
* The methods below request the creation of a Session and a Token to
|
||||
* your application server. This keeps your OpenVidu deployment secure.
|
||||
*
|
||||
* In this sample code, there is no user control at all. Anybody could
|
||||
* access your application server endpoints! In a real production
|
||||
* environment, your application server must identify the user to allow
|
||||
* access to the endpoints.
|
||||
*
|
||||
* Visit https://docs.openvidu.io/en/stable/application-server to learn
|
||||
* more about the integration of OpenVidu in your application server.
|
||||
*/
|
||||
|
||||
async getToken(): Promise<string> {
|
||||
const sessionId = await this.createSession(this.sessionId);
|
||||
return await this.createToken(sessionId);
|
||||
}
|
||||
|
||||
createSession(sessionId: string): Promise<string> {
|
||||
return lastValueFrom(this.httpClient.post(
|
||||
this.APPLICATION_SERVER_URL + 'api/sessions',
|
||||
{ customSessionId: sessionId },
|
||||
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
|
||||
));
|
||||
}
|
||||
|
||||
createToken(sessionId: string): Promise<string> {
|
||||
return lastValueFrom(this.httpClient.post(
|
||||
this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections',
|
||||
{},
|
||||
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
|
||||
));
|
||||
// Retrieves a token to join the room with the given name and participant name.
|
||||
getToken(roomName: string, participantName: string): Promise<any> {
|
||||
try {
|
||||
return lastValueFrom(this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'api/sessions', { roomName, participantName }));
|
||||
} catch (error: any) {
|
||||
if (error.status === 404) {
|
||||
throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' };
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -7,20 +7,8 @@ import {
|
||||
platformBrowserDynamicTesting
|
||||
} from '@angular/platform-browser-dynamic/testing';
|
||||
|
||||
declare const require: {
|
||||
context(path: string, deep?: boolean, filter?: RegExp): {
|
||||
<T>(id: string): T;
|
||||
keys(): string[];
|
||||
};
|
||||
};
|
||||
|
||||
// First, initialize the Angular testing environment.
|
||||
getTestBed().initTestEnvironment(
|
||||
BrowserDynamicTestingModule,
|
||||
platformBrowserDynamicTesting(),
|
||||
);
|
||||
|
||||
// Then we find all the tests.
|
||||
const context = require.context('./', true, /\.spec\.ts$/);
|
||||
// And load the modules.
|
||||
context.keys().map(context);
|
||||
|
||||
@ -16,12 +16,13 @@
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "es2020",
|
||||
"target": "ES2022",
|
||||
"module": "es2020",
|
||||
"lib": [
|
||||
"es2020",
|
||||
"dom"
|
||||
]
|
||||
],
|
||||
"useDefineForClassFields": false
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
|
||||
@ -134,5 +134,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": false
|
||||
}
|
||||
}
|
||||
|
||||
7624
openvidu-components/openvidu-toggle-hand/package-lock.json
generated
7624
openvidu-components/openvidu-toggle-hand/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -9,25 +9,25 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "14.2.11",
|
||||
"@angular/cdk": "14.2.7",
|
||||
"@angular/common": "14.2.11",
|
||||
"@angular/compiler": "14.2.11",
|
||||
"@angular/core": "14.2.11",
|
||||
"@angular/forms": "14.2.11",
|
||||
"@angular/material": "14.2.7",
|
||||
"@angular/platform-browser": "14.2.11",
|
||||
"@angular/platform-browser-dynamic": "14.2.11",
|
||||
"@angular/router": "14.2.11",
|
||||
"openvidu-angular": "2.27.0",
|
||||
"@angular/animations": "15.2.9",
|
||||
"@angular/cdk": "15.2.9",
|
||||
"@angular/common": "15.2.9",
|
||||
"@angular/compiler": "15.2.9",
|
||||
"@angular/core": "15.2.9",
|
||||
"@angular/forms": "15.2.9",
|
||||
"@angular/material": "15.2.9",
|
||||
"@angular/platform-browser": "15.2.9",
|
||||
"@angular/platform-browser-dynamic": "15.2.9",
|
||||
"@angular/router": "15.2.9",
|
||||
"openvidu-angular": "file:../openvidu-angular-3.0.0-dev.tgz",
|
||||
"rxjs": "7.5.2",
|
||||
"tslib": "2.0.0",
|
||||
"zone.js": "0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "14.2.10",
|
||||
"@angular/cli": "14.2.10",
|
||||
"@angular/compiler-cli": "14.2.11",
|
||||
"@angular-devkit/build-angular": "15.2.9",
|
||||
"@angular/cli": "15.2.9",
|
||||
"@angular/compiler-cli": "15.2.9",
|
||||
"@types/node": "^12.11.1",
|
||||
"codelyzer": "^6.0.0",
|
||||
"ts-node": "~8.3.0",
|
||||
|
||||
@ -3,14 +3,9 @@
|
||||
}
|
||||
|
||||
#hand-notification {
|
||||
background-color: var(--ov-tertiary-color);
|
||||
color: var(--ov-light-color);
|
||||
line-height: 0px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-bottom: 5px;
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
bottom: 0px;
|
||||
right: 10px;
|
||||
bottom: 3px;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<ov-videoconference (onSessionCreated)="onSessionCreated($event)" [tokens]="tokens" [prejoin]="true">
|
||||
<ov-videoconference (onRoomCreated)="handleRemoteHand($event)" [prejoin]="true" [token]="token" (onTokenRequested)="onTokenRequested($event)">
|
||||
|
||||
<div *ovToolbarAdditionalButtons>
|
||||
<button toolbar-btn mat-icon-button (click)="handleLocalHand()" [class.active-btn]="hasHandRaised">
|
||||
@ -6,17 +6,13 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div *ovStream="let stream" style="height: 100%">
|
||||
<ov-stream [stream]="stream"></ov-stream>
|
||||
<button mat-icon-button @inOutHandAnimation id="hand-notification" *ngIf="stream.participant.hasHandRaised">
|
||||
<mat-icon>front_hand</mat-icon>
|
||||
</button>
|
||||
<div *ovStream="let track" style="height: 100%">
|
||||
<ov-stream [track]="track"></ov-stream>
|
||||
<mat-icon @inOutHandAnimation *ngIf="track.participant.hasHandRaised" id="hand-notification">front_hand</mat-icon>
|
||||
</div>
|
||||
|
||||
<div *ovParticipantPanelItemElements="let participant">
|
||||
<button mat-icon-button *ngIf="participant.hasHandRaised">
|
||||
<mat-icon>front_hand</mat-icon>
|
||||
</button>
|
||||
<mat-icon *ngIf="participant.hasHandRaised">front_hand</mat-icon>
|
||||
</div>
|
||||
|
||||
</ov-videoconference>
|
||||
@ -1,15 +1,14 @@
|
||||
import { animate, style, transition, trigger } from "@angular/animations";
|
||||
import { HttpClient } from "@angular/common/http";
|
||||
import { Component, OnInit } from "@angular/core";
|
||||
import { Component } from "@angular/core";
|
||||
import { lastValueFrom } from "rxjs";
|
||||
|
||||
import { OpenViduService, ParticipantService } from "openvidu-angular";
|
||||
import { DataPacket_Kind, DataPublishOptions, ParticipantService, RemoteParticipant, Room, RoomEvent } from "openvidu-angular";
|
||||
import { ParticipantAppModel } from "./models/participant-app.model";
|
||||
|
||||
import { Session, SignalOptions } from "openvidu-browser";
|
||||
import { environment } from 'src/environments/environment';
|
||||
|
||||
enum SignalApp {
|
||||
enum DataTopicApp {
|
||||
HAND_TOGGLE = 'handToggle'
|
||||
}
|
||||
|
||||
@ -30,41 +29,44 @@ enum SignalApp {
|
||||
])
|
||||
]
|
||||
})
|
||||
export class AppComponent implements OnInit {
|
||||
export class AppComponent {
|
||||
|
||||
// The URL of the application server.
|
||||
APPLICATION_SERVER_URL = environment.applicationServerUrl;
|
||||
|
||||
tokens: { webcam: string; screen: string };
|
||||
// The token used to connect to the OpenVidu session.
|
||||
token!: string;
|
||||
|
||||
// Whether the local participant has raised their hand.
|
||||
hasHandRaised: boolean = false;
|
||||
session: Session;
|
||||
private sessionId = 'openvidu-toggle-hand';
|
||||
|
||||
constructor(private httpClient: HttpClient, private openviduService: OpenViduService, private participantService: ParticipantService) { }
|
||||
async ngOnInit() {
|
||||
this.tokens = {
|
||||
webcam: await this.getToken(),
|
||||
screen: await this.getToken()
|
||||
};
|
||||
// The name of the OpenVidu room.
|
||||
private roomName = 'openvidu-toggle-hand';
|
||||
|
||||
constructor(private httpClient: HttpClient, private participantService: ParticipantService) { }
|
||||
|
||||
// Requests a token from the application server for the given participant name.
|
||||
async onTokenRequested(participantName: string) {
|
||||
const { token } = await this.getToken(this.roomName, participantName);
|
||||
this.token = token;
|
||||
}
|
||||
|
||||
onSessionCreated(session: Session) {
|
||||
this.session = session;
|
||||
this.handleRemoteHand();
|
||||
}
|
||||
|
||||
handleRemoteHand() {
|
||||
// Handles the reception of a remote hand-raising event.
|
||||
handleRemoteHand(room: Room) {
|
||||
// Subscribe to hand toggling events from other participants
|
||||
this.session.on(`signal:${SignalApp.HAND_TOGGLE}`, (event: any) => {
|
||||
const connectionId = event.from.connectionId;
|
||||
const participant = <ParticipantAppModel>this.participantService.getRemoteParticipantByConnectionId(connectionId);
|
||||
if (participant) {
|
||||
participant.toggleHandRaised();
|
||||
room.on(RoomEvent.DataReceived, (payload: Uint8Array, participant?: RemoteParticipant, _?: DataPacket_Kind, topic?: string) => {
|
||||
if (topic === DataTopicApp.HAND_TOGGLE) {
|
||||
const p = this.participantService.getRemoteParticipantBySid(participant.sid);
|
||||
if (p) {
|
||||
(<ParticipantAppModel>p).toggleHandRaised();
|
||||
}
|
||||
this.participantService.updateRemoteParticipants();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handleLocalHand() {
|
||||
// Handles the local hand-raising event.
|
||||
async handleLocalHand() {
|
||||
// Get local participant with ParticipantService
|
||||
const participant = <ParticipantAppModel>this.participantService.getLocalParticipant();
|
||||
|
||||
@ -75,51 +77,22 @@ export class AppComponent implements OnInit {
|
||||
this.participantService.updateLocalParticipant();
|
||||
|
||||
// Send a signal with the new value to others participant using the openvidu-browser signal
|
||||
const remoteConnections = this.openviduService.getRemoteConnections();
|
||||
if (remoteConnections.length > 0) {
|
||||
//Sending hand toggle signal to others
|
||||
const signalOptions: SignalOptions = {
|
||||
type: SignalApp.HAND_TOGGLE,
|
||||
to: remoteConnections
|
||||
};
|
||||
this.session.signal(signalOptions);
|
||||
const strData = JSON.stringify({});
|
||||
const data: Uint8Array = new TextEncoder().encode(strData);
|
||||
const options: DataPublishOptions = { topic: DataTopicApp.HAND_TOGGLE };
|
||||
|
||||
await this.participantService.publishData(data, options);
|
||||
}
|
||||
|
||||
// Requests a token from the application server for the given room and participant names.
|
||||
getToken(roomName: string, participantName: string): Promise<any> {
|
||||
try {
|
||||
return lastValueFrom(this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'api/sessions', { roomName, participantName }));
|
||||
} catch (error: any) {
|
||||
if (error.status === 404) {
|
||||
throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' };
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* --------------------------------------------
|
||||
* GETTING A TOKEN FROM YOUR APPLICATION SERVER
|
||||
* --------------------------------------------
|
||||
* The methods below request the creation of a Session and a Token to
|
||||
* your application server. This keeps your OpenVidu deployment secure.
|
||||
*
|
||||
* In this sample code, there is no user control at all. Anybody could
|
||||
* access your application server endpoints! In a real production
|
||||
* environment, your application server must identify the user to allow
|
||||
* access to the endpoints.
|
||||
*
|
||||
* Visit https://docs.openvidu.io/en/stable/application-server to learn
|
||||
* more about the integration of OpenVidu in your application server.
|
||||
*/
|
||||
|
||||
async getToken(): Promise<string> {
|
||||
const sessionId = await this.createSession(this.sessionId);
|
||||
return await this.createToken(sessionId);
|
||||
}
|
||||
|
||||
createSession(sessionId: string): Promise<string> {
|
||||
return lastValueFrom(this.httpClient.post(
|
||||
this.APPLICATION_SERVER_URL + 'api/sessions',
|
||||
{ customSessionId: sessionId },
|
||||
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
|
||||
));
|
||||
}
|
||||
|
||||
createToken(sessionId: string): Promise<string> {
|
||||
return lastValueFrom(this.httpClient.post(
|
||||
this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections',
|
||||
{},
|
||||
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
|
||||
));
|
||||
}
|
||||
}
|
||||
@ -6,13 +6,13 @@ import { MatIconModule } from '@angular/material/icon';
|
||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
import { OpenViduAngularConfig, OpenViduAngularModule, ParticipantProperties, StreamModel } from 'openvidu-angular';
|
||||
import { OpenViduAngularConfig, OpenViduAngularModule, ParticipantProperties } from 'openvidu-angular';
|
||||
import { environment } from 'src/environments/environment';
|
||||
import { ParticipantAppModel } from './models/participant-app.model';
|
||||
|
||||
const config: OpenViduAngularConfig = {
|
||||
production: environment.production,
|
||||
participantFactory: (props: ParticipantProperties, streamModel: StreamModel) => new ParticipantAppModel(props, streamModel)
|
||||
participantFactory: (props: ParticipantProperties) => new ParticipantAppModel(props)
|
||||
};
|
||||
|
||||
@NgModule({
|
||||
@ -21,4 +21,4 @@ const config: OpenViduAngularConfig = {
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule {}
|
||||
export class AppModule { }
|
||||
|
||||
@ -1,11 +1,19 @@
|
||||
import { ParticipantAbstractModel } from 'openvidu-angular';
|
||||
import { ParticipantModel, ParticipantProperties } from 'openvidu-angular';
|
||||
|
||||
export class ParticipantAppModel extends ParticipantAbstractModel {
|
||||
// Represents a participant in the application, with the ability to raise their hand.
|
||||
export class ParticipantAppModel extends ParticipantModel {
|
||||
|
||||
// Indicates whether the participant has raised their hand.
|
||||
hasHandRaised: boolean;
|
||||
|
||||
// Creates a new instance of ParticipantAppModel.
|
||||
constructor(props: ParticipantProperties) {
|
||||
super(props);
|
||||
this.hasHandRaised = false;
|
||||
}
|
||||
|
||||
// Toggles the participant's hand raised status.
|
||||
toggleHandRaised() {
|
||||
this.hasHandRaised = !this.hasHandRaised;
|
||||
}
|
||||
|
||||
}
|
||||
@ -2,13 +2,9 @@
|
||||
// Custom Theming for Angular Material
|
||||
// For more information: https://material.angular.io/guide/theming
|
||||
@use '@angular/material' as mat;
|
||||
@import '~@angular/material/theming';
|
||||
@import '@angular/material/theming';
|
||||
|
||||
// Plus imports for other components in your app.
|
||||
|
||||
// Include the common styles for Angular Material. We include this here so that you only
|
||||
// have to load a single css file for Angular Material in your app.
|
||||
// Be sure that you only ever include this mixin once!
|
||||
@include mat.all-component-typographies();
|
||||
@include mat.core();
|
||||
|
||||
// Define the palettes for your theme using the Material Design palettes available in palette.scss
|
||||
|
||||
@ -7,19 +7,8 @@ import {
|
||||
platformBrowserDynamicTesting
|
||||
} from '@angular/platform-browser-dynamic/testing';
|
||||
|
||||
declare const require: {
|
||||
context(path: string, deep?: boolean, filter?: RegExp): {
|
||||
keys(): string[];
|
||||
<T>(id: string): T;
|
||||
};
|
||||
};
|
||||
|
||||
// First, initialize the Angular testing environment.
|
||||
getTestBed().initTestEnvironment(
|
||||
BrowserDynamicTestingModule,
|
||||
platformBrowserDynamicTesting()
|
||||
);
|
||||
// Then we find all the tests.
|
||||
const context = require.context('./', true, /\.spec\.ts$/);
|
||||
// And load the modules.
|
||||
context.keys().map(context);
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "es2015",
|
||||
"target": "ES2022",
|
||||
"module": "es2020",
|
||||
"lib": [
|
||||
"es2018",
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user