Unable to play <video> recorded with MediaCapture.captureVideo

Ionic Framework ionic-v3
1

I have tried everything I can think of, and followed a lot of the proposed solutions without success. This is the problem: When trying to capture a video using MediaCapture and then try to play it in a tag, the video just does not load. The code snippet is:

this.mediaCapture.captureVideo({limit: 1, duration: 30}).then (
        (data: MediaFile[]) => {
          console.log(data);
          this.videoPath = data[0].fullPath;
          this.validRecording = true;
          this.spinnerVisible = false;

          this.validRecording = true;
           let fileName = this.webView.convertFileSrc(this.videoPath);          
            document.getElementById('videoSource'+this.videoId).setAttribute('src', 
             fileName );
            this.video.load();
            this.video.play();

         } ).catch(err => {
        console.log(err);
}

I am using webview 4, which contains convertFileSrc.
As a result of convertFileSrc i get a 'http://localhost/_app_file/storage/emulated/DCIM/camera/20190324_1123.mp4" url
On the step when the video is tried to be played in the tag, I am getting a 404 (OK) error (not found??). But when looking at the phone, the video is recorded correctly.

Other dependencies I’ve got installed:

“dependencies”: {
“@angular/animations”: “5.2.11”,
“@angular/common”: “5.2.11”,
“@angular/compiler”: “5.2.11”,
“@angular/compiler-cli”: “5.2.11”,
“@angular/core”: “5.2.11”,
“@angular/forms”: “5.2.11”,
“@angular/http”: “5.2.11”,
“@angular/platform-browser”: “5.2.11”,
“@angular/platform-browser-dynamic”: “5.2.11”,
“@ionic-native/camera”: “~5.2.0”,
“@ionic-native/core”: “~5.2.0”,
“@ionic-native/file”: “~5.2.0”,
“@ionic-native/ionic-webview”: “^5.2.0”,
“@ionic-native/media-capture”: “~5.2.0”,
“@ionic-native/splash-screen”: “~5.2.0”,
“@ionic-native/status-bar”: “~5.2.0”,
“@ionic-native/video-player”: “^5.2.0”,
“@ionic/storage”: “2.1.3”,
“@types/node”: “^11.11.3”,
“cordova”: “^8.0.0”,
“cordova-android”: “7.1.4”,
“cordova-browser”: “5.0.4”,
“cordova-plugin-camera”: “^4.0.3”,
“cordova-plugin-device”: “^2.0.2”,
“cordova-plugin-file”: “^6.0.1”,
“cordova-plugin-ionic-keyboard”: “^2.1.3”,
“cordova-plugin-ionic-webview”: “4.0.0”,
“cordova-plugin-media-capture”: “^3.0.2”,
“cordova-plugin-splashscreen”: “^5.0.2”,
“cordova-plugin-statusbar”: “2.4.2”,

Please help!

2

I found the answer, for anyone in the future who is breaking their head with this: In order to read any video recorded form the phone, you need sufficient permissions, which of course are not “magically” provided.

After some searching, I followed this answer to ask for permissions:

Specifically, I requested for:

 this.androidPermissions.requestPermissions(
        [
          this.androidPermissions.PERMISSION.CAMERA, 
          this.androidPermissions.PERMISSION.READ_EXTERNAL_STORAGE,
          this.androidPermissions.PERMISSION.READ_MEDIA_VIDEO
          
        ]
      );

After adding the

constructor(private  androidPermissions: AndroidPermissions) {

to get the AndroidPermissions instance… don’t forget to install the AndroidPermissions cordova Plugin (instructions in https://ionicframework.com/docs/native/android-permissions/#PERMISSION)

It easily took me like 3 days to understand what was happening… so frustrating.

1 Like
3

This resolved a similar issue I had.

Thanks!

4

hi i’m also facing same issue can you put the code for reference.