From 3cc13fd6c27fc3dbb7e3bb797bc4f7484582f4d0 Mon Sep 17 00:00:00 2001 From: pabloFuente Date: Thu, 29 Nov 2018 18:25:14 +0100 Subject: [PATCH] openvidu-ionic: full iOS support (behaviour refined) --- openvidu-ionic/build.json | 6 ++++ openvidu-ionic/config.xml | 9 ++++-- openvidu-ionic/src/app/app.component.html | 4 +-- openvidu-ionic/src/app/app.component.ts | 24 ++++----------- openvidu-ionic/src/app/ov-video.component.ts | 32 ++++++++++++++++---- openvidu-ionic/src/global.scss | 3 ++ 6 files changed, 49 insertions(+), 29 deletions(-) diff --git a/openvidu-ionic/build.json b/openvidu-ionic/build.json index 20ad470b..6959e794 100644 --- a/openvidu-ionic/build.json +++ b/openvidu-ionic/build.json @@ -1,5 +1,11 @@ { "ios": { + "build": { + "buildFlag": ["-UseModernBuildSystem=0"] + }, + "run": { + "buildFlag": ["-UseModernBuildSystem=0"] + }, "debug": { "buildFlag": ["-UseModernBuildSystem=0"] }, diff --git a/openvidu-ionic/config.xml b/openvidu-ionic/config.xml index 3a59a1e5..1280df3f 100644 --- a/openvidu-ionic/config.xml +++ b/openvidu-ionic/config.xml @@ -1,7 +1,7 @@ - OpenVidu Sample - OpenVidu sample app + OpenVidu Ionic + OpenVidu Ionic app compatible with Android and iOS OpenVidu @@ -19,7 +19,7 @@ - + @@ -53,6 +53,9 @@ OpenVidu needs access to your camera + + OpenVidu needs access to contacts + OpenVidu needs access to your microphone diff --git a/openvidu-ionic/src/app/app.component.html b/openvidu-ionic/src/app/app.component.html index 50ba05fa..95d64b99 100644 --- a/openvidu-ionic/src/app/app.component.html +++ b/openvidu-ionic/src/app/app.component.html @@ -11,7 +11,7 @@ - +

Join a video session

@@ -32,7 +32,7 @@ - +

{{mySessionId}}

diff --git a/openvidu-ionic/src/app/app.component.ts b/openvidu-ionic/src/app/app.component.ts index 35cb6765..67f8e187 100644 --- a/openvidu-ionic/src/app/app.component.ts +++ b/openvidu-ionic/src/app/app.component.ts @@ -135,24 +135,6 @@ export class AppComponent implements OnDestroy { }); } - - /*buildPVideo() { - this.pVideo = document.createElement('video'); - this.pVideo.style.width = '400px'; - this.pVideo.style.height = 400 - 56 + 'px'; - this.pVideo.style.position = 'absolute'; - this.pVideo.style.top = '0'; - this.pVideo.srcObject = null; - this.pVideo.style.zIndex = '997'; - this.pVideo.setAttribute('autoplay', ''); - this.pVideo.setAttribute('playsinline', ''); - this.platform.ready().then(() => { - if (this.platform.is('ios')) { - cordova.plugins.iosrtc.observeVideo(this.pVideo); - } - }); - }*/ - initPublisher() { // Init a publisher passing undefined as targetElement (we don't want OpenVidu to insert a video // element: we will manage it on our own) and with the desired properties @@ -190,6 +172,12 @@ export class AppComponent implements OnDestroy { this.generateParticipantInfo(); } + refreshVideos() { + if (this.platform.is('ios') && this.platform.is('cordova')) { + cordova.plugins.iosrtc.refreshVideos(); + } + } + private checkAndroidPermissions(): Promise { return new Promise((resolve, reject) => { this.platform.ready().then(() => { diff --git a/openvidu-ionic/src/app/ov-video.component.ts b/openvidu-ionic/src/app/ov-video.component.ts index bc608e23..3e1765f3 100644 --- a/openvidu-ionic/src/app/ov-video.component.ts +++ b/openvidu-ionic/src/app/ov-video.component.ts @@ -1,4 +1,4 @@ -import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, Input, ViewChild, OnDestroy } from '@angular/core'; import { StreamManager, StreamPropertyChangedEvent } from 'openvidu-browser'; import { Platform } from '@ionic/angular'; declare var cordova; @@ -9,22 +9,40 @@ declare var cordova; styles: [ ` video { - z-index: -1; + width: inherit; } ` ] }) -export class OpenViduVideoComponent implements AfterViewInit { +export class OpenViduVideoComponent implements AfterViewInit, OnDestroy { @ViewChild('videoElement') elementRef: ElementRef; _streamManager: StreamManager; + rotationFunction; + constructor(private platform: Platform) {} - ngAfterViewInit() { + ngAfterViewInit() {window.addEventListener + if (this.isIos() && this._streamManager.remote) { + this.rotationFunction = () => { + // Give the remote video some time to update its dimensions when rotating the device + setTimeout(() => { + this.applyIosIonicVideoAttributes(); + cordova.plugins.iosrtc.refreshVideos(); + }, 250); + }; + (window).addEventListener('orientationchange', this.rotationFunction); + } this.updateVideoView(); } + ngOnDestroy() { + if (!!this.rotationFunction) { + (window).removeEventListener('orientationchange', this.rotationFunction); + } + } + @Input() set streamManager(streamManager: StreamManager) { this._streamManager = streamManager; @@ -33,6 +51,7 @@ export class OpenViduVideoComponent implements AfterViewInit { let e: StreamPropertyChangedEvent = event; if (e.changedProperty === 'videoDimensions') { this.applyIosIonicVideoAttributes(); + cordova.plugins.iosrtc.refreshVideos(); } }); } @@ -52,9 +71,10 @@ export class OpenViduVideoComponent implements AfterViewInit { private applyIosIonicVideoAttributes() { let ratio = this._streamManager.stream.videoDimensions.height / this._streamManager.stream.videoDimensions.width; - this.elementRef.nativeElement.style.width = '100%'; + this.elementRef.nativeElement.style.width = '100% !important'; + this.elementRef.nativeElement.style.objectFit = 'fill'; + this.elementRef.nativeElement.style.zIndex = '-1'; const computedWidth = this.elementRef.nativeElement.offsetWidth; - console.warn(this._streamManager.stream.connection.data + ' - ' + computedWidth); this.elementRef.nativeElement.style.height = computedWidth * ratio + 'px'; if (!this._streamManager.remote) { // It is a Publisher video. Custom iosrtc plugin mirror video diff --git a/openvidu-ionic/src/global.scss b/openvidu-ionic/src/global.scss index 23bad8d4..dd36677e 100644 --- a/openvidu-ionic/src/global.scss +++ b/openvidu-ionic/src/global.scss @@ -10,3 +10,6 @@ @import "~@ionic/angular/css/text-transformation.css"; @import "~@ionic/angular/css/flex-utils.css"; +:root { + --ion-background-color: transparent; +} \ No newline at end of file