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

openvidu-browser: videoDimensions property support for Ionic

pull/154/head
pabloFuente 2018-11-29 09:41:43 +01:00
parent 5b4b34e254
commit fef0b62ff0
3 changed files with 31 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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
(<any>window).onorientationchange = () => {
this.publishers.forEach(publisher => {
if (!!publisher.stream && !!publisher.stream.hasVideo && !!publisher.stream.streamManager.videos[0]) {

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

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

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

@ -439,9 +439,11 @@ export class StreamManager implements EventDispatcher {
}
private mirrorVideo(video): void {
if (!platform['isIonicIos']) {
video.style.transform = 'rotateY(180deg)';
video.style.webkitTransform = 'rotateY(180deg)';
}
}
private removeMirrorVideo(video): void {
video.style.transform = 'unset';