diff --git a/openvidu-browser/src/OpenVidu/OpenVidu.ts b/openvidu-browser/src/OpenVidu/OpenVidu.ts index a832d5ab..7e7cede4 100644 --- a/openvidu-browser/src/OpenVidu/OpenVidu.ts +++ b/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. diff --git a/openvidu-browser/src/OpenVidu/Publisher.ts b/openvidu-browser/src/OpenVidu/Publisher.ts index eb0ee057..1175895f 100644 --- a/openvidu-browser/src/OpenVidu/Publisher.ts +++ b/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)) { - // Mobile portrait mode - this.stream.videoDimensions = { - width: height || 0, - height: width || 0 - }; + if (platform['isIonicIos']) { + // iOS Ionic. Limitation: cannot set videoDimensions, as the videoReference is not loaded if not added to DOM + /*this.videoReference.onloadedmetadata = () => { + this.stream.videoDimensions = { + width: this.videoReference.videoWidth, + height: this.videoReference.videoHeight + }; + };*/ + this.stream.isLocalStreamReadyToPublish = true; + this.stream.ee.emitEvent('stream-ready-to-publish', []); } else { - this.stream.videoDimensions = { - width: width || 0, - height: height || 0 - }; + // 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)) { + // 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 = () => { diff --git a/openvidu-browser/src/OpenVidu/Session.ts b/openvidu-browser/src/OpenVidu/Session.ts index 54ebea37..331a8108 100644 --- a/openvidu-browser/src/OpenVidu/Session.ts +++ b/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'); diff --git a/openvidu-browser/src/OpenVidu/Stream.ts b/openvidu-browser/src/OpenVidu/Stream.ts index 78e0d0c9..499478e1 100644 --- a/openvidu-browser/src/OpenVidu/Stream.ts +++ b/openvidu-browser/src/OpenVidu/Stream.ts @@ -703,18 +703,19 @@ export class Stream implements EventDispatcher { } private remotePeerSuccessfullyEstablished(): void { - /*this.mediaStream = new MediaStream(); - - let receiver: RTCRtpReceiver; - for (receiver of this.webRtcPeer.pc.getReceivers()) { - if (!!receiver.track) { - this.mediaStream.addTrack(receiver.track); + if (platform['isIonicIos']) { + // iOS Ionic. LIMITATION: must use deprecated WebRTC API + const pc1: any = this.webRtcPeer.pc; + this.mediaStream = pc1.getRemoteStreams()[0]; + } else { + 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) { diff --git a/openvidu-browser/src/OpenVidu/StreamManager.ts b/openvidu-browser/src/OpenVidu/StreamManager.ts index 883f99ca..260c8f31 100644 --- a/openvidu-browser/src/OpenVidu/StreamManager.ts +++ b/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"); - let videoDiv = document.getElementById('remoteVideo'); - if(videoDiv){ - streamManagerVideo.video.setAttribute('playsinline', 'true'); - videoDiv.appendChild(streamManagerVideo.video); - + if (platform['isIonicIos']) { + // iOS Ionic. LIMITATION: must reinsert the video in the DOM for + // the media stream to be updated + const vParent = streamManagerVideo.video.parentElement; + const newVideo = streamManagerVideo.video; + vParent!!.replaceChild(newVideo, streamManagerVideo.video); + streamManagerVideo.video = newVideo; } }); } diff --git a/openvidu-browser/src/OpenViduInternal/WebRtcPeer/WebRtcPeer.ts b/openvidu-browser/src/OpenViduInternal/WebRtcPeer/WebRtcPeer.ts index c7ac01f3..c3102df2 100644 --- a/openvidu-browser/src/OpenViduInternal/WebRtcPeer/WebRtcPeer.ts +++ b/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()) { - //this.pc.addTrack(track, this.configuration.mediaStream); - console.warn("ADDSTREAM"); + if (platform['isIonicIos']) { + // iOS Ionic. LIMITATION: must use deprecated WebRTC API 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 - const pc1: any = this.pc; - for (const sender of pc1.getLocalStreams()) { - if (!videoSourceIsMediaStreamTrack) { - (sender).stop(); + if (platform['isIonicIos']) { + // iOS Ionic. LIMITATION: must use deprecated WebRTC API + // Stop senders deprecated + const pc1: any = this.pc; + for (const sender of pc1.getLocalStreams()) { + if (!videoSourceIsMediaStreamTrack) { + (sender).stop(); + } + pc1.removeStream(sender); } - pc1.removeStream(sender); - } - // Stop receivers - for (const receiver of pc1.getRemoteStreams()) { - if (!!receiver.track) { - (receiver).stop(); + // Stop receivers deprecated + for (const receiver of pc1.getRemoteStreams()) { + if (!!receiver.track) { + (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') { - // Safari, at least on iOS just seems to support unified plan, whereas in other browsers is not yet ready and considered experimental + if (platform.name === 'Safari' && platform.ua!!.indexOf('Safari') !== -1) { + // 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, diff --git a/openvidu-browser/src/OpenViduInternal/WebRtcStats/WebRtcStats.ts b/openvidu-browser/src/OpenViduInternal/WebRtcStats/WebRtcStats.ts index 8f47d5c7..55adbcf4 100644 --- a/openvidu-browser/src/OpenViduInternal/WebRtcStats/WebRtcStats.ts +++ b/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 {