openvidu-browser: Ionic iOS support

openvidu-browser/src/OpenVidu/OpenVidu.ts

@@ -32,6 +32,7 @@ import * as screenSharing from '../OpenViduInternal/ScreenSharing/Screen-Capturi
 import RpcBuilder = require('../OpenViduInternal/KurentoUtils/kurento-jsonrpc');
 import platform = require('platform');
 
+platform['isIonicIos'] = (platform.product === 'iPhone' || platform.product === 'iPad') && platform.ua!!.indexOf('Safari') === -1;
 
 /**
  * Entrypoint of OpenVidu Browser library.

openvidu-browser/src/OpenVidu/Publisher.ts

@@ -28,9 +28,6 @@ import { VideoElementEvent } from '../OpenViduInternal/Events/VideoElementEvent'
 import { OpenViduError, OpenViduErrorName } from '../OpenViduInternal/Enums/OpenViduError';
 import { VideoInsertMode } from '../OpenViduInternal/Enums/VideoInsertMode';
 
-import platform = require('platform');
-
-
 /**
  * Packs local media streams. Participants can publish it to a session. Initialized with [[OpenVidu.initPublisher]] method
  */
@@ -313,26 +310,38 @@ export class Publisher extends StreamManager {
 
                 if (this.stream.isSendVideo()) {
                     if (!this.stream.isSendScreen()) {
-                        // 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();
-                        let width = 700;
-                        let height = 480;
 
-                        if (platform.name!!.toLowerCase().indexOf('mobile') !== -1 && (window.innerHeight > window.innerWidth)) {
+                        if (platform['isIonicIos']) {
-                            // Mobile portrait mode
+                            // iOS Ionic. Limitation: cannot set videoDimensions, as the videoReference is not loaded if not added to DOM
-                            this.stream.videoDimensions = {
+                            /*this.videoReference.onloadedmetadata = () => {
-                                width: height || 0,
+                                this.stream.videoDimensions = {
-                                height: width || 0
+                                    width: this.videoReference.videoWidth,
-                            };
+                                    height: this.videoReference.videoHeight
+                                };
+                            };*/
+                            this.stream.isLocalStreamReadyToPublish = true;
+                            this.stream.ee.emitEvent('stream-ready-to-publish', []);
                         } else {
-                            this.stream.videoDimensions = {
+                            // Rest of platforms
-                                width: width || 0,
+                            // With no screen share, video dimension can be set directly from MediaStream (getSettings)
-                                height: height || 0
+                            // 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)) {
+                                // Mobile portrait mode
+                                this.stream.videoDimensions = {
+                                    width: height || 0,
+                                    height: width || 0
+                                };
+                            } else {
+                                this.stream.videoDimensions = {
+                                    width: width || 0,
+                                    height: height || 0
+                                };
+                            }
+                            this.stream.isLocalStreamReadyToPublish = true;
+                            this.stream.ee.emitEvent('stream-ready-to-publish', []);
                         }
-                        this.stream.isLocalStreamReadyToPublish = true;
-                        this.stream.ee.emitEvent('stream-ready-to-publish', []);
                     } else {
                         // With screen share, video dimension must be got from a video element (onloadedmetadata event)
                         this.videoReference.onloadedmetadata = () => {

openvidu-browser/src/OpenVidu/Session.ts

@@ -40,7 +40,6 @@ import { StreamPropertyChangedEvent } from '../OpenViduInternal/Events/StreamPro
 import { OpenViduError, OpenViduErrorName } from '../OpenViduInternal/Enums/OpenViduError';
 import { VideoInsertMode } from '../OpenViduInternal/Enums/VideoInsertMode';
 
-import platform = require('platform');
 import EventEmitter = require('wolfy87-eventemitter');
 
 

openvidu-browser/src/OpenVidu/Stream.ts

@@ -703,18 +703,19 @@ export class Stream implements EventDispatcher {
     }
 
     private remotePeerSuccessfullyEstablished(): void {
-        /*this.mediaStream = new MediaStream();
+        if (platform['isIonicIos']) {
-
+            // iOS Ionic. LIMITATION: must use deprecated WebRTC API
-        let receiver: RTCRtpReceiver;
+            const pc1: any = this.webRtcPeer.pc;
-        for (receiver of this.webRtcPeer.pc.getReceivers()) {
+            this.mediaStream = pc1.getRemoteStreams()[0];
-            if (!!receiver.track) {
+        } else {
-                this.mediaStream.addTrack(receiver.track);
+            this.mediaStream = new MediaStream();
+            let receiver: RTCRtpReceiver;
+            for (receiver of this.webRtcPeer.pc.getReceivers()) {
+                if (!!receiver.track) {
+                    this.mediaStream.addTrack(receiver.track);
+                }
             }
-        }*/
+        }
-        const pc1: any = this.webRtcPeer.pc;
-        console.warn("GET REMOTE STREAMS", pc1.getRemoteStreams());
-        this.mediaStream = pc1.getRemoteStreams()[0];
-
         console.debug('Peer remote stream', this.mediaStream);
 
         if (!!this.mediaStream) {

openvidu-browser/src/OpenVidu/StreamManager.ts

@@ -412,12 +412,13 @@ export class StreamManager implements EventDispatcher {
     updateMediaStream(mediaStream: MediaStream) {
         this.videos.forEach(streamManagerVideo => {
             streamManagerVideo.video.srcObject = mediaStream;
-            console.warn("document.getElementID");
+            if (platform['isIonicIos']) {
-            let videoDiv = document.getElementById('remoteVideo');
+                // iOS Ionic. LIMITATION: must reinsert the video in the DOM for
-            if(videoDiv){
+                // the media stream to be updated
-                streamManagerVideo.video.setAttribute('playsinline', 'true');
+                const vParent = streamManagerVideo.video.parentElement;
-                videoDiv.appendChild(streamManagerVideo.video);
+                const newVideo = streamManagerVideo.video;
-                
+                vParent!!.replaceChild(newVideo, streamManagerVideo.video);
+                streamManagerVideo.video = newVideo;
             }
         });
     }

openvidu-browser/src/OpenViduInternal/WebRtcPeer/WebRtcPeer.ts

@@ -17,8 +17,6 @@
 
 import freeice = require('freeice');
 import uuid = require('uuid');
-import platform = require('platform');
-
 
 export interface WebRtcPeerConfiguration {
     mediaConstraints: {
@@ -87,11 +85,14 @@ export class WebRtcPeer {
                 reject('The peer connection object is in "closed" state. This is most likely due to an invocation of the dispose method before accepting in the dialogue');
             }
             if (!!this.configuration.mediaStream) {
-                for (const track of this.configuration.mediaStream.getTracks()) {
+                if (platform['isIonicIos']) {
-                    //this.pc.addTrack(track, this.configuration.mediaStream);
+                    // iOS Ionic. LIMITATION: must use deprecated WebRTC API
-                    console.warn("ADDSTREAM");
                     const pc2: any = this.pc;
                     pc2.addStream(this.configuration.mediaStream);
+                } else {
+                    for (const track of this.configuration.mediaStream.getTracks()) {
+                        this.pc.addTrack(track, this.configuration.mediaStream);
+                    }
                 }
                 resolve();
             }
@@ -111,18 +112,37 @@ export class WebRtcPeer {
                 this.remoteCandidatesQueue = [];
                 this.localCandidatesQueue = [];
 
-                // Stop senders
+                if (platform['isIonicIos']) {
-                const pc1: any = this.pc;
+                    // iOS Ionic. LIMITATION: must use deprecated WebRTC API
-                for (const sender of pc1.getLocalStreams()) {
+                    // Stop senders deprecated
-                    if (!videoSourceIsMediaStreamTrack) {
+                    const pc1: any = this.pc;
-                        (<MediaStream>sender).stop();
+                    for (const sender of pc1.getLocalStreams()) {
+                        if (!videoSourceIsMediaStreamTrack) {
+                            (<MediaStream>sender).stop();
+                        }
+                        pc1.removeStream(sender);
                     }
-                    pc1.removeStream(sender);
+                    // Stop receivers deprecated
-                }
+                    for (const receiver of pc1.getRemoteStreams()) {
-                // Stop receivers
+                        if (!!receiver.track) {
-                for (const receiver of pc1.getRemoteStreams()) {
+                            (<MediaStream>receiver).stop();
-                    if (!!receiver.track) {
+                        }
-                        (<MediaStream>receiver).stop();
+                    }
+                } else {
+                    // Stop senders
+                    for (const sender of this.pc.getSenders()) {
+                        if (!videoSourceIsMediaStreamTrack) {
+                            if (!!sender.track) {
+                                sender.track.stop();
+                            }
+                        }
+                        this.pc.removeTrack(sender);
+                    }
+                    // Stop receivers
+                    for (const receiver of this.pc.getReceivers()) {
+                        if (!!receiver.track) {
+                            receiver.track.stop();
+                        }
                     }
                 }
 
@@ -156,8 +176,8 @@ export class WebRtcPeer {
 
             console.debug('RTCPeerConnection constraints: ' + JSON.stringify(constraints));
 
-            if (platform.name === 'Safari') {
+            if (platform.name === 'Safari' && platform.ua!!.indexOf('Safari') !== -1) {
-                // Safari, at least on iOS just seems to support unified plan, whereas in other browsers is not yet ready and considered experimental
+                // Safari (excluding Ionic), at least on iOS just seems to support unified plan, whereas in other browsers is not yet ready and considered experimental
                 if (offerAudio) {
                     this.pc.addTransceiver('audio', {
                         direction: this.configuration.mode,

openvidu-browser/src/OpenViduInternal/WebRtcStats/WebRtcStats.ts

@@ -18,7 +18,6 @@
 // tslint:disable:no-string-literal
 
 import { Stream } from '../../OpenVidu/Stream';
-import platform = require('platform');
 
 export class WebRtcStats {