CaptureSignature

CaptureScreen.cmp

<aura:component controller="CommandController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="commandText" type="string" />
    <lightning:card title="Capture Screen">
        
        <p>
            <button id="start" onclick="{! c.takeScreenShot }">Start Capture</button>&nbsp;
            <button id="stop">Stop Capture</button>
        </p>
        <div style="display: none;">
            <video id="video" autoplay="true"></video>
            <img id="img" src=""/>
            <canvas style="display:none;" id="canvas"></canvas>
        </div>
    </lightning:card>
    
</aura:component>

CaptureScreen.cmp-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>39.0</apiVersion>
    <description>A Lightning Component Bundle</description>
</AuraDefinitionBundle>

CaptureScreen.css

.THIS #video {
    border: 1px solid #999;
    width: 98%;
    max-width: 860px;
  }
  
  .THIS .error {
    color: red;
  }
  
  .THIS .warn {
    color: orange;
  }
  
  .THIS .info {
    color: darkgreen;
  }

CaptureScreenController.js

({
    
    takeScreenShot: function(component, event, helper) {
        
        const videoElem = document.getElementById("video");
        const startElem = document.getElementById("start");
        const stopElem = document.getElementById("stop");
        
        const canvas = document.createElement('canvas');
        
        var displayMediaOptions = {
            video: {
                cursor: "never"
            },
            audio: false
        };
        
        // Set event listeners for the start and stop buttons
        startElem.addEventListener("click", function(evt) {
            startCapture(displayMediaOptions);
        }, false);
        
        stopElem.addEventListener("click", function(evt) {
            stopCapture();
        }, false);
        
        async function startCapture(displayMediaOptions) {
            try {
                
                navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
                .then( mediaStream => {	
                    videoElem.srcObject = mediaStream;
                    videoElem.onloadedmetadata = e => {
                    videoElem.play();
                    videoElem.pause();
                    
                    canvas.width = videoElem.videoWidth;
                    canvas.height = videoElem.videoHeight;
                    canvas.getContext('2d').drawImage(videoElem, 0, 0);
                    
                    
                      
                    var dataUrl=canvas.toDataURL('image/jpg').replace(/^data:image\/(png|jpg);base64,/, '');
                     
                    helper.sendEmailtoAdmin(component, event,'data:image/jpg;base64,'+dataUrl);
                    
                };
                }).catch( err => console.log(`${err.name}: ${err.message}`));
                
            } catch(err) {
                console.error("Error: " + err);
            } 
            
        }
        // Save | Download image
        function downloadImage(data, filename = 'untitled.jpeg') {
            var a = document.createElement('a');
            a.href = data;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
        }
        
        function stopCapture(evt) {
            let tracks = videoElem.srcObject.getTracks();
            
            tracks.forEach(track => track.stop());
            videoElem.srcObject = null;
        }
        
    }
});

CaptureScreenHelper.js

({
   sendEmailtoAdmin: function(cmp,event,blob)
    {
        debugger;
       var action = cmp.get("c.sendErrorEmail");
        action.setParams(
            {
                data:blob
            });
        
        // Create a callback that is executed after 
        // the server-side action returns
        action.setCallback(this, function(response) {
            var state = response.getState();
            debugger;
            if (state === "SUCCESS") {
                var data=response.getReturnValue();
                if(data!=null)
                {
                   alert('Email Sent');
                }
            }
            else if (state === "INCOMPLETE") {
                // do something
            }
                else if (state === "ERROR") {
                    var errors = response.getError();
                    if (errors) {
                        if (errors[0] && errors[0].message) {
                            console.log("Error message: " +  errors[0].message);
                        }
                    } else {
                        //console.log("Unknown error");
                    }
                }
        });
        $A.enqueueAction(action);
    }
})

CommandController.apxc

public class CommandController {
     @Auraenabled
    public static boolean sendErrorEmail(string data)
    {
        system.debug(data);
        if(data!=null)
        {
            list<Messaging.singleEmailMessage> mails=new list<Messaging.SingleEmailMessage>();
            Messaging.singleEmailMessage mail=new Messaging.SingleEmailMessage();
            
            list<Messaging.EmailFileAttachment> lstefa = new list<Messaging.EmailFileAttachment>();
            
            Messaging.EmailFileAttachment efa = new Messaging.EmailFileAttachment();
            
            efa.setfilename('ErrorFile.jpg');
            efa.setinline(true);
            efa.contenttype='image/jpg';
            Blob body = Encodingutil.base64Decode(data.substring(data.indexOf(',') + 1));
            efa.setbody(body);
            lstefa.add(efa);
            mail.setfileattachments(lstefa);
            mail.setToAddresses(new List<string>{'[email protected]'});
            mail.setSubject('Error in Application');
            mail.setPlainTextBody('Hello Admin, I am getting some error. Screen shot is attached.  Please check and suggest on it.');
            mails.add(mail);
            messaging.sendEmail(mails);
        }
        return true; 
    }
}