diff --git a/openvidu-ionic/config.xml b/openvidu-ionic/config.xml
index 2b0e5fb3..3a59a1e5 100644
--- a/openvidu-ionic/config.xml
+++ b/openvidu-ionic/config.xml
@@ -19,6 +19,7 @@
+
diff --git a/openvidu-ionic/src/app/app.component.css b/openvidu-ionic/src/app/app.component.css
index e37e6bc0..b2b55812 100644
--- a/openvidu-ionic/src/app/app.component.css
+++ b/openvidu-ionic/src/app/app.component.css
@@ -23,8 +23,4 @@
ion-col {
padding: 1px;
-}
-
-.no-scroll .scroll-content{
- overflow: hidden;
}
\ No newline at end of file
diff --git a/openvidu-ionic/src/app/app.component.html b/openvidu-ionic/src/app/app.component.html
index 6fe052aa..50ba05fa 100644
--- a/openvidu-ionic/src/app/app.component.html
+++ b/openvidu-ionic/src/app/app.component.html
@@ -11,8 +11,8 @@
-
-
+
+
Join a video session
@@ -29,9 +29,10 @@
Join
+
-
+
diff --git a/openvidu-ionic/src/app/app.component.ts b/openvidu-ionic/src/app/app.component.ts
index 569d532e..35cb6765 100644
--- a/openvidu-ionic/src/app/app.component.ts
+++ b/openvidu-ionic/src/app/app.component.ts
@@ -169,10 +169,10 @@ export class AppComponent implements OnDestroy {
// --- 6) Publish your stream ---
- this.session.publish(publisher);
-
- // Store our Publisher
- this.publisher = publisher;
+ this.session.publish(publisher).then(() => {
+ // Store our Publisher
+ this.publisher = publisher;
+ });
}
leaveSession() {
diff --git a/openvidu-ionic/src/app/ov-video.component.ts b/openvidu-ionic/src/app/ov-video.component.ts
index a6fd74cd..bc608e23 100644
--- a/openvidu-ionic/src/app/ov-video.component.ts
+++ b/openvidu-ionic/src/app/ov-video.component.ts
@@ -1,6 +1,7 @@
import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
-import { StreamManager } from 'openvidu-browser';
-
+import { StreamManager, StreamPropertyChangedEvent } from 'openvidu-browser';
+import { Platform } from '@ionic/angular';
+declare var cordova;
@Component({
selector: 'ov-video',
@@ -8,25 +9,60 @@ import { StreamManager } from 'openvidu-browser';
styles: [
`
video {
- width: inherit;
+ z-index: -1;
}
- `,
- ],
+ `
+ ]
})
export class OpenViduVideoComponent implements AfterViewInit {
@ViewChild('videoElement') elementRef: ElementRef;
_streamManager: StreamManager;
+ constructor(private platform: Platform) {}
+
ngAfterViewInit() {
- this._streamManager.addVideoElement(this.elementRef.nativeElement);
+ this.updateVideoView();
}
@Input()
set streamManager(streamManager: StreamManager) {
this._streamManager = streamManager;
- if (!!this.elementRef) {
- this._streamManager.addVideoElement(this.elementRef.nativeElement);
+ if (this.isIos()) {
+ this._streamManager.on('streamPropertyChanged', event => {
+ let e: StreamPropertyChangedEvent = event;
+ if (e.changedProperty === 'videoDimensions') {
+ this.applyIosIonicVideoAttributes();
+ }
+ });
}
}
+
+ private updateVideoView() {
+ if (this.isIos()) {
+ (this.elementRef.nativeElement).onloadedmetadata = () => {
+ this.applyIosIonicVideoAttributes();
+ };
+ }
+ this._streamManager.addVideoElement(this.elementRef.nativeElement);
+ if (this.isIos()) {
+ cordova.plugins.iosrtc.refreshVideos();
+ }
+ }
+
+ private applyIosIonicVideoAttributes() {
+ let ratio = this._streamManager.stream.videoDimensions.height / this._streamManager.stream.videoDimensions.width;
+ this.elementRef.nativeElement.style.width = '100%';
+ 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
+ this.elementRef.nativeElement.style.transform = 'scaleX(-1)';
+ }
+ }
+
+ private isIos(): boolean {
+ return this.platform.is('ios') && this.platform.is('cordova');
+ }
}