Join Rafael Hernandez for an in-depth discussion in this video Using the camera and video, part of Titanium Mobile App Development Essential Training.
Incorporating media into your application adds another dimension of expression to your content. Images, video, and sound can all be created and experienced within Titanium Mobile. Starting with the app.js file in the 10 _01 folder of the exercise files, I've created a window object with a button. Notice that the zIndex of the button is set to 2. I'll add a click EventListener to the button. For the callback function, I'll open the camera on the device, use it, save the result to the device's photo gallery, and then display the captured photo or video in the window.
I'm assuming that the device has a camera. The Titanium.Media.isCameraSupported can be used to test the camera within a conditional statement. The success property takes a callback function that will fire once the camera successfully takes a photo or records a video. I'll be coming back to this property in a minute. The error property takes a callback function that will fire if an error occurs. The cancel property takes a callback function that will fire when the camera is canceled.
The allowEditing property determines whether or not the user will be allowed to edit the photo or video after it's been taken. I'll set this to true. The saveToPhotoGallery property determines whether or not the photo should be saved to the device's default photo gallery. I'll set this to true. The mediaTypes property sets what modes of image capture are available to the user for the camera. Options must be placed within an array. Keep in mind that if you specify a mode here, if the device doesn't support it, it won't be shown.
Finally, the videoQuality property sets the quality of the photo or video captured. I'll set the quality to high using Titanium.Media.QUALITY_HIGH. I'll return to the success property and code a callback function that will work in two different ways. If a photo is taken, the photo will be displayed in a new imageView within the window. This is done by comparing the mediaType property of the event object with Titanium.Media.MEDIA_TYPE_PHOTO.
If video is taken, the video will display in a new window, play, and then close. This is done by comparing the mediaType property of event object with Titanium.Media.MEDIA_TYPE_VIDEO. For the photo portion of the condition, I'll create a new imageView and set the image property to the media property of the BLOB returned by the camera. Now I'll set some dimension and position properties. Then I'll add the imageView to the window.
For the video portion of the condition, I'll create a new video player object and launch it in a new window. I'll set the backgroundColor to black. In the videoPlayer object I'll set the media property to e.media. There are lots of other properties that are valid for this object, including setting the ControlMode, ControlStyle, and scalingMode. I'll copy and paste some of them below. Now I'll add the videoPlayer to the newly created window.
I'll add an EventListener to the videoPlayer that listens for the event called complete. For the callback function, I'll remove the videoPlayer object from the new window and set the variable to null. This is done to ensure the variable is marked for garbage collection. Finally, I'll call the close method of the window. In order to test this out, I'll need to build to the device. I cover building to the device later in the course. When I click the button the camera appears and I'm able to take either a photo or a video.
If I take a photo I can follow through until finally the photo appears in the window. If I record video, I can follow through until the video appears in a new window, plays, and then closes. Next, I'll show you how to incorporate photos from your device's photo gallery into your app.
- Accessing the Titanium API documentation
- Navigating the Titanium Studio workspace
- Detecting platforms
- Understanding windows and views
- Listening for events
- Configuring text fields
- Adding interactivity to a view
- Working with a single tab group
- Creating a map and setting the location
- Adding and removing map pins at runtime
- Loading local and remote web pages
- Loading an external XML feed
- Setting timers
- Prompting device vibrations
- Implementing an activity indicator
- Reading from and writing to the file system
- Working with media
- Reading device orientation
- Detecting gestures
- Debugging an app
- Stepping through a finished app
Skill Level Beginner
1. Getting Started
Editing run configurations1m 38s
2. Windows & Views
3. Controls, Input & Interactivity
4. Tab Group
5. Table View
6. Map View
7. Web View and XHR
9. Data Management
Sending an email3m 38s
Reading device orientation2m 27s
12. Preparing for app distribution
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.