How to capture video and play it back?

@randbrown wrote:

I'm using the ionic native MediaCapture to record a video, and then display it. However, I can not figure out how to play back the video just recorded.

In my page:

takeVideo() {
    let options: CaptureVideoOptions = { limit: 1 };
    MediaCapture.captureVideo(options)
      .then((data: MediaFile[]) => {
        console.log(data);
        var i, path, len;
        for (i = 0, len = data.length; i < len; i += 1) {
          console.log(path);
          // data[i].fullPath = "file:/storage/extSdCard/DCIM/Camera/20160827_225041.mp4"
          // data[i].localURL = "cdvfile://localhost/root/storage/extSdCard/DCIM/Camera/20160827_225041.mp4"
          // How do I display this video to the user?
          this.videoFilePath = data[i].fullPath;
        }
      },
      (err: CaptureError) => {
        console.error(err);
      }
      );
  }

I'm trying to display it with this tag, but I see only an empty player control. It can not access the file.

<video id="resource-video" controls="controls" autoplay="false" [src]="videoFilePath">
  Your browser does not support the video tag.
</video>

I've tried both the "fullPath" which uses the file:/ protocol, as well as the localURL which uses the cdvfile:// protocol. Do I need to modify the path string, or is there a content policy I need to enable, or is there a different approach altogether I need to be using?

Thanks!

Posts: 1

Participants: 1

Read full topic