ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

openvidu-browser: Ionic iOS support

pull/154/head
pabloFuente 2018-11-28 09:42:26 +01:00
parent 3e777a9fbc
commit 5b4b34e254
7 changed files with 87 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
openvidu-browser/src/OpenVidu/OpenVidu.ts
View File

@ -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.

49
openvidu-browser/src/OpenVidu/Publisher.ts
View File

@ -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 = () => {

1
openvidu-browser/src/OpenVidu/Session.ts
View File

@ -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');

23
openvidu-browser/src/OpenVidu/Stream.ts
View File

@ -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) {

13
openvidu-browser/src/OpenVidu/StreamManager.ts
View File

@ -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;
}
});
}

56
openvidu-browser/src/OpenViduInternal/WebRtcPeer/WebRtcPeer.ts
View File

@ -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) {
(<MediaStream>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) {
(<MediaStream>sender).stop();
}
pc1.removeStream(sender);
}
pc1.removeStream(sender);
}
// Stop receivers
for (const receiver of pc1.getRemoteStreams()) {
if (!!receiver.track) {
(<MediaStream>receiver).stop();
// Stop receivers deprecated
for (const receiver of pc1.getRemoteStreams()) {
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') {
// 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,

1
openvidu-browser/src/OpenViduInternal/WebRtcStats/WebRtcStats.ts
View File

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