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