Camcorder, Intermediate: Record and save multiple video clips

[Scott Ferguson]

The Camcorder component allows your app to access the device's built-in video-recording app to record and save video clips with audio.

A link to the saved video clip is returned to your app so you may save it or view the video with the VideoPlayer component.

A link looks like this: content://media/external/video/media/5020

In this exercise we will invent an app that can record and save multiple video clips.

Links to those video clips will be permanently stored in a database allowing the app to recall them another day.

The list of video clips may also be browsed in the app and any saved video clip can be selected for playback.

Create a new project named lrn_ccd_features.

Screen Designer:

For Screen1, set AlignHorizontal property to Center.

Change the BackgroundColor property to Dark Gray.

Uncheck Scrollable.

Change the Title property to Camcorder (touch screen to play selected clip).

 - the comment was added due to the way the VideoPlayer component works

Drag and drop a HorizontalArrangement onto the Viewer layout.

Set it's Width to Fill Parent.

 - this will be the container for our app's buttons

 - now we will create our camcorder's record button

Drag and drop a Button component inside the HorizontalArrangement.

Change it's BackgroundColor to Red, set Font to Bold and Text to Record.

 - the ListPicker component will hold links to our video clips in a 'list' to 'pick' from

Drag and drop a ListPicker component next to the Record button.

 - you will see a blue insertion guide line indicating where it will be inserted

Set the title to Pick a video clip. 

Set the Width to Fill Parent.

Drag and drop a VideoPlayer component to the Viewer layout.

Set it's Width to 320 (px).

 - by setting the width to 320 we insure that the video display will not be distorted if the user rotates the device

Drag out a Camcorder component to the Viewer layout.

 - it will jump down to the Non-visible section

 - it will be used to open the device's built-in video recorder app and accept the link to the video clip after it is recorded

 - we need a way to permanently store our video clips - the TinyDB component can do this

Drag and drop a TinyDB component to the Viewer layout.

 - note that it also will appear below the screen layout under Non-visible components

Blocks Editor:

 - the app's blocks can be thought of as performing four general functions:

• get links to any saved video clips
  
• record a video clip
  
• save a recorded video clip
• watch a recorded video clip

 - that is what the following blocks do:

(if you know how to assemble the blocks below without help, and you understand what they each do, your instructor may allow you

to use the summary screen capture below to do the assembly, then skip to the end of the exercise) 

- *** BEGIN get links to any saved video clips ***

 

 - the app stores video clip links in a TinyDB database

 - if the app has never saved any video clips before, the database is empty

 - if any video clips have been saved, then the app needs to put their links into a list so the user can pick one to view

Drag and drop a Screen1.Initialize block to the Blocks Editor canvas.

 - this block will execute it's contents when the app first opens so we will use it handle these tasks 

 - if we tell the app 'put my saved links into a list' but there are none, it cannot comply and an error message will display

 - to avoid this condition, we use an if block to ask first if there are any video links, and if so, to put them into a list

 - using a banking analogy: A customer with a $0 balance approaches a bank teller and states: 'If my account balance is not $0, I will make a withdrawal.'

   The teller need only reply that the the account balance is in fact $0, so the customer leaves.

   Compare that to the customer stating 'I will make a withdrawal.' The teller cannot comply. (the error message)

 - getting closer to the way the app understands this request we might say: 'If the database is not empty, then put the links into a list.'

 - finally, the app understands the request in this way 'If it is not true that the database is empty, then put the links into a list.'

 - we will now invent the blocks to do this

Drag and snap an if block from the Built-In, Control panel into the Screen1.Initialize block. 

 - the if block executes it's contents if a condition is True 

Drag and snap a Logical not block to the test socket of the if block. 

 - the not block negates or opposes the logic of what comes after it: not(False) is True; not(True) is False

 - if AI had a block something like 'is text nonempty?' then we would not need this block

Drag and snap an is text empty? block to the not block.

 - so far we have 'If it is not the case that some text is empty, ...'

Drag and snap a TinyDB1.GetValue block to the text socket of is text empty?. 

 - 'If it is not the case that the text is empty in some database, ...'

 

