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

openvidu-components: Added participant created event and e2e test

pull/707/head
csantosm 2022-03-16 16:34:55 +01:00
parent 16f211751b
commit 55d9abe2b8
4 changed files with 66 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts
View File

@ -10,7 +10,7 @@ import {
TemplateRef, TemplateRef,
ViewChild ViewChild
} from '@angular/core'; } from '@angular/core';
import { OpenViduErrorName } from 'openvidu-browser'; import { OpenViduErrorName, Session } from 'openvidu-browser';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
import { import {
ChatPanelDirective, ChatPanelDirective,
@ -102,13 +102,13 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
@Output() onToolbarChatPanelButtonClicked = new EventEmitter<any>(); @Output() onToolbarChatPanelButtonClicked = new EventEmitter<any>();
// Event sent when participant has joined the session // Event sent when participant has joined the session
@Output() onParticipantJoined = new EventEmitter<any>(); // @Output() onParticipantJoined = new EventEmitter<any>();
// Event sent when participant has left the session
// @Output() onParticipantLeft = new EventEmitter<any>();
// Event sent when session has been created // Event sent when session has been created
@Output() onSessionCreated = new EventEmitter<any>(); @Output() onSessionCreated = new EventEmitter<any>();
// Event sent when participant has been created
@Output() onParticipantCreated = new EventEmitter<any>();
joinSessionClicked: boolean = false; joinSessionClicked: boolean = false;
participantReady: boolean = false; participantReady: boolean = false;
@ -148,6 +148,8 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
if (this.deviceSrv.hasVideoDeviceAvailable() || this.deviceSrv.hasAudioDeviceAvailable()) { if (this.deviceSrv.hasVideoDeviceAvailable() || this.deviceSrv.hasAudioDeviceAvailable()) {
await this.initwebcamPublisher(); await this.initwebcamPublisher();
} }
this.onParticipantCreated.emit(this.participantService.getLocalParticipant());
} }
private async initwebcamPublisher() { private async initwebcamPublisher() {
@ -265,7 +267,7 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
onChatPanelButtonClicked() { onChatPanelButtonClicked() {
this.onToolbarChatPanelButtonClicked.emit(); this.onToolbarChatPanelButtonClicked.emit();
} }
_onSessionCreated(event: any) { _onSessionCreated(event: Session) {
this.onSessionCreated.emit(event); this.onSessionCreated.emit(event);
} }

19
openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.ts
View File

@ -1,6 +1,7 @@
import { Component, ElementRef, Input, OnInit, Output, EventEmitter } from '@angular/core'; import { Component, ElementRef, Input, OnInit, Output, EventEmitter } from '@angular/core';
import { ILogger, LoggerService, OpenViduService } from 'openvidu-angular'; import { ILogger, LoggerService, OpenViduService } from 'openvidu-angular';
import { Session } from 'openvidu-browser'; import { Session } from 'openvidu-browser';
import { ParticipantAbstractModel } from '../../../projects/openvidu-angular/src/lib/models/participant.model';
export interface TokenModel { export interface TokenModel {
webcam: string; webcam: string;
@ -37,6 +38,7 @@ export interface TokenModel {
(onToolbarChatPanelButtonClicked)="_onToolbarChatPanelButtonClicked()" (onToolbarChatPanelButtonClicked)="_onToolbarChatPanelButtonClicked()"
(onToolbarFullscreenButtonClicked)="_onToolbarFullscreenButtonClicked()" (onToolbarFullscreenButtonClicked)="_onToolbarFullscreenButtonClicked()"
(onSessionCreated)="_onSessionCreated($event)" (onSessionCreated)="_onSessionCreated($event)"
(onParticipantCreated)="_onParticipantCreated($event)"
></ov-videoconference> ></ov-videoconference>
` `
}) })
@ -113,15 +115,14 @@ export class OpenviduWebComponentComponent implements OnInit {
@Output() onToolbarLeaveButtonClicked = new EventEmitter<any>(); @Output() onToolbarLeaveButtonClicked = new EventEmitter<any>();
@Output() onToolbarCameraButtonClicked = new EventEmitter<any>(); @Output() onToolbarCameraButtonClicked = new EventEmitter<any>();
@Output() onToolbarMicrophoneButtonClicked = new EventEmitter<any>(); @Output() onToolbarMicrophoneButtonClicked = new EventEmitter<any>();
@Output() onSessionCreated = new EventEmitter<any>();
@Output() onToolbarScreenshareButtonClicked = new EventEmitter<any>(); @Output() onToolbarScreenshareButtonClicked = new EventEmitter<any>();
@Output() onToolbarParticipantsPanelButtonClicked = new EventEmitter<any>(); @Output() onToolbarParticipantsPanelButtonClicked = new EventEmitter<any>();
@Output() onToolbarChatPanelButtonClicked = new EventEmitter<any>(); @Output() onToolbarChatPanelButtonClicked = new EventEmitter<any>();
@Output() onToolbarFullscreenButtonClicked = new EventEmitter<any>(); @Output() onToolbarFullscreenButtonClicked = new EventEmitter<any>();
@Output() onSessionCreated = new EventEmitter<any>();
@Output() onParticipantCreated = new EventEmitter<any>();
success: boolean = false; success: boolean = false;
// _sessionConfig: SessionConfig;
private log: ILogger; private log: ILogger;
constructor(private loggerService: LoggerService, private host: ElementRef, private openviduService: OpenViduService) { constructor(private loggerService: LoggerService, private host: ElementRef, private openviduService: OpenViduService) {
@ -177,18 +178,14 @@ export class OpenviduWebComponentComponent implements OnInit {
this.onSessionCreated.emit(event); this.onSessionCreated.emit(event);
} }
_onParticipantCreated(event: ParticipantAbstractModel) {
this.onParticipantCreated.emit(event);
}
leaveSession() { leaveSession() {
this.openviduService.disconnect(); this.openviduService.disconnect();
} }
// private isCorrectParams(config: SessionConfig): boolean {
// return !!config.tokens?.webcam && !!config.tokens?.screen /*&& !!config.participantName && !!config.sessionName*/;
// }
// private isEmpty(config: SessionConfig): boolean {
// return Object.keys(config).length === 0;
// }
private castToBoolean(value: string | boolean): boolean { private castToBoolean(value: string | boolean): boolean {
if (typeof value === 'boolean') { if (typeof value === 'boolean') {
return value; return value;

172
openvidu-components-angular/webcomponent-test-e2e/test.ts
View File

@ -1,17 +1,10 @@
// require('chromedriver'); import { Builder, By, Capabilities, until, WebDriver, logging } from 'selenium-webdriver';
// const assert = require('assert'); import * as chrome from 'selenium-webdriver/chrome';
// const webdriver = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');
// const firefox = require('selenium-webdriver/firefox');
// const { Builder, By, Key, promise, until } = require('selenium-webdriver');
import { Builder, By, Capabilities, until, WebDriver, logging, Key } from 'selenium-webdriver';
import { expect } from 'chai'; import { expect } from 'chai';
const url = 'http://127.0.0.1:8080/'; const url = 'http://127.0.0.1:8080/';
const FIVE_SECONDS = 5000; const FIVE_SECONDS = 5000;
const ONE_SECONDS = 5000; const ONE_SECONDS = 5000;
const sleepTimeout = 500;
describe('Checkout localhost app', () => { describe('Checkout localhost app', () => {
let browser: WebDriver; let browser: WebDriver;
@ -555,135 +548,40 @@ describe('Checkout localhost app', () => {
// * PUBLISHER EVENTS // * PUBLISHER EVENTS
// it('should receive publisherCreated event', async () => { it('should receive onParticipantCreated event from LOCAL participant', async () => {
// try { const participantName = 'TEST_USER';
// await browser.wait(until.elementLocated(By.id('publisherCreated')), FIVE_SECONDS); let element;
// await browser.wait(until.elementLocated(By.id('navLeaveButton')), FIVE_SECONDS).click(); await browser.get(`${url}?participantName=${participantName}`);
// } catch (error) { element = await browser.wait(until.elementLocated(By.id(`${participantName}-onParticipantCreated`)), FIVE_SECONDS);
// console.log(error); expect(await element.isDisplayed()).to.be.true;
// } finally { });
// await browser.quit();
// }
// });
// it('should receive Publisher streamCreated event', async function () {
// try {
// // await browser.get(url);
// await browser.wait(until.elementLocated(By.id('publisherCreated')), FIVE_SECONDS);
// await browser.wait(until.elementLocated(By.id('publisher-streamCreated')), FIVE_SECONDS);
// await browser.wait(until.elementLocated(By.id('navLeaveButton')), FIVE_SECONDS).click();
// } catch (error) {
// console.log(error);
// } finally {
// await browser.quit();
// }
// });
// it('should receive Publisher streamPlaying event', async function () {
// try {
// // await browser.get(url);
// await browser.wait(until.elementLocated(By.id('publisherCreated')), FIVE_SECONDS);
// await browser.wait(until.elementLocated(By.id('publisher-streamPlaying')), FIVE_SECONDS);
// await browser.wait(until.elementLocated(By.id('navLeaveButton')), FIVE_SECONDS).click();
// } catch (error) {
// console.log(error);
// } finally {
// await browser.quit();
// }
// });
// * SESSION EVENTS // * SESSION EVENTS
// it('should receive REMOTE connectionCreated event', async () => { it('should receive connectionCreated event from LOCAL participant', async () => {
// try { const participantName = 'TEST_USER';
// // await browser.get(url); let element;
// await browser.wait(until.elementLocated(By.id('publisherCreated')), FIVE_SECONDS); await browser.get(`${url}?prejoin=false&participantName=${participantName}`);
element = await browser.wait(until.elementLocated(By.id(`${participantName}-connectionCreated`)), FIVE_SECONDS);
// browser2 = await createFirefoxBrowser(); expect(await element.isDisplayed()).to.be.true;
// await browser2.get(url); });
// await browser2.wait(until.elementLocated(By.id('publisherCreated')), FIVE_SECONDS);
// await browser2.sleep(sleepTimeout); it('should receive sessionDisconnected event from LOCAL participant', async () => {
// var user2 = await (await browser2.wait(until.elementLocated(By.id('nickname')), FIVE_SECONDS)).getText(); const participantName = 'TEST_USER';
// await browser.wait(until.elementLocated(By.id(user2 + '-connectionCreated')), FIVE_SECONDS); let element;
// await browser.wait(until.elementLocated(By.id('navLeaveButton')), FIVE_SECONDS).click(); await browser.get(`${url}?prejoin=false&participantName=${participantName}`);
// await browser2.wait(until.elementLocated(By.id('navLeaveButton')), FIVE_SECONDS).click(); element = await browser.wait(until.elementLocated(By.id('session-container')), FIVE_SECONDS);
// } catch (error) { expect(await element.isDisplayed()).to.be.true;
// console.log(error);
// } finally { // Checking if toolbar is present
// await browser.quit(); element = await browser.wait(until.elementLocated(By.id('media-buttons-container')), FIVE_SECONDS);
// await browser2.quit(); expect(await element.isDisplayed()).to.be.true;
// }
// }); // Checking if leave button is not present
element = await browser.wait(until.elementLocated(By.id('leave-btn')), FIVE_SECONDS);
// it('should receive REMOTE streamDestroyed event', async function () { await element.click();
// try {
// // await browser.get(url); element = await browser.wait(until.elementLocated(By.id(`${participantName}-sessionDisconnected`)), FIVE_SECONDS);
// await browser.wait(until.elementLocated(By.id('publisherCreated')), FIVE_SECONDS); expect(await element.isDisplayed()).to.be.true;
});
// browser2 = await createFirefoxBrowser();
// await browser2.get(url);
// await browser2.wait(until.elementLocated(By.id('publisherCreated')), FIVE_SECONDS);
// await browser2.wait(until.elementLocated(By.id('publisher-streamPlaying')), FIVE_SECONDS);
// await browser2.sleep(sleepTimeout);
// var user2 = await (await browser2.wait(until.elementLocated(By.id('nickname')), FIVE_SECONDS)).getText();
// await browser2.wait(until.elementLocated(By.id('navLeaveButton')), FIVE_SECONDS).click();
// await browser.wait(until.elementLocated(By.id(user2 + '-streamDestroyed')), FIVE_SECONDS);
// await browser.wait(until.elementLocated(By.id('navLeaveButton')), FIVE_SECONDS).click();
// } catch (error) {
// console.log(error);
// } finally {
// await browser.quit();
// await browser2.quit();
// }
// });
// it('should receive Session sessionDisconnected event', async function () {
// try {
// // await browser.get(url);
// await browser.wait(until.elementLocated(By.id('publisherCreated')), FIVE_SECONDS);
// await browser.wait(until.elementLocated(By.id('publisher-streamPlaying')), FIVE_SECONDS);
// await browser.sleep(sleepTimeout);
// var user = await (await browser.wait(until.elementLocated(By.id('nickname')), FIVE_SECONDS)).getText();
// await browser.wait(until.elementLocated(By.id('navLeaveButton')), FIVE_SECONDS).click();
// await browser.wait(until.elementLocated(By.id(user + '-sessionDisconnected')), FIVE_SECONDS);
// } catch (error) {
// console.log(error);
// } finally {
// await browser.quit();
// }
// });
// it('should receive REMOTE streamCreated event', async function () {
// try {
// // await browser.get(url);
// await browser.wait(until.elementLocated(By.id('publisherCreated')), FIVE_SECONDS);
// browser2 = await createFirefoxBrowser();
// await browser2.get(url);
// await browser2.wait(until.elementLocated(By.id('publisherCreated')), FIVE_SECONDS);
// await browser2.wait(until.elementLocated(By.id('publisher-streamPlaying')), FIVE_SECONDS);
// await browser2.sleep(sleepTimeout);
// var user2 = await (await browser2.wait(until.elementLocated(By.id('nickname')), FIVE_SECONDS)).getText();
// await browser.wait(until.elementLocated(By.id(user2 + '-streamCreated')), FIVE_SECONDS);
// await browser2.wait(until.elementLocated(By.id('navLeaveButton')), FIVE_SECONDS).click();
// await browser.wait(until.elementLocated(By.id('navLeaveButton')), FIVE_SECONDS).click();
// } catch (error) {
// console.log(error);
// } finally {
// await browser.quit();
// await browser2.quit();
// }
// });
}); });

74
openvidu-components-angular/webcomponent-test-e2e/web/app.js
View File

@ -18,10 +18,13 @@ var PARTICIPANTS_PANEL_BUTTON;
var SESSION_NAME; var SESSION_NAME;
var PARTICIPANT_NAME;
$(document).ready(() => { $(document).ready(() => {
var url = new URL(window.location.href); var url = new URL(window.location.href);
MINIMAL = url.searchParams.get("minimal") === null ? false : url.searchParams.get("minimal") === 'true'; MINIMAL = url.searchParams.get("minimal") === null ? false : url.searchParams.get("minimal") === 'true';
PARTICIPANT_NAME = url.searchParams.get("participantName") || 'TEST_USER';
PREJOIN = url.searchParams.get("prejoin") === null ? true : url.searchParams.get("prejoin") === 'true'; PREJOIN = url.searchParams.get("prejoin") === null ? true : url.searchParams.get("prejoin") === 'true';
VIDEO_MUTED = url.searchParams.get("videoMuted") === null ? false : url.searchParams.get("videoMuted") === 'true'; VIDEO_MUTED = url.searchParams.get("videoMuted") === null ? false : url.searchParams.get("videoMuted") === 'true';
console.log("video muted", url.searchParams.get("videoMuted")); console.log("video muted", url.searchParams.get("videoMuted"));
@ -61,56 +64,28 @@ $(document).ready(() => {
// You can see the session documentation here // You can see the session documentation here
// https://docs.openvidu.io/en/stable/api/openvidu-browser/classes/session.html // https://docs.openvidu.io/en/stable/api/openvidu-browser/classes/session.html
// session.on('connectionCreated', (e) => { session.on('connectionCreated', (e) => {
// console.error("connectionCreated", e); var user = JSON.parse(e.connection.data).clientData;
// var user = JSON.parse(e.connection.data).clientData; appendElement(`${user}-connectionCreated`);
// appendElement(user + '-connectionCreated'); });
session.on('sessionDisconnected', (e) => {
var user = JSON.parse(e.target.connection.data).clientData;
appendElement(user + '-sessionDisconnected');
});
});
webComponent.addEventListener('onParticipantCreated', (event) => {
var participant = event.detail;
appendElement(`${participant.nickname}-onParticipantCreated`);
});
// webComponent.addEventListener('error', (event) => {
// console.log('Error event', event.detail);
// }); // });
// session.on('streamDestroyed', (e) => { joinSession(SESSION_NAME, PARTICIPANT_NAME);
// console.log("streamDestroyed", e);
// var user = JSON.parse(e.stream.connection.data).clientData;
// appendElement(user + '-streamDestroyed');
// });
// session.on('streamCreated', (e) => {
// console.log("streamCreated", e);
// var user = JSON.parse(e.stream.connection.data).clientData;
// appendElement(user + '-streamCreated');
// });
// session.on('sessionDisconnected', (e) => {
// console.warn("sessionDisconnected ", e);
// var user = JSON.parse(e.target.connection.data).clientData;
// appendElement(user + '-sessionDisconnected');
// });
});
webComponent.addEventListener('publisherCreated', (event) => {
var publisher = event.detail;
appendElement('publisherCreated')
// You can see the publisher documentation here
// https://docs.openvidu.io/en/stable/api/openvidu-browser/classes/publisher.html
publisher.on('streamCreated', (e) => {
console.warn("Publisher streamCreated", e);
appendElement('publisher-streamCreated');
});
publisher.on('streamPlaying', (e) => {
appendElement('publisher-streamPlaying');
});
});
webComponent.addEventListener('error', (event) => {
console.log('Error event', event.detail);
});
var user = 'user' + Math.floor(Math.random() * 100);
joinSession(SESSION_NAME, user);
}); });
@ -143,7 +118,8 @@ async function joinSession(sessionName, participantName) {
webComponent.streamSettingsButton = SETTINGS_BUTTON; webComponent.streamSettingsButton = SETTINGS_BUTTON;
webComponent.participantPanelItemMuteButton = PARTICIPANT_MUTE_BUTTON; webComponent.participantPanelItemMuteButton = PARTICIPANT_MUTE_BUTTON;
webComponent.sessionConfig = { sessionName, participantName, tokens }; webComponent.participantName = participantName;
webComponent.tokens = tokens;
} }
/** /**