video-featCorona SDK has long offered the ability to load images, save images, and work with photos in the camera roll or photo album. Now, since Daily Build #1239, we’ve added the ability to load and record video as well. For this purpose, we’ve added two new API calls to the media library, as well as two new APIs for working with photos.

New Video APIs

The two new video-related APIs are:

Video Capture

Let’s look at a basic code sample for capturing video:

local function onVideoComplete( event )
   if ( event.completed ) then
      media.playVideo( event.url, media.RemoteSource, true, videoPlayBackDone )
      print( event.duration )
      print( event.fileSize )
   end
end

if ( media.hasSource( media.Camera ) ) then
   media.captureVideo( { listener = onVideoComplete, preferredQuality = "high", } )
else
   native.showAlert( "Corona", "This device does not have a camera.", { "OK" } )
end

In this case, we simply call media.captureVideo() to bring up the operating system’s video dialog. When the user dismisses the screen, the listener function is called and the app can optionally “react” to the video, for example, play it back. You can also set a preferredQuality preference for the video which includes “low” and “high” for both iOS and Android, plus a “medium” option for iOS. The default is “low” and you should be aware of the potential size of recorded videos if you increase the quality. Finally, you can request a max duration (in seconds) via the preferredMaxDuration parameter — just note that it may not be respected on all Android devices.

Video Selection

To select a video from the album/camera roll, use the media.selectVideo() call, for example:

if ( media.hasSource( media.PhotoLibrary ) ) then
   media.selectVideo( { listener = onVideoComplete, mediaSource = media.PhotoLibrary } )
else
   native.showAlert( "Corona", "This device does not have a photo library.", { "OK" } )
end

In this call, the optional mediaSource parameter lets you choose between the “PhotoLibrary” or the “SavedPhotosAlbum.”

Event Properties

Both of these APIs reveal basic info to the listener function (onVideoComplete) when the system’s dialog is dismissed:

  • event.url — path to video.
  • event.completed — true if the user decided to keep/use the video; false if the user cancelled the dialog.
  • event.duration — length of the video in seconds.
  • event.fileSize — size of the video file in bytes.

Once selected, you can play the video using either the media.playVideo() call or native.newVideo() call.

IMPORTANT: Videos are captured/selected in an area outside of your app’s sandbox and technically are accessed via a URL. Because of this, you need to specify media.RemoteSource in the playback API when playing the video.

media.playVideo( event.url, media.RemoteSource, true )
local video = native.newVideo( 0, 0, 640, 360 )
video:load( event.url, media.RemoteSource )

New Photo APIs

As part of introducing these new API calls, we are deprecating the older media.show() API as well. Moving forward, we suggest that you convert to the newer photo-related APIs, including:

Photo Capture

The code to capture a photo is similar to video capture:

local function onPhotoComplete( event )
   if ( event.completed ) then
      local photo = event.target
      local s = display.contentHeight / photo.height
      photo:scale( s,s )
      print( "photo w,h = " .. photo.width .. "," .. photo.height )
   end
end

if ( media.hasSource( media.Camera ) ) then
   media.capturePhoto( { listener = onPhotoComplete } )
else
   native.showAlert( "Corona", "This device does not have a camera.", { "OK" } )
end

An additional optional parameter for media.capturePhoto() is the destination parameter. This determines what the API should do with the photo. If this parameter is not defined, the photo will be returned as a standard Corona display object which can be shown on the screen, inserted into a display group/container, etc. However, if you want to save the photo to the app’s sandbox, specify the destination parameter, for example:

media.capturePhoto( {
   listener = onPhotoComplete, 
   destination = {
      baseDir = system.TemporaryDirectory,
      filename = "myImage.jpg",
      type = "image"
   }
} )

Photo Selection

To read an image from the camera roll, use the media.selectPhoto() API call.

if media.hasSource( media.PhotoLibrary ) then
   media.selectPhoto( { mediaSource = media.PhotoLibrary, listener = onPhotoComplete } )
else
   native.showAlert( "Corona", "This device does not have a photo library.", { "OK" } )
end

Event Properties

Both of these APIs reveal basic info to the listener function (onPhotoComplete) when the system’s dialog is dismissed:

  • event.target — this will be a display object if destination is not specified. If destination is specified, this property will be nil.
  • event.completed — true if the user decided to keep/use the photo; false if the user cancelled the dialog.

iOS Notes: Landscape Orientation, iPad

Landscape Orientation

Video is typically recorded in landscape orientation, but the iOS dialogs are primarily in portrait orientation. If you lock your app to landscape orientation, it will cause problems. To solve this, add the following four lines to your build.settings file in the iphone.plist table:

iphone = {
   plist = {
      CoronaUseIOS7IPadPhotoPickerLandscapeOnlyWorkaround = true,
      CoronaUseIOS6IPadPhotoPickerLandscapeOnlyWorkaround = true,
      CoronaUseIOS7LandscapeOnlyWorkaround = true,
      CoronaUseIOS6LandscapeOnlyWorkaround = true,
   },
}

iPad

The Apple iPad uses a popover menu that usually originates from a UI button that is used to open the dialog. For the two select functions — media.selectPhoto() and media.selectVideo() — there are two optional parameters which specify where on the screen the button is and which direction the popover should happen.

  • origin — a typical approach is to pass in the content bounds of the button used to select the dialog.
  • permittedArrowDirections — the popover menu has an arrow that points from the popover to the button. This lets you specify the direction in which that arrow should point. Valid values are “up”, “down”, “left”, “right”, or “any”. Default is “any”.
media.selectPhoto( {
   listener = onPhotoComplete,
   origin = myButton.contentBounds,
   permittedArrowDirections = { "up", "down" }
} )

Android Build Settings

To use photos and videos, Android requires the following permissions in the build.settings table:

android =
{
   usesPermissions =
   {
      "android.permission.CAMERA",
      "android.permission.WRITE_EXTERNAL_STORAGE",
   },
},

In Summary

Remember that the photo and video dialogs behave like other native system objects. Thus, you can not overlay images or other Corona display objects on top of these dialogs, and they cannot be added to display groups or containers.

Ready to experiment? If you’re a Pro or Enterprise subscriber with access to daily builds, please get Daily Build #1239 or later and download the sample project from Dropbox. NOTE: The sample project is based on Graphics 2.0. You will need to center the image yourself with Graphics 1.0 and change how the text colors are set.

  1. Pretty Cool…..What is the ETA on being able to render (display) a video file that we include in our build on an object during gameplay? I’m pretty sure I read somewhere that there would be a render video as texture type feature in Graphics 2.0?

  2. Cool stuff as usual! This is probably a stupid question but I was wondering if it will be possible to video screen capture the screen? Say you have a game running on the device and you want to capture the screen (or a section of the screen) in a video format. I know we can take a screenshot of the screen and save it to a file. But I am think about taking a video capture of the screen instead. I am not interested in video screen capture using a PC software..

    My guess if it is not possible, I could maybe take bunch of screenshots at “rapid” intervals and save each shots into the device. Then I can playback the files as a movie. Not great of course!

    Anyway I was wondering about that for a future app…

    Thanks for these great G2 tutorials. They will come VERY handy when I start working on apps based on the new graphic engine:)

    Mo

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>