Problem of changing streaming source im use with Ionic 4

[wxcvbn612]

Description

Im Use Videogular2 with Ionic4; i have streaming server for user to stream channels from our server but if user change the channel the videogular still buffering 1st video from source and don't show the user the 2nd video from source because we don't allow user to stream two channels in same time.

Im use VgHls to stream our streming source m3u8.

Thank you for check this use if you want any other information?

[Elecash]

Can you post some code or steps to reproduce? Thanks

[havishmanakkina]

@wxcvbn612 can change the Renditions of the video using video angular??

[wxcvbn612]

ts Code :

import { StoreService } from './../services/store.service';
import { ConfigService } from './../services/config.service';
import { Storage } from '@ionic/storage';
import { ActivatedRoute } from '@angular/router';
import { Component, OnInit, OnDestroy, ViewChild, AfterViewInit } from '@angular/core';
import { Stream } from '../models/Stream';
import { VgAPI } from 'videogular2/core';
import { VgHLS } from 'videogular2/src/streaming/vg-hls/vg-hls';

@Component({
  selector: 'app-iplayer',
  templateUrl: './iplayer.page.html',
  styleUrls: ['./iplayer.page.scss'],
})
export class IplayerPage implements OnInit, OnDestroy, AfterViewInit {

  @ViewChild(VgHLS) vgHls: VgHLS;
  num: number;
  streamUrl: string;
  currentStream: Stream = new Stream(0, '', '', 0, 0);
  isFav: boolean;
  api: VgAPI;

  constructor(private route: ActivatedRoute,
    private storage: Storage,
    private configService: ConfigService,
    private storeService: StoreService) { }

  ngOnInit() {
    this.num = +this.route.snapshot.params['num'];
    this.getStream();
    this.checkFav();
    console.log('Inited');
  }

  onPlayerReady(api: VgAPI) {
    this.api = api;
  }

  ionViewWillLeave() {
    // console.log(this.vgHls.hls.getMediaSource());
    this.vgHls.hls.stopLoad();
    this.api.pause();
  }

  getStream() {
    this.storage.get('lives').then(
      (data: Stream[]) => {
        data.filter(
          (s) => {
            if (s.num === this.num) {
               this.currentStream = s;
               this.streamUrl = this.configService.getStreamLivepath('user', 'pass', this.currentStream.stream_id);
            }
          }
        );
      }
    );
  }

  checkFav() {
    this.storage.get('favs').then(
      (data: Stream[]) => {
        data.filter(
          (s) => {
            if (s.num === this.num) {
              this.isFav = true;
            }
          }
        );
      }
    );
  }

  addToFav() {
    this.isFav = true;
    this.storeService.addToFavs(this.currentStream);
  }

  removeFav() {
    this.isFav = false;
    this.storeService.removeFromFavs(this.currentStream);
  }

  ngOnDestroy() {
  }
}

My Template Code:

<ion-header>
  <ion-toolbar no-border>
    <ion-buttons slot="start">
      <ion-back-button color="light"></ion-back-button>
    </ion-buttons>
    <ion-title color="light">{{currentStream.name}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen>
  <vg-player (onPlayerReady)="onPlayerReady($event)">
      <vg-controls vgAutohide="true" vgFor="my-video">
          <vg-play-pause></vg-play-pause>
          <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>

          <vg-scrub-bar>
            <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
            <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
          </vg-scrub-bar>

          <vg-mute></vg-mute>
          <vg-volume></vg-volume>
          <ion-button 
            *ngIf="!isFav"
            (click)="addToFav()"
            fill="clear"
            >
              <ion-icon slot="icon-only" name="star" color="light"></ion-icon>
          </ion-button>

          <ion-button 
            *ngIf="isFav"
            (click)="removeFav()"
            fill="clear">
              <ion-icon slot="icon-only" name="star" color="warning"></ion-icon>
          </ion-button>

    </vg-controls>
    <video #myMedia
          [vgMedia]="myMedia"
          [vgHls]="streamUrl"
          (onGetBitrates)="hlsBitrates = $event"
          id="my-video"
           >
    </video>
  </vg-player>

</ion-content>

[Elecash]

Code looks fine, I'm not sure what's the problem. Do you have a page where I can see it in action? Did you tried in Chrome instead of Ionic?

[wxcvbn612]

the problem sir if user navigate to stream page 1st time all work fine. but if the user navigate to other stream chrome buffer video from the source and don't show the video. im make demonstration for you this night tks