Page does not refresh after cordova media capture plugin records video

Hello fellow Ioners.

I have found a ‘mis-behavior’ when I’m using cordova media-capture plugin to capture video.

Quick description: After i record a video, and the results are ‘fed’ to an HTML5 video element, the element does not display, unless somehow you force the page to refresh manually.

Full code for reproducing issue:

Detailed Explanation:

home.html

<ion-content padding>
  <button (click)="_record()">Record Video</button>
  <button (click)="_dummyAlert()">Dummy</button>

  <video controls *ngIf="_video!==null" width="100%">
            <source [src]="_video.fullPath" [type]="_video.type">
            Your app does not support the video tag.
    </video>
</ion-content>

home.ts
import {Component} from ‘@angular/core’;
import {NavController,Alert} from ‘ionic-angular’;

@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  constructor(private navCtrl: NavController) {

  }

  private _video:MediaFile=null;

  private _record(){
    navigator.device.capture.captureVideo(
      (videoData:Array<MediaFile>) => {
            this._video=videoData[0];
          },
          (err) => {
            console.log(err);
          },
          {
              limit: 1,
              duration: 10
          }
    );
  }

  private _dummyAlert(){
    let alert = Alert.create({
      title: 'Low battery',
      subTitle: '10% of battery remaining',
      buttons: ['Dismiss']
    });
    this.navCtrl.present(alert);
  }

}

The video component is enabled (*ngIf) only if there are data. But after capturing video and the data are available the page does not refresh. If you click the ‘dummy’ button that raises an ‘Alert’ popup, the underneath page refreshes and the video is displayed normally.

Is this a bug? Can it be bypassed?

Thank you
Costas

wrap it in a zone and see if that solves the problem…

import zones…

import {NgZone} from '@angular/core';

change constructor

constructor(private navCtrl: NavController, public _zone : NgZone)

wrap call in zone…

this._zone.run(()=> {
    this._video=videoData[0];
});

see if that helps…

1 Like

Thank you very much.
That trick did the job ;-D