Trigger video capture

Two options for triggering a video capture event are discussed here. One option is to make exclusive use of the touch() signal with an onTouch() signal handler. Another option is to use a UI control, such as an action item, along with a custom function to trigger the video capture process.

Use the onTouch() signal handler

The following QML code sample shows you how to use the touch() signal along with an onTouch() signal handler to record video in response to the user touching the screen. When the user touches the screen, the touch() signal is emitted, and the onTouch() signal handler allows your app to call the startVideoCapture() function to begin recording video.

import bb.cascades.multimedia 1.0
import bb.multimedia 1.0
import bb.cascades 1.2
import bb.system 1.2
 
Page {
    // ...
 
    content: Container {
        attachedObjects: [        
            SystemSound {
                id: videoStartSnd
                sound: SystemSound.RecordingStartEvent
            },
            SystemSound {
                id: videoStopSnd
                sound: SystemSound.RecordingStopEvent
            }
        ]
        // ...
 
        Camera {
            id: qmlCameraObj             
            property bool recording
 
            // ...
 
            onTouch: {
                if (event.isDown() && !recording) {
                    // Set the flag.
                    recording = true
                    
                    // Play the RecordingStartEvent
                    // system sound.
                    videoStartSnd.play()
                    
                    // Start recording video when the user
                    // first touches the screen.
                    qmlCameraObj.startVideoCapture()
                }
                else {                
                    // Set the flag.
                    recording = false
                    
                    // Play the RecordingStopEvent
                    // system sound.
                    videoStopSnd.play()
                    
                    // Stop the video recording.
                    qmlCameraObj.stopVideoCapture()
                }
            } 
            // ... 
        }
    }
}

Use an action item to record video

The following QML code sample shows you how to start and stop video recording with an action item, and a custom function that toggles between starting and stopping video recording. Our toggle function, called toggleRecordStopItems(), makes calls to our startVideoRecording() function or our stopVideoRecording() function to start and stop video recording. As you can see, we also use the toggleRecordStopItems() function to set the icon image for each of these actions.

Page {
    // ...
    
    content: Container {

        attachedObjects: [
            // ...
            
            SystemSound {
                id: videoStartSnd
                sound: SystemSound.RecordingStartEvent
            },
            SystemSound {
                id: videoStopSnd
                sound: SystemSound.RecordingStopEvent
            }
        ]
                
    // ...
    }
    actions: [
        ActionItem {
            id: aiRecordStop
            title: "Record"
            ActionBar.placement: ActionBarPlacement.OnBar

            imageSource: "asset:///ic_rec_red.png"
            accessibility.description: "Record video"
            onTriggered: {
                // This function starts and stops
                // video recording.
                toggleRecordStopItems()
            }
        }
        // ...
    ]
    
    // Toggles the action items and their actions.
    function toggleRecordStopItems() {
        if (aiRecordStop.title == "Record") {
            aiRecordStop.title = "Stop"
            aiRecordStop.imageSource = "asset:///ic_stop.png"

            startVideoRecording()
        } else {
            aiRecordStop.title = "Stop"
            aiRecordStop.imageSource = "asset:///ic_rec_red.png"

            stopVideoRecording()
        }
    }    
    function startVideoRecording() {
        videoStartSnd.play()
        qmlCameraObj.startVideoCapture()
    }
    
    function stopVideoRecording() {
        videoStopSnd.play()
        qmlCameraObj.stopVideoCapture()
    }
} // End of Page.

Last modified: 2014-01-07

comments powered by Disqus