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,
ViewChild
} from '@angular/core';
import { OpenViduErrorName } from 'openvidu-browser';
import { OpenViduErrorName, Session } from 'openvidu-browser';
import { Subscription } from 'rxjs';
import {
ChatPanelDirective,
@ -102,13 +102,13 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
@Output() onToolbarChatPanelButtonClicked = new EventEmitter<any>();
// Event sent when participant has joined the session
@Output() onParticipantJoined = new EventEmitter<any>();
// Event sent when participant has left the session
// @Output() onParticipantLeft = new EventEmitter<any>();
// @Output() onParticipantJoined = new EventEmitter<any>();
// Event sent when session has been created
@Output() onSessionCreated = new EventEmitter<any>();
// Event sent when participant has been created
@Output() onParticipantCreated = new EventEmitter<any>();
joinSessionClicked: boolean = false;
participantReady: boolean = false;
@ -148,6 +148,8 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
if (this.deviceSrv.hasVideoDeviceAvailable() || this.deviceSrv.hasAudioDeviceAvailable()) {
await this.initwebcamPublisher();
}
this.onParticipantCreated.emit(this.participantService.getLocalParticipant());
}
private async initwebcamPublisher() {
@ -265,7 +267,7 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
onChatPanelButtonClicked() {
this.onToolbarChatPanelButtonClicked.emit();
}
_onSessionCreated(event: any) {
_onSessionCreated(event: Session) {
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 { ILogger, LoggerService, OpenViduService } from 'openvidu-angular';
import { Session } from 'openvidu-browser';
import { ParticipantAbstractModel } from '../../../projects/openvidu-angular/src/lib/models/participant.model';
export interface TokenModel {
webcam: string;
@ -37,6 +38,7 @@ export interface TokenModel {
(onToolbarChatPanelButtonClicked)="_onToolbarChatPanelButtonClicked()"
(onToolbarFullscreenButtonClicked)="_onToolbarFullscreenButtonClicked()"
(onSessionCreated)="_onSessionCreated($event)"
(onParticipantCreated)="_onParticipantCreated($event)"
></ov-videoconference>
`
})
@ -113,15 +115,14 @@ export class OpenviduWebComponentComponent implements OnInit {
@Output() onToolbarLeaveButtonClicked = new EventEmitter<any>();
@Output() onToolbarCameraButtonClicked = new EventEmitter<any>();
@Output() onToolbarMicrophoneButtonClicked = new EventEmitter<any>();
@Output() onSessionCreated = new EventEmitter<any>();
@Output() onToolbarScreenshareButtonClicked = new EventEmitter<any>();
@Output() onToolbarParticipantsPanelButtonClicked = new EventEmitter<any>();
@Output() onToolbarChatPanelButtonClicked = new EventEmitter<any>();
@Output() onToolbarFullscreenButtonClicked = new EventEmitter<any>();
@Output() onSessionCreated = new EventEmitter<any>();
@Output() onParticipantCreated = new EventEmitter<any>();
success: boolean = false;
// _sessionConfig: SessionConfig;
private log: ILogger;
constructor(private loggerService: LoggerService, private host: ElementRef, private openviduService: OpenViduService) {
@ -177,18 +178,14 @@ export class OpenviduWebComponentComponent implements OnInit {
this.onSessionCreated.emit(event);
}
_onParticipantCreated(event: ParticipantAbstractModel) {
this.onParticipantCreated.emit(event);
}
leaveSession() {
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 {
if (typeof value === 'boolean') {
return value;

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

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

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

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