Drag and snap a text block into the tag socket of the TinyDB1.GetValue block.

Change the text value to videos.

 - this will be the name of the database that contains a list of links to your saved video clips 

 - we now have a complete test worded the way the app likes it: 'If it is not True that the text is empty in the videos database, then-do ...'

 - for us humans this just means 'If the videos database contains some links, then do something ...'

 - the then-do section of the if block needs to put the links from the database into a list for us to pick from (a ListPicker)

Drag and snap a [set ListPicker1.Elements to] block inside the then-do section of the if block.

 - this block will accept the list stored in the videos database

Drag and snap a TinyDB1.GetValue block with attached videos tag to the to socket of the ListPicker1.Elements block

 - this reads the stored list from the database and stores it in the ListPicker where we can view and pick from the links

 

- *** END get links to any saved video clips ***

- *** BEGIN record a video clip ***

Drag and drop a Button1.Click block.

 - this is the Record button made in the Screen Designer

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

 - when the user touches and releases the Record button the Camcorder1.RecordVideo block will open the device's built-in video recorder app

- *** END record a video clip ***

 - about your device's default video recording app:

 - since a device's default video recording app will vary, we will describe the user's actions in general terms

 - (a preview window will display what the camera sees)

 - press a start button to begin recording

 - press a stop button to end recording

 - press a done button to save and exit the app, returning a link to the video clip to AI

 - or press a cancel button to discard the video clip and return to AI

 - if the recording was cancelled, then your AI will take no further action

 - if the recording was saved, then, if present, an AI Camcorder AfterRecording event block with an attached name block containing the link will be triggered 

- *** BEGIN  save a recorded video clip  ***

 - the Camcorder AfterRecording event block will be used to add the returned link to the ListPicker and save it in the TinyDB database

 

Drag and drop a Camcorder1.AfterRecording block.

 - the attached [name clip] block will receive the link to the saved video clip returned by the device's default video recording app

Drag and snap an add items to list block inside the Camcorder1.AfterRecording block.

Drag and snap a ListPicker1.Elements block to the list socket of the add items to list block

Drag and snap a [value clip] block from the My Blocks, My Definitions panel to the first item socket of the add items to list block.

 - these blocks add the new link to the ListPicker list

Drag and snap a TinyDB1.StoreValue block below the add items to list block.

Drag and snap a text block to the tag socket of the TinyDB1.StoreValue block and change it's text to videos.

Drag and snap a ListPicker1.Elements block to the valueToStore socket of the TinyDB1.StoreValue block.

 - the updated list of links will be saved in the videos database

Drag and snap a ListPicker1.Selection block below the TinyDB1.StoreValue block and attach a [value clip] block to it.

 - ListPicker1.Selection will contain the link to the added clip

Drag and snap a ListPicker1.Text block below the ListPicker1.Selection block and attach a [value clip] block to it.

 - the user will see that the added link displayed in the text of the ListPicker button when these blocks execute

 - *** END  save a recorded video clip  *** 

- *** BEGIN  watch a recorded video clip  ***

 - whatever link is displayed in the text of the ListPicker button will play that link's video clip when the user touches the video player area of the screen

 - whenever they make a selection with the ListPicker, the ListPicker1.AfterPicking event block will be executed

 - the app will tell the VideoPlayer component to play the video clip at the selected link's location

 Drag and drop a ListPicker1.AfterPicking block

Drag and snap a [ set VideoPlayer1.Source to] block inside the ListPicker1.AfterPicking block.

Drag and snap a ListPicker1.Selection block to the VideoPlayer1.Source block.

 - these blocks will tell the VideoPlayer which clip to play

Drag and snap a VideoPlayer1.Start block below the VideoPlayer1.Source block

 - this loads the video link stored in VideoPlayer1.Source into the VideoPlayer, but the user must touch the screen to begin playback

 - *** END  watch a recorded video clip  ***

Now package and test the app on an Android device.

 - the output should be similar to this:

Challenge: Can you add a button to Pause the VideoPlayer?