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

opnvidu-browser: allow iOS ionic to send streamPropertyChanged (videoDimensions) event

pull/154/head
pabloFuente 2018-11-29 17:30:08 +01:00
parent fef0b62ff0
commit 07b851cfda
1 changed files with 29 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -80,7 +80,7 @@ export class OpenVidu {
if (platform.os!!.family === 'iOS' || platform.os!!.family === 'Android') { if (platform.os!!.family === 'iOS' || platform.os!!.family === 'Android') {
// Listen to orientationchange only on mobile devices // Listen to orientationchange only on mobile devices
(<any>window).onorientationchange = () => { (<any>window).addEventListener('orientationchange', () => {
this.publishers.forEach(publisher => { this.publishers.forEach(publisher => {
if (!!publisher.stream && !!publisher.stream.hasVideo && !!publisher.stream.streamManager.videos[0]) { if (!!publisher.stream && !!publisher.stream.hasVideo && !!publisher.stream.streamManager.videos[0]) {
@ -88,22 +88,37 @@ export class OpenVidu {
const oldWidth = publisher.stream.videoDimensions.width; const oldWidth = publisher.stream.videoDimensions.width;
const oldHeight = publisher.stream.videoDimensions.height; const oldHeight = publisher.stream.videoDimensions.height;
// New resolution got from different places for Chrome and Firefox. Chrome needs a videoWidth and videoHeight of a videoElement.
// Firefox needs getSettings from the videoTrack const getNewVideoDimensions = (): Promise<{newWidth: number, newHeight: number}> => {
let firefoxSettings = publisher.stream.getMediaStream().getVideoTracks()[0].getSettings(); return new Promise((resolve, reject) => {
let newWidth = (platform.name!!.toLowerCase().indexOf('firefox') !== -1) ? firefoxSettings.width : publisher.videoReference.videoWidth; let newVideoDimensions: { newWidth: number, newHeight: number };
let newHeight = (platform.name!!.toLowerCase().indexOf('firefox') !== -1) ? firefoxSettings.height : publisher.videoReference.videoHeight; if (platform['isIonicIos']) {
// iOS Ionic. Limitation: must get new dimensions from an existing video element already inserted into DOM
resolve({
newWidth: publisher.stream.streamManager.videos[0].video.videoWidth,
newHeight: publisher.stream.streamManager.videos[0].video.videoHeight
});
} else {
// Rest of platforms
// New resolution got from different places for Chrome and Firefox. Chrome needs a videoWidth and videoHeight of a videoElement.
// Firefox needs getSettings from the videoTrack
let firefoxSettings = publisher.stream.getMediaStream().getVideoTracks()[0].getSettings();
const newWidth = <number>((platform.name!!.toLowerCase().indexOf('firefox') !== -1) ? firefoxSettings.width : publisher.videoReference.videoWidth);
const newHeight = <number>((platform.name!!.toLowerCase().indexOf('firefox') !== -1) ? firefoxSettings.height : publisher.videoReference.videoHeight);
resolve({newWidth, newHeight});
}
});
};
const repeatUntilChange = setInterval(() => { const repeatUntilChange = setInterval(() => {
firefoxSettings = publisher.stream.getMediaStream().getVideoTracks()[0].getSettings(); getNewVideoDimensions().then(newDimensions => {
newWidth = (platform.name!!.toLowerCase().indexOf('firefox') !== -1) ? firefoxSettings.width : publisher.videoReference.videoWidth; sendStreamPropertyChangedEvent(oldWidth, oldHeight, newDimensions.newWidth, newDimensions.newHeight);
newHeight = (platform.name!!.toLowerCase().indexOf('firefox') !== -1) ? firefoxSettings.height : publisher.videoReference.videoHeight; });
sendStreamPropertyChangedEvent(oldWidth, oldHeight, newWidth, newHeight); }, 75);
}, 100);
const sendStreamPropertyChangedEvent = (oldWidth, oldHeight, newWidth, newHeight) => { const sendStreamPropertyChangedEvent = (oldWidth, oldHeight, newWidth, newHeight) => {
attempts++; attempts++;
if (attempts > 4) { if (attempts > 10) {
clearTimeout(repeatUntilChange); clearTimeout(repeatUntilChange);
} }
if (newWidth !== oldWidth || newHeight !== oldHeight) { if (newWidth !== oldWidth || newHeight !== oldHeight) {
@ -132,7 +147,7 @@ export class OpenVidu {
}; };
} }
}); });
}; });
} }
} }
@ -310,7 +325,7 @@ export class OpenVidu {
const family = platform.os!!.family; const family = platform.os!!.family;
// Reject mobile devices // Reject mobile devices
if (family === 'iOS' || family === 'Android' || family === 'Windows Phone') { if (family === 'iOS' || family === 'Android') {
return 0; return 0;
} }