Video recording process and Lightning events

In this section we will be describe the lifecycle of a video, listing all of the stages that it goes through, from the initial Recording to Ready for Streaming. The majority of transitions between statuses triggers a Lightning event, that can be listened for in your custom Lightning components wrapping the standard VideoRecord one.

Fundamentally, once the user has pressed the Stop button or when the recorder has reached the natural end of a video interview, the upload automatically starts. The user can immediately playback the video, deciding to retake the recording or waiting for the end of the upload phase.

Once the video has been fully uploaded, the "video_uploaded" Lightning event is triggered.
The following stage in the process is to early validate the video file that has been received, and once this validation has been successfully completed, a "video_verified" event is triggered.
Again the processing kicks in, preparing the video in the formats required. Once this stage is completed, a "video_processed" event is triggered and the user is prompted with the Approve button.
Once the user has pressed the Approve button, the last event is fired "video_approved". That's the end of the journey.

To recap, the steps are:
video_uploaded >>> video_verified >>> video_processed >>> video_approved

For each transition, a Lightning Event "VideoRecordingEvent" is triggered, passing the following attributes:

• "eventType", with the strings mentioned above, describing the status that has been just reached
• "videoId", Salesforce ID of the Video record
• "videoExternalId", external ID of the video on the video platform
• "referenceRecordId", Salesforce ID of the target or junction record, depending on the scenario configured

OK, so now that we are aware of the process each video goes through and of the key transition events... how do we listen for it in our Lightning components?

The steps are fundamentally two: first of all, open the component and add the following tag:

<aura:handler event="nativevideo:VideoRecordingEvent" action="{!c.handleVideoRecordingEvent}"/>

This line instructs the component to listen for a Lightning Event defined in the nativevideo namespace, called VideoRecordingEvent. Once this event has been received, the component will invoke the handleVideoRecordingEvent function defined in its controller. Let's take a look at that function:

handleVideoRecordingEvent : function(component, event) {
    if(event != null && event.getParam('eventType') === 'video_approved') {
        $A.get("e.force:closeQuickAction").fire();
    }
}

As you can see in the code, once the event is received, we double check to action just for the final video_approved event, when we finally close the popup of a quick action. 
This is a simple example, but any custom logic can be built just listening to events and leveraging the data specified alongside them.

The full list of events, by "eventType" are:

1. video_initialised: the video recorder component has been initialised on the hosting page
2. video_access_forbidden: the camera has not been granted access to
3. video_access_granted: the camera has been granted access to
4. video_recording: the recording has started
5. video_stop_recording: the recording has been stopped
6. video_uploading: the uploading has started
7. video_uploading_progress (info on how much it has been uploaded vs the total amount): the upload is in progress
8. video_uploaded: the upload has been completed
9. video_verified: the video has been verified (we recommend to listen to this even before destroying the recorder component or moving to another page)
10. video_processed: the media backend confirms that the processing has been completed
11. video_rerecord: the user has selected to retake the recording
12. video_approved: the user has approved this video
13. video_vault: the video has been selected from the video vault

The VideoRecordingEvent specifies the following attributes:

• eventType, to define which type of event this is
• videoExternalId, identifier of the video on the media server
• videoId, Salesforce ID of the video
• referenceRecordId, Salesforce ID of the record associated with this video
• vaultId, Salesforce ID of the video vault used to create this video
• videoUploaded, how much has been uploaded so far
• videoTotal, total size of this video
• containerDomId, identifier of the element in the HTML that hosts this instance of the video recorder

Conclusion & Next Steps

In this section we have hopefully made more clear the process followed by each video, from the upload onwards. We have then discovered how to listen and react to these events, directly from your own Lightning component. In the next section we will wrap up the advanced section for the recording component, listing all the available parameters.