Playing back video from mediaCapture.captureVideo


#1

I’m working on a small prototype to capture video and then play it back. I’ve been through every possible forum and just can’t seem to get it to work. I just started a new project so I have all the latest packages (Ionic 3).

I installed and imported the following:

import { MediaCapture, MediaFile, CaptureError, CaptureImageOptions } from ‘@ionic-native/media-capture’;
import { Camera } from ‘@ionic-native/camera’

Then I was able to run this.mediaCapture.captureVideo(options) and got video data back including the localURL and the fullPath. I also connected to my phone and confirmed that the video was in my storage folder.

So far so good… but I can’t get this file to play back in a video element, no matter which combination I try.

My home.html contains the following (excluding the content tag and header):

  <video controls="controls" autoplay="true" width="100%">
    <source [src]="safeUrl" type="video/mp4"/>
  </video>

My home.ts starts with this code:

  logList:any;
  videoFileName:any;
  safeUrl:SafeUrl;

  constructor(public navCtrl: NavController,
              public mediaCapture:MediaCapture,
              public camera:Camera,
              public sanitizer: DomSanitizer) {
    this.logList = [];

    setTimeout(()=>{
      this.videoFileName = "file:///storage/8039-13EF/DCIM/Camera/20170509_125209.mp4";
      this.safeUrl = this.sanitizer.bypassSecurityTrustUrl(this.videoFileName);
      this.addLog("safeUrl: " + this.safeUrl);
    },2000)
  }

(I added a 2s timer before setting the video’s file path, just in case some elements needed to finish initializing… better safe than sorry)

No matter if I set the path directly to the hard-coded path or the sanitized path, the video never shows up. Also, the result of this.sanitizer.etc… returns "SafeValue must use [property]=binding:file://storage/…/.mp4

I have also tried running every combinations with “ionic run android --prod” since I have read that running it livereload can interfere with the storage path.

Does anyone have an idea or sample code which work with the latest version of Ionic?
I followed the following tutorial to get started: http://tphangout.com/ionic-2-video-capture-and-playback/

Is it possible that I’m having trouble reading the mp4 back because it is stored in storage on an SD card?

Cordova CLI: 6.3.1
Ionic Framework Version: 3.1.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.7
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.1
Xcode version: Not installed