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 +
- +

{{mySessionId}}

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'); + } }