Capacitor convertFileSrc() uses wrong host with live reload

Capacitor
1

I am running into an issue with Capacitor’s convertFileSrc() method, specifically when running my android live reload development server.

I start with a file URI, like file:///storage/emulated/0/DCIM/Camera/20201210_010103.mp4. This one comes from the cordova MediaCapture plugin after recording a video, but I don’t think that matters.

I want to play this video back in the app using a <video /> element, so I am converting the file path to a web url using Capacitor.convertFileSrc(videoFile). However, since I’m running the app with android live reload, and for that I have to enable the external network interface option, it thinks the “host” is my dev machine’s IP and not localhost or whatever my phone would be.

I am running my live reload server using this command:

> ionic cap run -l android --external

And I am using the conversion method like this:

import { Capacitor } from '@capacitor/core';

// ...

const onTakeVideo = async () => {
    const { fullPath } = await captureVideo(); // file:///storage/emulated/0/DCIM/Camera/20201210_010103.mp4
    const videoUrl = Capacitor.convertFileSrc(fullPath); // http://<desktop_ip>:8100/_capacitor_file_/storage/emulated/0/DCIM/Camera/20201210_010103.mp4
}

And then I want to render the video like this:

<video src={videoUrl} {...otherProps} />;

I believe I am using the Capacitor method correctly, so is this just a flaw between Capacitor and the Ionic live dev server config, or have I missed something when running the server?

2

The host is right, if it used localhost you’ll face CORS issues, despite it points to your computer, the response is intercepted and returns the file from the device filesystem.

If the video is not working, might be related to adding the src to the video. video tag has no src attribute, but has source child tags that has the src attribute, you should set the src of the source, not of the video.