Skip to content

Latest commit

 

History

History
277 lines (193 loc) · 7.95 KB

README.md

File metadata and controls

277 lines (193 loc) · 7.95 KB
Raw


Capacitor Media

@simplifield/capacitor-media-plugin

Fork of the https://github.com/capacitor-community/media plugin for enabling extra media capabilities


Maintainers

Maintainer GitHub Social
Stewan Silva stewwan @StewanSilva

Notice 🚀

We're starting fresh under an official org. If you were using the previous npm package capacitor-media, please update your package.json to @capacitor-community/media. Check out changelog for more info.

Installation

Using npm:

npm install @simplifield/capacitor-media-plugin

Using yarn:

yarn add @simplifield/capacitor-media-plugin

Sync native files:

@simplifield/capacitor-media-plugin

Capacitor 3 ready plugin inspired by Capacitor-community/media plugin.

Get device albums. Create an album. Save a photo to an album.

Install

npm install @simplifield/capacitor-media-plugin
npx cap sync

API

  • savePhoto
  • createAlbum
  • getAlbums

Usage

import { MediaPlugin } from '@simplifield/capacitor-media-plugin';

//
// Save video to a specific album
MediaPlugin
  .savePhoto({ path: '/path/to/the/file', album: 'My Album' })
  .then(console.log)
  .catch(console.log);

//
// Get a list of user albums
MediaPlugin
  .getAlbums()
  .then(console.log) // -> { albums: [{name:'My Album', identifier:'A1-B2-C3-D4'}, {name:'My Another Album', identifier:'E5-F6-G7-H8'}]}
  .catch(console.log);

//
// On Android 10+ files are stored to the external storage. Get Albums will return an emty albums array.
// This is done to prevent crashes because of deprecated DISTINCT keyword

//
// 

import { MediaPlugin } from '@simplifield/capacitor-media-plugin';
import { Capacitor } from '@capacitor/core';

const ALBUM_NAME = 'SomeAlbum';

const platform = Capacitor.getPlatform();

if (platform === 'android') {
  return MediaPlugin.savePhoto({ 
    path: filePath,
    album: ALBUM_NAME //is optional on Android.
    // If set and directory is not created - it will be created under the hood.
    // If not set, external storage will be used on Android 10+ (storage/emulated/0/Android/media/yourAppName)
    // or DCIM on Android <= 9
  });
}

// for iOS a special identifier is required, so firstly need to get albums
return MediaPlugin.getAlbums()
  .then(({ albums }) => {
    const mediaAlbum = albums.find((alb) => alb.name === ALBUM_NAME);

    if (!mediaAlbum) {
      return media
        .createAlbum({ name: ALBUM_NAME })
        .then(() => media.getAlbums())
        .then(({ albums }) => {
          const mediaAlbum = albums.find((alb) => alb.name === ALBUM_NAME);

          return mediaAlbum // could be undefined - consider throw
        });
    }
    return mediaAlbum;
  })
  .then((mediaAlbum) =>
    MediaPlugin.savePhoto({
      path: filePath,
      album: this.platformService.isiOS()
        ? mediaAlbum.identifier
        : mediaAlbum.name, // no album - error is thrown))
    })
  );

Disclaimer

Make sure you pass the correct album parameter according to the platform

album: this.platform.is('ios') ? album.identifier : album.name;

iOS setup

  • ionic start my-cap-app --capacitor
  • cd my-cap-app
  • npm install —-save @capacitor-community/media
  • mkdir www && touch www/index.html
  • npx cap add ios
  • npx cap open ios
  • sign your app at xcode (general tab)

Tip: every time you change a native code you may need to clean up the cache (Product > Clean build folder) and then run the app again.

Android setup

  • ionic start my-cap-app --capacitor
  • cd my-cap-app
  • npm install —-save @capacitor-community/media
  • mkdir www && touch www/index.html
  • npx cap add android
  • npx cap open android

Now you should be set to go. Try to run your client using ionic cap run android --livereload.

Tip: every time you change a native code you may need to clean up the cache (Build > Clean Project | Build > Rebuild Project) and then run the app again.

Example

License

MIT

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Stew
💻 📖
Zachary Keeton
💻

getAlbums()

getAlbums() => any

Returns: any

savePhoto(...)

savePhoto(options?: MediaSaveOptions | undefined) => any
Param Type
options MediaSaveOptions

Returns: any

createAlbum(...)

createAlbum(options?: MediaAlbumCreate | undefined) => any
Param Type
options MediaAlbumCreate

Returns: any

Interfaces

MediaAlbumResponse

Prop Type
albums {}

MediaAlbum

Prop Type
identifier string
name string
count number
type "smart" | "shared" | "user"

MediaSaveOptions

Prop Type
path string
album string

MediaAlbumCreate

Prop Type
name string