Control the Video Recorder from another Lightning Component

You can control the behaviour of the video recorder from another component, simply firing a Video Event. The commands that you can push to the recorder are:

Select the Screen that you want to record, in case in which you are helping your users in automating the submission of a screen recording
Start the recording
Stop the recording

As an example, we want to automate the process of firing up a screen recording from a Salesforce Community page. We will be then creating a new Lightning Component, and we will add the following code to its body:

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler event="nativevideo:VideoRecordingEvent" action="{!c.handleVideoRecordingEvent}"/>
    <aura:registerEvent type="nativevideo:VideoEvent" name="VideoEvent" />
    <div aura:id="recordingCnt" style="width:100%;height:100%;"/>
</aura:component>

This code prepares an empty container, a “div”, that will host the NativeVideo recorder, and more importantly it’s listening for any “VideoRecordingEvent” to happen and capable of firing up one or more “VideoEvent”.

Let’s now take a look at the controller for this new Lightning Component:

({
  doInit : function(component, event, helper) {
    // Add the recorder 
    var runningId = component.get('v.recordId');
    $A.createComponent(
      "nativevideo:VideoRecord",
      {
        "aura:id": "recordingCase",
        "updateObjectName" : "Case",
        "updateField" : "Video__c",
        "updateRecordID" : runningId,
        "countdown" : "0",
        "pickSnapshot" : "false",
        "screenRecordingAllowed" : "true",
        "allowVideoUpload" : "false",
        "videoVaultAllowed" : "false",
        "videoApprovedOrigin" : "https://" + window.location.host
      },
      function(newComponent, status, errorMessage) {
        if (status === "SUCCESS") {
          component.find("recordingCnt").set("v.body", newComponent);
        } else if (status === "INCOMPLETE") {
          console.log("No response from server or client is offline.");
        } else if (status === "ERROR") {
          console.log("Error: " + errorMessage);
        }
      }
    );
  }, 
  
  handleVideoRecordingEvent : function(component, event) {
    if(event != null) {
      if(event.getParam('eventType') === 'video_approved') {
        $A.get("e.force:closeQuickAction").fire();
      } else if(event.getParam('eventType') === 'video_initialised') {
        // Activate the screen recording
        var vRecEvent = $A.get("e.nativevideo:VideoEvent");
        vRecEvent.setParams({'eventType':'RECORD_SELECT_SCREEN'});
        vRecEvent.fire();
      } else if(event.getParam('eventType') === 'video_access_granted') {
        // Start the recording
        var vRecEvent = $A.get("e.nativevideo:VideoEvent");
        vRecEvent.setParams({'eventType':'RECORD_START'});
        vRecEvent.fire();
      }
    }
  }
})

The “doInit” function, invoked by the Lightning framework once the component has been fully loaded, will dynamically create and embed a new NativeVideo Record component, hosting the video recording capabilities.

Once the video recording component has been initialised, a “video_initialised” event will be triggered, and the “handleVideoRecordingEvent” will be invoked. This function will then create a new “VideoEvent” event, set the command to action as Please select which screen do you want to record, and fires up. This event will be caught by the NativeVideo recorder, executing the screen selection.

Similarly, once the user has selected the screen, the NativeVideo Recorder will broadcast a “video_access_granted” event, and this new component will reply back with a command to automatically kick off the recording.

Following this example, the recording will start and the user will stop it once finished. Also the “stopping” event can be controlling, just sending a “VideoEvent” of type “RECORD_STOP”.