Noto able to play video recorded using media capture

Ionic Framework
1

Hi I am using ionic 5 to develop mobile applications. As part of app I am using media capture plugin to record video and in call back storing file path in a variable and tried to play video using html5 video tag, I am getting issue like

"Not allowed to load local resource"

I am trying in android device. Any help would be appreciated. Below is my code:

html:

Sample App
CAMERA PREVIEW

MEDIA CAPTURE

.ts file:

import { Component, OnInit } from ‘@angular/core’;
import { CameraPreview, CameraPreviewPictureOptions, CameraPreviewOptions, CameraPreviewDimensions } from ‘@ionic-native/camera-preview/ngx’;
import { MediaCapture, MediaFile, CaptureVideoOptions } from ‘@ionic-native/media-capture/ngx’;
import { VideoPlayer } from ‘@ionic-native/video-player/ngx’;

@Component({
selector: ‘app-visitor’,
templateUrl: ‘./visitor.page.html’,
styleUrls: [’./visitor.page.scss’],
})
export class VisitorPage implements OnInit {

camOptions: any;
video: any;

constructor(private camPreview: CameraPreview, private mediaCapture: MediaCapture) {

}

ngOnInit() {
}

ionViewWillEnter() {

}

camPreviewVideo() {
this.camOptions = {
x: 0,
y: 125,
width: window.screen.width,
height: window.screen.height - 150,
camera: ‘front’,
tapPhoto: false,
previewDrag: false,
toBack: false,
storeToFile: false,
alpha: 1
};

this.camPreview.startCamera(this.camOptions).then(resp => {
  console.log('response ' + JSON.stringify(resp));
  setInterval(() => this.captureVideo(), 2000);
}, err => {
  console.log('Error ' + JSON.stringify(err));
});

}

captureVideo() {
var options = {
cameraDirection: this.camPreview.CAMERA_DIRECTION.FRONT,
width: window.screen.width,
height: window.screen.height - 205,
quality: 100,
withFlash: false
}

this.camPreview.startRecordVideo(options).then(resp => {
  console.log('resp ', JSON.stringify(resp));
}, err => {
  console.log('err ', JSON.stringify(err));
});

}

mediaCaptureVideo() {
let options: CaptureVideoOptions = {
limit: 1, duration: 30
};

this.mediaCapture.captureVideo(options).then((path: MediaFile[]) => {
  console.log('path ', path[0].fullPath);
  let win: any = window; // hack ionic/angular compilator
  var myURL = win.Ionic.WebView.convertFileSrc(path[0].fullPath);
  console.log('url ', myURL);
  this.video = myURL
}, err => {
  alert('Error Media Capture Video' + JSON.stringify(err));
});

}

}

2

The reason might be that Angular isn’t trusting the resource and therefore doesn’t load it. Perhaps this could be fixed by using the Angular DomSanitizer and calling it on the URL first.

Otherwise you can try and simply store the recorded video file inside your Ionic app first, and then load it directly from the file like inside my tutorial.

3

Hi Saimon,

Thanks for the response. But I want to play video in html5 video should get fit as part of the screen. I have used Dom Sanitizer as well. But still the video is not playing.

“file:///storage/emulated/0/DCIM/Camera/VID_20200824_151738.mp4”

That is how the video url is getting returned by media capture plugin.

Regards,
M.R.C.Prasad

4

Wrap code blocks in triple backticks:

code goes here

The way it’s formatted now is murder to read (and also made mincemeat of your template code, which would also likely be informative here).

Why are you doing this: let win: any = window; // hack ionic/angular compilator? I doubt it’s the proximate cause of your problem, but there has got to be a cleaner way to do whatever it is you’re trying to achieve.

5

Hi rapropos,

Do you have any working solution. I tried with DomSanitizer as well still not able to play video.

6

If using Capacitor use:

Capacitor.convertFileSrc(videoPath)

If using Cordova use:

window.Ionic.WebView.convertFileSrc(videoPath)
7

Hi rustysyris

I am using cordova and I tried the way you proposed. I am using media capture to record a video for a duration of 30sec. In callback I am getting a video path starting with file:/// and I am assigning this path to a variable and binding to html5 video tag like [src]="video". But the video is not played.

mediaCaptureVideo() {
let options = {
limit: 1,
duration: 30
};

this.mediaCapture.captureVideo(options).then((path: MediaFile[]) => {
  console.log('path ', path[0].fullPath);
  this.video = this.sanitizer.bypassSecurityTrustResourceUrl(path[0].fullPath);
  console.log('video ',this.video);
}, err => {
  alert('Error Media Capture Video' + JSON.stringify(err));
});

}

Kindly provide a working solution. I am working with ionic 5 and Angular 9

8

Make sure your using the latest cordova-plugin-ionic-webview and read the configuration on that page for your setup. Your code looks good to me.