diff --git a/openvidu-browser/src/OpenVidu/OpenVidu.ts b/openvidu-browser/src/OpenVidu/OpenVidu.ts index 7e7cede4..1b4df37c 100644 --- a/openvidu-browser/src/OpenVidu/OpenVidu.ts +++ b/openvidu-browser/src/OpenVidu/OpenVidu.ts @@ -79,7 +79,7 @@ export class OpenVidu { console.info("'OpenVidu' initialized"); if (platform.os!!.family === 'iOS' || platform.os!!.family === 'Android') { - // Listen to orientationchange only on mobile browsers + // Listen to orientationchange only on mobile devices (window).onorientationchange = () => { this.publishers.forEach(publisher => { if (!!publisher.stream && !!publisher.stream.hasVideo && !!publisher.stream.streamManager.videos[0]) { diff --git a/openvidu-browser/src/OpenVidu/Publisher.ts b/openvidu-browser/src/OpenVidu/Publisher.ts index 1175895f..5f6e1edf 100644 --- a/openvidu-browser/src/OpenVidu/Publisher.ts +++ b/openvidu-browser/src/OpenVidu/Publisher.ts @@ -312,22 +312,42 @@ export class Publisher extends StreamManager { if (!this.stream.isSendScreen()) { if (platform['isIonicIos']) { - // iOS Ionic. Limitation: cannot set videoDimensions, as the videoReference is not loaded if not added to DOM - /*this.videoReference.onloadedmetadata = () => { + // iOS Ionic. Limitation: cannot set videoDimensions directly, as the videoReference is not loaded + // if not added to DOM. Must add it to DOM and wait for videoWidth and videoHeight properties to be defined + + this.videoReference.style.display = 'none'; + document.body.appendChild(this.videoReference); + + const videoDimensionsSet = () => { this.stream.videoDimensions = { width: this.videoReference.videoWidth, height: this.videoReference.videoHeight }; - };*/ - this.stream.isLocalStreamReadyToPublish = true; - this.stream.ee.emitEvent('stream-ready-to-publish', []); + this.stream.isLocalStreamReadyToPublish = true; + this.stream.ee.emitEvent('stream-ready-to-publish', []); + document.body.removeChild(this.videoReference); + } + + let interval; + this.videoReference.onloadedmetadata = () => { + if (this.videoReference.videoWidth === 0) { + interval = setInterval(() => { + if (this.videoReference.videoWidth !== 0) { + videoDimensionsSet(); + clearInterval(interval); + } + }, 10); + } else { + videoDimensionsSet(); + } + }; } else { // Rest of platforms // With no screen share, video dimension can be set directly from MediaStream (getSettings) // Orientation must be checked for mobile devices (width and height are reversed) const { width, height } = mediaStream.getVideoTracks()[0].getSettings(); - if (platform.name!!.toLowerCase().indexOf('mobile') !== -1 && (window.innerHeight > window.innerWidth)) { + if ((platform.os!!.family === 'iOS' || platform.os!!.family === 'Android') && (window.innerHeight > window.innerWidth)) { // Mobile portrait mode this.stream.videoDimensions = { width: height || 0, diff --git a/openvidu-browser/src/OpenVidu/StreamManager.ts b/openvidu-browser/src/OpenVidu/StreamManager.ts index 260c8f31..64fd06ae 100644 --- a/openvidu-browser/src/OpenVidu/StreamManager.ts +++ b/openvidu-browser/src/OpenVidu/StreamManager.ts @@ -439,8 +439,10 @@ export class StreamManager implements EventDispatcher { } private mirrorVideo(video): void { - video.style.transform = 'rotateY(180deg)'; - video.style.webkitTransform = 'rotateY(180deg)'; + if (!platform['isIonicIos']) { + video.style.transform = 'rotateY(180deg)'; + video.style.webkitTransform = 'rotateY(180deg)'; + } } private removeMirrorVideo(video): void {