Unfortunately, I realized that Flex only supports MP3 audio formats, as well as FLV and H.264 encoded videos. This would be an obstacle, since we wanted the media viewer to be able to support all types of audio and video. (Then doctors would be able to upload medical files freely without worrying about compatibility). In addition, the project was designed with the desire to upload video from mobile phones into OpenMRS.
Specs for what Flex supports:
I captured some sample videos on the Android G1 phone to see if it could be embedded in my Flash application, but the video didn’t play properly. It turns out the problem was because the video was in .3gp format and using H.263 encoding. You can find encoding information using Ctl + I when viewing the video in Quicktime (there are no menu options for this).
I double-checked the Android documentation and found this page to confirm that audio and video files created by the Android G1 phone are NOT in MP3 or H.264 format. (Source: http://developer.android.com/guide/topics/media/index.html)
After discussing this format support problem in Flex with other computer science students at MIT, I came up with two design options: 1) Find an open source video player that supported crucial formats (i.e. AVI, MP4) and embed that using HTML/Javascript in my Flash application, or 2) Convert all files uploaded to OpenMRS into MP3 and FLV format to be played by the Flash media viewer. I tried looking for a media player written in Flex so that it could be easily integrated with my application. I found various players, but the FlowPlayer (http://flowplayer.org/demos/installation/index.html) looked the most promising. However, after testing it with my sample MP4 files, sometimes the audio would play without the video portion. I also had difficulty importing the player into FlexBuilder because it required Adobe CS4 Professional.
After much more research and experimenting, I decided to go with the second option of requiring the format to be MP3 or FLV. This was a better idea because raw video files can take over a hundred MB and would provide variable output quality/size. Meanwhile, storing the videos in FLV format would only take up 10-15MB of space and would stream much faster when the doctor loaded the page. (Youtube.com also converts all uploaded videos into FLV format for streaming).
Hence, I looked into ready-made programs that would perform video transcoding for me. There are a lot of options on the Internet but many charged money for the solution or had a GUI interface (so integrating it to run automatically would be difficult). A command-line option that looked most promising was FFMPEG (http://ffmpeg.org/). FFMPEG is an open source cross platform solution to streaming and converting both audio and video. It worked on converting many of my MP4 test files into proper FLV files, but it didn’t support conversion of 3gp files form the phone. If you’re interested in using this tool for your project, this tutorial is very easy to follow and understand.
FLV Converter - A Layman’s Guide to Flash Video Conversion
Then I looked into Adobe solutions and found the Adobe Media Encoder. As I mentioned above, Adobe CS4 Professional requires a license, but I decided to just use the trial version since it includes the Adobe Media Encoder. It worked very well and converted all my files to FLV format, including my 3gp test file. There’s also a command-line interface for the media encoder (http://help.adobe.com/en_US/FlashMedia-Encoder/2/help.html?content=get_started_11.html), so it can be integrated with the Moca module on OpenMRS. However, the only problem left is that we would need a license for the software. I decided to assume that transcoding would be an issue that we would deal with later, at the very least, the user could convert the file using a free converter from the Internet. I moved onto spend time on developing the audio and video player for my media viewer.
Flex doesn’t have any pre-built media players for easy integration into projects, so I had to browse online for ones made by other developers. After much searching, I didn’t find any players that suited the needs of the OpenMRS media viewer. For example, the audio players were too simple (just play and mute buttons), too complex (with filters and audio synthesis tools), or didn’t have open source licenses. As for video players, I found ones like Flow Player (described above), but then realized that there is an FLVPlayback component in CS4. I imported the SWC from CS4 into FlexBuilder and used this pre-made component for my media viewer.
Using the Flash FLVPlayback control in Flex
http://blog.flexexamples.com/2008/12/11/using-the-flash-flvplayback-control-in-flex/
Building Web Video Players
FLVPlayback Directly in Flex
http://yourpalmark.com/2008/04/30/flvplayback-directly-in-flex/
I modified the version from this tutorial to a different skin with more control options, docked the control bar below the video (no fading), made audio/video play simultaneously, and changed my Flex application HTML file to enable full screen mode. Pictures of the finished FLV player will be in an upcoming post.
Since the FLV Playback component didn’t play MP3 files, I had to come up with an audio player that somewhat visually matched the video player. There were many tutorials on how to use the Sound and SoundChannel classes in Flex, so I decided to create my own audio player.
Creating an audio player turned out to be a challenging task even though there were pre-built Sound classes. Some difficult parts were figuring out to update the time and slider as the audio played, allowing the user to skip to a different position in the track, switching the play icon to a pause icon (as well as mute/unmute icons), linking the volume control slider with volume changes in the sound channe.
Foundation Actionscript 3.0 with Flash CS3 and Flex
Working with Sound
http://livedocs.adobe.com/flex/3/html/help.html?content=Working_with_Sound_12.html
Loading External .mp3 File and Retrieving ID3 Information
http://manewc.com/2008/02/07/as-3-loading-external-mp3-file-and-retrieving-id3-information/
Create a Simple and Attractive MP3 Player
http://flash.tutsplus.com/tutorials/actionscript/create-a-simple-and-attractive-mp3-player/
Coming up with the button skins and look-and-feel of the audio player took some time. Here are some design iterations:
Tags: GSOC Media Viewer, OpenMRS