Camcorder, Basic: Record a video clip with this simple app

[Scott Ferguson]

The Camcorder component allows recording video and audio from your device's camera and saving the video to a 3gp file.

It's associated VideoPlayer component can then play back the recorded video clip.

The general steps to accomplish this are as follows:

1. the AI app uses it's Camcorder RecordVideo block to open the device's built-in video-recording app to display a preview of what the camera sees
2. the user presses a record button in the built-in app to begin recording 
3. the user presses a stop button to end recording
4. the user can press a play button to preview the video clip (optional)
5. the user can press the Cancel button to discard the video
6. the user can press the Done button to save the video and return to the AI app
   
7. the user touches the VideoPlayer's screen to activate the player, then presses the play button to play back the video clip

In this exercise we will create a simple camcorder app that records, saves then plays back a recorded clip.

Create a new project named lrn_cmc_simple.

Screen Designer:

Change Screen1.Title to Camcorder (touch screen to play recorded clip).

 - the comment is needed since it is not obvious that the screen needs to be touched after recording

Drag and drop a Button component into the Viewer layout and change it's Text property to Record.

Drag and drop a Camcorder component into the center of the Viewer layout.

 - note that it jumps down to the Non-Visible components area

Drag and drop a VideoPlayer component into the Viewer layout.

Set it's Width and Height to Fill Parent. (you can set these back to automatic later if the video display is too distorted)

Blocks Editor:

Drag and drop the Button1.Click block.

Drag and snap a Camcorder1.RecordVideo block into the Button1.Click block.

 - this block will be used to open the device's built-in video recording app

Drag and drop a Camcorder1.AfterRecording block and note that a [name clip] block automatically attaches to the clip socket

 - this event block will execute any blocks contained within it after the video clip has been recorded

 - the  [name clip] block will contain the saved video clip location returned by the built-in video recorder

Drag and snap a VideoPlayer1.Source block into the Camcorder1.AfterRecording block.

Drag and click the [value clip] block from My Blocks, My Definitions into the VideoPlayer1.Source to socket.

 - these two blocks set VideoPlayer1's Source property to the value of the clip argument block (file path for the video clip) 

 - VideoPlayer1.Source tells VideoPlayer what video clip to play  

Drag and click a VideoPlayer1.Start block to the VideoPlayer1.Source block.

Your project is now complete.

Package your app to test it on an Android device as the emulator has no camera!

Follow the steps as outlined in the introduction and you should get output similar to this.

(remember to touch the VideoPlayer screen after recording your clip!)

Challenge:

This exercise app allows only viewing the last video clip recorded. Can you think of a way to be able to watch any of the clips recorded by the app? (Hint: ListPickers allow adding and selecting items from a list; TinyDB stores data between sessions)