Unable to save Video - iOS 13.6 - Simulator about media HOT 10 CLOSED

So I have worked around this by downloading the video locally using the Capacitor FileSystem API, then sending the localUri to the saveMedia function. Once downloading locally, this function works.

@stewwan - It would be helpful to others if the requirement of downloading locally was added to the ReadMe. Hopefully this will help someone else. Cheers!

from media.

This is my working code of saving recorded video to iphone gallery album. Video is stored in tmp folder of application.
this.state.videoUrl = "capacitor://myapp.com/capacitor_file/private/var/mobile/Containers/Data/Application/1F68250A-EB4B-475A-93E0-FE4F0C5C2C74/tmp/E97451DA-6D4E-46E1-8D4B-5ACDE0EC87F4.mp4"
write file plugin: github

import {Capacitor, Plugins, FilesystemDirectory } from "@capacitor/core";
import { Media } from "@capacitor-community/media";
import { writeFile } from "capacitor-blob-writer";
const media = new Media();

saveVideo = async () => {
    if (Capacitor.isNative) {
      var convertedUrl = Capacitor.convertFileSrc(this.state.videoUrl);
      const platform = Capacitor.getPlatform();
      const albumName = "Album Name";
      let albumIdentifier = "";
      const res = await fetch(convertedUrl);
      const blob = await res.blob();
      var uri = await writeFile({
        path: "media/videos/video.mp4",
        directory: FilesystemDirectory.Data,
        data: blob,
        recursive: true,
        fallback: (err) => {
          console.log(err);
          return process.env.NODE_ENV === "production";
        },
      });
      if (platform === "ios") {
        // Handle albums
        let albums = await media.getAlbums();
        albumIdentifier =
          albums.albums.find((a) => a.name === albumName)?.identifier || null;
        console.log("album: " + albumIdentifier);

        if (!albumIdentifier) {
          console.log("Creating album");
          // Doesn't exist, create new album
          await media.createAlbum({ name: albumName });
          albums = await media.getAlbums();
          albumIdentifier = albums.albums.find((a) => a.name === albumName)
            ?.identifier;
        }
      } else if (platform === "android") {
        await media.createAlbum({ name: albumName });
      }
      media
        .saveVideo({
          path: uri.uri,
          album: platform === "ios" ? albumIdentifier : albumName,
        })
        .then((r) => console.log(r))
        .catch((e) => console.error(e));
    }
  };

from media.

Confirmed same issue when deployed directly to my device. iPhone 7 iOS 13.6.

I should also mention the CreateAlbum and GetAlbum functions both successfully execute on both the Simulator and my device.

The SavePhoto function is also working, with a remote url as well.

Yet the SaveVideo function throws the error listed in the first post above.

from media.

Hi @stewwan --

Any suggestions related to this issue? I appreciate your assistance.

from media.

@oconcept Does your code work on android too? I can see in your code that you have console.log("album found!");
I'm still trying to find a work around on getAlbums returning Album already exists mentioned here #6

from media.

Hi @amakh - I haven't tested on android yet. Reviewing the other thread, is this only an issue in the emulator for you? I saw a comment saying everything is working on a physical device, is that correct?

from media.

@oconcept Unfortunately it doesn't work on android either :/
Feel free to keep us updated on the other issue if you try on android 👍

from media.

This is my working code of saving recorded video to iphone gallery album. Video is stored in tmp folder of application.
this.state.videoUrl = "capacitor://myapp.com/capacitor_file/private/var/mobile/Containers/Data/Application/1F68250A-EB4B-475A-93E0-FE4F0C5C2C74/tmp/E97451DA-6D4E-46E1-8D4B-5ACDE0EC87F4.mp4"
write file plugin: github

import {Capacitor, Plugins, FilesystemDirectory } from "@capacitor/core";
import { Media } from "@capacitor-community/media";
import { writeFile } from "capacitor-blob-writer";
const media = new Media();

saveVideo = async () => {
    if (Capacitor.isNative) {
      var convertedUrl = Capacitor.convertFileSrc(this.state.videoUrl);
      const platform = Capacitor.getPlatform();
      const albumName = "Album Name";
      let albumIdentifier = "";
      const res = await fetch(convertedUrl);
      const blob = await res.blob();
      var uri = await writeFile({
        path: "media/videos/video.mp4",
        directory: FilesystemDirectory.Data,
        data: blob,
        recursive: true,
        fallback: (err) => {
          console.log(err);
          return process.env.NODE_ENV === "production";
        },
      });
      if (platform === "ios") {
        // Handle albums
        let albums = await media.getAlbums();
        albumIdentifier =
          albums.albums.find((a) => a.name === albumName)?.identifier || null;
        console.log("album: " + albumIdentifier);

        if (!albumIdentifier) {
          console.log("Creating album");
          // Doesn't exist, create new album
          await media.createAlbum({ name: albumName });
          albums = await media.getAlbums();
          albumIdentifier = albums.albums.find((a) => a.name === albumName)
            ?.identifier;
        }
      } else if (platform === "android") {
        await media.createAlbum({ name: albumName });
      }
      media
        .saveVideo({
          path: uri.uri,
          album: platform === "ios" ? albumIdentifier : albumName,
        })
        .then((r) => console.log(r))
        .catch((e) => console.error(e));
    }
  };

Hey @mcarnoky001, I am trying to save a video from a URL to an iphone's local photo roll. Would you mind please sharing the part of your code that accomplishes this?

Apologies if you've already referenced that code here, but I'm basically wondering how you generate this path:

this.state.videoUrl = "capacitor://myapp.com/capacitor_file/private/var/mobile/Containers/Data/Application/1F68250A-EB4B-475A-93E0-FE4F0C5C2C74/tmp/E97451DA-6D4E-46E1-8D4B-5ACDE0EC87F4.mp4"

Thanks!

Are you just using the capacitor-blob-writer package to save the video to local photo roll?

from media.

@mepc36 Im using a plugin, which returns the given path. https://github.com/TeamHive/capacitor-video-recorder

from media.

can you try with latest plugin v3 ?

from media.