Merge branch 'ov-components-refactor'

.github/workflows/openvidu-components-angular-E2E.yml

@@ -71,7 +71,7 @@ jobs:
         name: openvidu-browser
         path: openvidu-components-angular
     - name: Run Browserless Chrome
-      run: docker run -d -p 3000:3000 --network host browserless/chrome:1.53-chrome-stable
+      run: docker run -d -p 3000:3000 --network host browserless/chrome:1.57-chrome-stable
     - name: Run openvidu-server-kms
       run: |
         docker run -p 4443:4443 --rm -d \
@@ -106,7 +106,7 @@ jobs:
         name: openvidu-browser
         path: openvidu-components-angular
     - name: Run Browserless Chrome
-      run: docker run -d -p 3000:3000 --network host browserless/chrome:1.53-chrome-stable
+      run: docker run -d -p 3000:3000 --network host browserless/chrome:1.57-chrome-stable
     - name: Run openvidu-server-kms
       run: |
         docker run -p 4443:4443 --rm -d \
@@ -140,7 +140,7 @@ jobs:
         name: openvidu-browser
         path: openvidu-components-angular
     - name: Run Browserless Chrome
-      run: docker run -d -p 3000:3000 --network host browserless/chrome:1.53-chrome-stable
+      run: docker run -d -p 3000:3000 --network host browserless/chrome:1.57-chrome-stable
     - name: Install openvidu-browser and dependencies
       run: |
         cd openvidu-components-angular

openvidu-components-angular/e2e/utils.po.test.ts

@@ -2,7 +2,7 @@ import { expect } from 'chai';
 import { By, until, WebDriver, WebElement } from 'selenium-webdriver';
 
 export class OpenViduComponentsPO {
-	private TIMEOUT = 30 * 1000;
+	private TIMEOUT = 10 * 1000;
 	private POLL_TIMEOUT = 1 * 1000;
 
 	constructor(private browser: WebDriver) {}
@@ -16,7 +16,7 @@ export class OpenViduComponentsPO {
 		);
 	}
 
-	async getNumberOfElements(selector: string){
+	async getNumberOfElements(selector: string): Promise<number> {
 		return (await this.browser.findElements(By.css(selector))).length;
 	}
 

openvidu-components-angular/e2e/webcomponent-app/app.js

@@ -1,3 +1,5 @@
+import monkeyPatchMediaDevices from './utils/media-devices.js';
+
 var MINIMAL;
 var LANG;
 var CAPTIONS_LANG;
@@ -29,6 +31,7 @@ var CAPTIONS_BUTTON;
 
 var SINGLE_TOKEN;
 var SESSION_NAME;
+var FAKE_DEVICES;
 
 var PARTICIPANT_NAME;
 
@@ -43,6 +46,8 @@ $(document).ready(() => {
 
 	SINGLE_TOKEN = url.searchParams.get('singleToken') === null ? false : url.searchParams.get('singleToken') === 'true';
 
+	FAKE_DEVICES = url.searchParams.get('fakeDevices') === null ? false : url.searchParams.get('fakeDevices') === 'true';
+
 	// Directives
 	MINIMAL = url.searchParams.get('minimal') === null ? false : url.searchParams.get('minimal') === 'true';
 	LANG = url.searchParams.get('lang') || 'en';
@@ -197,6 +202,11 @@ function appendElement(id) {
 async function joinSession(sessionName, participantName) {
 	var webComponent = document.querySelector('openvidu-webcomponent');
 	var tokens;
+
+	if (FAKE_DEVICES) {
+		monkeyPatchMediaDevices();
+	}
+
 	if (SINGLE_TOKEN) {
 		tokens = await getToken(sessionName);
 	} else {

openvidu-components-angular/e2e/webcomponent-app/index.html

@@ -8,7 +8,10 @@
 			crossorigin="anonymous"
 		></script>
 
-		<script src="app.js"></script>
+		<script type="module" src="utils/filter-stream.js"></script>
+		<script type="module" src="utils/shader-renderer.js"></script>
+		<script type="module" src="utils/media-devices.js"></script>
+		<script type="module" src="app.js"></script>
 		<script src="openvidu-webcomponent-dev.js"></script>
 		<link rel="stylesheet" href="openvidu-webcomponent-dev.css" />
 

openvidu-components-angular/e2e/webcomponent-app/utils/filter-stream.js

@@ -0,0 +1,30 @@
+class FilterStream {
+	constructor(stream, label) {
+		const videoTrack = stream.getVideoTracks()[0];
+		const { width, height } = videoTrack.getSettings();
+		const canvas = document.createElement('canvas');
+		const ctx = canvas.getContext('2d');
+		const video = document.createElement('video');
+		video.srcObject = new MediaStream([videoTrack]);
+		video.play();
+
+		video.addEventListener('play', () => {
+			const loop = () => {
+				if (!video.paused && !video.ended) {
+					ctx.filter = 'grayscale(100%)';
+                    ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, 0, 0, video.videoWidth, video.videoHeight);
+					setTimeout(loop, 33);
+				}
+			};
+			loop();
+		});
+		this.outputStream = canvas.captureStream();
+
+		Object.defineProperty(this.outputStream.getVideoTracks()[0], 'label', {
+			writable: true,
+			value: label
+		});
+	}
+}
+
+export { FilterStream };

openvidu-components-angular/e2e/webcomponent-app/utils/media-devices.js

@@ -0,0 +1,62 @@
+// Ideally we'd use an editor or import shaders directly from the API.
+import { FilterStream } from './filter-stream.js';
+
+export default function monkeyPatchMediaDevices() {
+	const enumerateDevicesFn = MediaDevices.prototype.enumerateDevices;
+	const getUserMediaFn = MediaDevices.prototype.getUserMedia;
+	const getDisplayMediaFn = MediaDevices.prototype.getDisplayMedia;
+
+	const fakeDevice = {
+		deviceId: 'virtual',
+		groupID: '',
+		kind: 'videoinput',
+		label: 'custom_fake_video_1'
+	};
+
+	MediaDevices.prototype.enumerateDevices = async function () {
+		const res = await enumerateDevicesFn.call(navigator.mediaDevices);
+		res.push(fakeDevice);
+		return res;
+	};
+
+	MediaDevices.prototype.getUserMedia = async function () {
+		const args = arguments[0];
+		const { deviceId, advanced, width, height } = args.video;
+		if (deviceId === 'virtual' || deviceId?.exact === 'virtual') {
+			const constraints = {
+				video: {
+					facingMode: args.facingMode,
+					advanced,
+					width,
+					height
+				},
+				audio: false
+			};
+			const res = await getUserMediaFn.call(navigator.mediaDevices, constraints);
+
+			if (res) {
+				const filter = new FilterStream(res, fakeDevice.label);
+				return filter.outputStream;
+			}
+
+			return res;
+		}
+
+		return getUserMediaFn.call(navigator.mediaDevices, ...arguments);
+	};
+
+	MediaDevices.prototype.getDisplayMedia = async function () {
+		const { video, audio } = arguments[0];
+
+		const screenVideoElement = document.getElementsByClassName("OT_video-element screen-type")[0];
+		const currentTrackLabel = screenVideoElement?.srcObject?.getVideoTracks()[0]?.label;
+		const res = await getDisplayMediaFn.call(navigator.mediaDevices, { video, audio });
+
+		if (res && currentTrackLabel && currentTrackLabel !== 'custom_fake_screen') {
+			const filter = new FilterStream(res, 'custom_fake_screen');
+			return filter.outputStream;
+		}
+
+		return res;
+	};
+}