We are using to show Webrtc stream using HTML 5 video tag in ionic 3 project. Video is playing fine, but when we change the device orientation from landscape to portrait or portrait to landscape, the video is not resize and fit to container.
However, if we open the app either in landscape or portrait mode, video fit to container and resize properly.
I am facing this issue only for iOS build. In android, it is working fine.
Below is my HTML, CSS and TS file:
HTML:
<ion-header>
<ion-navbar color="light">
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title text-center class="tab-title" >{{class_name}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content data-tap-disable="true" overflow-scroll="true" >
<ion-grid class="video-grid">
<ion-row>
<ion-col>
<div id="videos-container" style="width:100%;min-height:240px;"></div>
</ion-col>
</ion-row>
<ion-list>
<ion-list-header class="live-head" text-wrap>{{room_name}}</ion-list-header>
</ion-list>
<ion-segment class="detail-tab" [(ngModel)]="details" color="primary">
<ion-segment-button value="description">
Description
</ion-segment-button>
</ion-segment>
<div [ngSwitch]="details">
<ion-list class="description-bg pad-space" *ngSwitchCase="'description'">
<ion-item>
<h6 class="detail-head" *ngIf="room_name">Title</h6>
<p class="detail-para" text-wrap>{{room_name}}</p>
<h6 class="detail-head descp" *ngIf="tags">Tag</h6>
<p class="detail-para">{{tags}}</p>
<h6 class="detail-head descp" *ngIf="description">Description</h6>
<p class="detail-para" [hidden]="showless" text-wrap>{{short_description |slice:0:500}}</p>
<p class="detail-para" [hidden]="showmore" text-wrap>{{description}}</p>
<div class="showmore-cls" text-right [hidden]="showless" (click)="showmorefunction()" *ngIf="description?.length > 500">Show More</div>
<div class="showmore-cls" text-right [hidden]="showmore" (click)="showlessfunction()" *ngIf="description?.length > 500">Show Less</div>
</ion-item>
</ion-list>
</div>
</ion-content>
CSS:
page-liveroom {
.item-ios{
padding-left:0px;
}
.item-ios.item-block .item-inner{
padding-right:0px;
}
.search_no_results{
text-align: center;
}
.item-md.item-block .item-inner{
padding-right:0px;
}
.label-md{
margin:0px
}
#videos-container{
background:#000;
}
.list-md{
margin-bottom:0px !important;
}
#videos-container video{
height: 300px;
width:100%;
}
.live-head{
padding: 0px 8px;
background-color: #fff;
margin: 0px;
font-size: 1.5rem;
color: #000;
font-weight: 500;
}
.detail-topic{
padding: 0px 15px;
background-color: #fff;
margin: 0px;
font-size: 1.7rem;
color: #000;
font-weight: 500;
}
.segment-md-primary .segment-button.activated, .segment-md-primary .segment-button.segment-activated {
background-color:#012f60;
color:#fff;
border-bottom:3px solid #fff;
border-color:#fff
}
.detail-tab{
background-color:#012f60;
color:#fff;
box-shadow:0px 3px 5px #888;
margin-top:-20px;
}
.segment-md-primary .segment-button{
color:#fff;
font-weight:400;
font-size:1.3rem;
text-transform:none;
}
.item-md{
padding:0px;
}
.description-bg{
ion-item{
background-color:#efefef;
}
.detail-head{
color:#012f60;
font-weight:500;
font-size:1.3rem;
}
.detail-para{
font-weight:500;
font-size:1.1rem;
color:#4c4747;
}
.descp{
margin-top:15px;
}
.showmore-cls{
font-size:11px;
color:#012f60;
font-weight:600;
}
.ref{
.label{
margin-top:0px;
}
.ref-material{
font-size:1.1rem;
color:#012f60;
font-weight: 600;
}
.ref-img{
width:15%;
margin-right:5px;
float:left;
}
.ref-name{
font-size:11px;
margin-top:0px;
color:#0a82c7;
float:left;
text-decoration:underline;
}
}
.mar-left{
padding-left:3px;
}
}
.pad-space{
padding:10px 10px;
}
.detail{
.label-md{
margin:0px 8px 13px 0;
}
}
.card-item{
background-color:transparent;
padding-left:0px;
.item-inner{
padding-right:0px;
}
.card{
margin-left:0px;
margin-right:0px;
width:100%;
margin-bottom:10px;
.card-content{
padding:0px 16px;
}
}
}
ion-app.md [padding]
{
.scroll-content{
padding:0px;
margin-left:10px;
}
}
.card-item {
.label{
margin-right:0px;
}
.item-inner{
padding-right:0px !important;
}
.card
{
.card-content{
padding:0px;
}
}
.topic-name{
h3{
color:#012f60;
font-weight:400;
}
}
.topic-head{
font-size:11px;
color:#b3b3b3;
font-weight:100;
margin:0px;
}
.topic-value{
font-size:11px;
color:#b3b3b3;
font-weight:500;
margin:0px;
}
.border-right{
border-right:1px solid #e0dede;
}
.arrow-next{
width:6%;
}
.list-icon{
img{
width:78%;
float:right;
}
}
.card-divider{
border-top:1px solid #e0dede;
margin-top:9px;
}
}
.mar-left{
padding-left:3px;
}
.label-md{
margin-top:0px;
}
.segment-ios-primary .segment-button.segment-activated{
background-color:#012f60;
border:0px;
border-bottom:4px solid #fff;
}
.segment-ios-primary .segment-button{
border:0px;
color:#fff;
}
.list-ios{
margin:-1px 0 21px !important;
}
.list-ios > .item-block:last-child{
border-bottom:0px;
}
.list-ios > .item-block:first-child{
border-top:0px;
}
.list-header-ios {
border-bottom:0px !important;
}
.label-ios{
margin-top:0px;
margin-right:0px;
}
.item-ios p{
margin-top:10px;
}
.title-ios .toolbar-title-ios{
margin-left:24px !important;
}
.video-grid{
padding:0px;
.col{
padding:0px;
}
}
@media all and (min-width: 500px) {
.card-item
{
.list-icon{
img{
width:18% !important;
}
}
}
}
.label-md{
.detail-topic{
padding-bottom:30px;
}
}
.detail-topic
{
margin-top:-5px;
white-space: pre-line;
}
.item-ios p{
margin-top:0px;
}
.liveroom-detail>div>div>.label{
margin-bottom:0px !important;
}
.label-ios{
margin-bottom:0px !important;
}
.item-ios.item-block .item-inner{
border-bottom:0px !important;
}
}
TS:
import { Component } from '@angular/core';
import {
Events,
Loading,
LoadingController,
NavController,
NavParams,
AlertController,
ViewController
} from 'ionic-angular';
import { AuthServiceProvider } from '../../providers/auth-service/auth-service';
import { Storage } from '@ionic/storage';
//import { StreamingMedia, StreamingVideoOptions } from '@ionic-native/streaming-media';
export declare var RTCMultiConnection: any;
//declare function getHTMLMediaElement(mediaElement, config);
@Component({
selector: 'page-liveroom',
templateUrl: 'liveroom.html',
})
export class LiveroomPage {
loading: Loading;
roomDetail: any;
connection = new RTCMultiConnection();
roomId: string;
BandwidthHandler: any = this.connection.BandwidthHandler;
mediaElement: any;
width: any;
public room_name:string;
public description:string;
public details:string = 'description';
public recomendation:any={};
public class_name:string;
public userId:string;
public video_unavailable:boolean = false;
private pageIndex;
public tags:string;
public showmore:boolean = true;
public showless:boolean = false;
public notificationId:string;
public alertPresented: boolean = false;
public short_description:string;
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public loadingCtrl: LoadingController,
public authService:AuthServiceProvider,
public storage: Storage,
public alertCtrl: AlertController,
private viewCtrl: ViewController,
public events:Events
) {
let self = this;
self.storage.get('userdata').then((userdata) => {
self.userId = userdata.data.user.id;
this.connection.userid = self.userId;
});
this.roomId = navParams.get("room_id");
this.notificationId = navParams.get("notificationId");
this.connection.socketURL = 'https://webrtc.nexg.tv:9001/';
this.connection.socketMessageEvent = 'video-broadcast-demo';
this.connection.session = {
audio: true,
video: true,
oneway: true
};
this.createLoader();
this.loading.present().then(() => {
if(this.roomId){
// this.loading.dismiss();
// this.connection.join(this.roomId);
let self = this;
this.connection.checkPresence(this.roomId, function (isRoomExist) {
if (isRoomExist) {
self.loading.dismiss();
self.connection.bandwidth = {
audio: 128,
video: 256,
screen: 300
}
self.connection.processSdp = function(sdp) {
sdp = self.BandwidthHandler.setApplicationSpecificBandwidth(sdp, self.connection.bandwidth, !!self.connection.session.screen);
sdp = self.BandwidthHandler.setVideoBitrates(sdp, {
min: 30,
max: 50
});
sdp = self.BandwidthHandler.setOpusAttributes(sdp);
return sdp;
};
self.connection.connectionDescription = self.connection.join(self.roomId);
return;
} else {
this.video_unavailable = false;
self.loading.dismiss();
self.showError("This class is no longer available!");
}
});
this.connection.onstream = function (event) {
var videoElement = event.mediaElement;
videoElement.id = event.streamid;
videoElement.controls = true;
document.getElementById('videos-container').appendChild(videoElement);
//document.getElementById(event.streamid).setAttribute('playsinline', 'true');
};
} else {
this.video_unavailable = false;
this.showError("This class is no longer available!");
//hide loader
this.loading.dismiss();
}
//when connection will close
let self = this;
this.connection.onstreamended = function (event) {
let mediaElement = document.getElementById(event.streamid);
if (mediaElement) {
mediaElement.parentNode.removeChild(mediaElement);
}
if(self.video_unavailable == false){
self.video_unavailable = true;
self.showError("This class has been closed by Teacher!");
}
};
this.connection.onmute = function(event) {
document.getElementById(event.streamid).removeAttribute('poster');
}
this.connection.onsessionclosed = function (event){
self.showError("Session Closed!");
}
this.connection.ondisconnected = function (event){
self.showError("Disconnected!");
}
this.connection.onleave = function(event) {
if (!self.connection.peers[self.connection.connectionDescription.remoteUserId]) {
return;
}
self.connection.peers[self.connection.connectionDescription.remoteUserId].peer.close();
// e.userid
// e.extra
};
});
}
showError(text) {
if (this.alertPresented == false) {
this.alertPresented = true;
let alert = this.alertCtrl.create({
title: 'Alert',
subTitle: text,
buttons: [
{
text: 'OK',
role: 'cancel',
handler: () => {
this.navCtrl.remove(this.pageIndex);
}
}
]
});
alert.present();
}
}
createLoader(message: string = "Please wait...") {
this.loading = this.loadingCtrl.create({
content: message
});
}
ionViewDidLoad() {
//assign data
this.pageIndex = this.viewCtrl.index;
this.room_name = this.navParams.get("room_name");
this.description = this.navParams.get('description');
this.short_description = this.navParams.get('description');
this.class_name = this.navParams.get('class_name');
this.tags = this.navParams.get('room_tag');
}
ionViewDidLeave() {
this.video_unavailable = true;
if(!this.connection.peers[this.connection.connectionDescription.remoteUserId]) {
return;
}
this.connection.peers[this.connection.connectionDescription.remoteUserId].peer.close();
}
getRecommondation(){
this.recomendation = {};
}
}
Any help appreciated.
