Capture Image using WebRTC in Lightning Component

captureImageWebCam.cmp

<aura:component controller="ImageController"  implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <lightning:card title="Capture Screen">
        <lightning:layout horizontalAlign="spread">
            <lightning:layoutItem padding="around-small">
                <h1>
                    MDN - WebRTC: Still photo capture demo
                </h1>
                <div class="camera">
                    <video id="video">Video stream not available.</video>
                    <button id="startbutton" onclick="{!c.doInit}">Take photo</button> 
                    <button id="clearbutton" onclick="{!c.doInit}">Clear Photo</button> 
                </div>
            </lightning:layoutItem>
            <lightning:layoutItem padding="around-small">
                <canvas id="canvas">
                </canvas>
            </lightning:layoutItem>
            <lightning:layoutItem padding="around-small">               
                <h1>
                    Captures Image
                </h1>
                <div class="output">
                    <img id="photo"  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="The screen capture will appear in this box."/> 
                    <button id="saveButton" onclick="{!c.savePhoto}">Save photo to record</button> 
                </div>
            </lightning:layoutItem>
        </lightning:layout>
        
    </lightning:card>
</aura:component>

captureImageWebCam.cmp-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<AuraDefinitionBundle xmlns="urn:metadata.tooling.soap.sforce.com" fqn="accessWebCam">
    <apiVersion>39.0</apiVersion>
    <description>Capture Image Using Laptop Webcam</description>
</AuraDefinitionBundle>

captureImageWebCam.css

.THIS #video {
  border: 1px solid black;
  box-shadow: 2px 2px 3px black;
  width:320px;
  height:240px;
}

.THIS #photo {
  border: 1px solid black;
  box-shadow: 2px 2px 3px black;
  width:320px;
  height:240px;
}

.THIS #canvas {
  display:none;
}

.THIS .camera {
  width: 340px;
  display:inline-block;
}

.THIS .output {
  width: 340px;
  display:inline-block;
}

.THIS #startbutton {
  display:inline-block;
  position:relative;
  margin-left:60px;
  margin-right:auto;
  bottom:22px;
  background-color: rgba(0, 150, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2);
  font-size: 12px;
  font-family: "Lucida Grande", "Arial", sans-serif;
  color: rgba(255, 255, 255, 1.0);
}

.THIS .contentarea {
  font-size: 16px;
  font-family: "Lucida Grande", "Arial", sans-serif;
  width: 760px;
}

.THIS #clearbutton {
  display:inline-block;
  position:relative;
  margin-left:70px;
  margin-right:auto;
  bottom:22px;
  background-color: red;
  border: 1px solid rgba(155, 155, 255, 20);
  box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2);
  font-size: 12px;
  font-family: "Lucida Grande", "Arial", sans-serif;
  color: rgba(255, 255, 255, 1.0);
}

captureImageWebCamController.js

({
    doInit : function(component, event, helper) {
       
        var width = 400; // scale the photo width to this
        var height = 0; // computed based on the input stream

     	var streaming = false;
        var video = null;
        var canvas = null;
        var photo = null;
        var startbutton = null;
        video = document.getElementById('video');
        canvas = document.getElementById('canvas');
        photo = document.getElementById('photo');
        startbutton = document.getElementById('startbutton');
        var clearbutton = document.getElementById('clearbutton');
        
        navigator.mediaDevices.getUserMedia({video: true, audio: false})
        .then(function(stream) {
            video.srcObject = stream;
            video.play();
        })
        .catch(function(err) {
            console.log("An error occurred: " + err);
        });
        
        video.addEventListener('canplay', function(ev){
            if (!streaming) {
                height = video.videoHeight / (video.videoWidth/width);
                
                // Firefox currently has a bug where the height can't be read from
                // the video, so make assumptions if this happens.
                
                if (isNaN(height)) {
                    height = width / (4/3);
                }
                
                video.setAttribute('width', width);
                video.setAttribute('height', height);
                canvas.setAttribute('width', width);
                canvas.setAttribute('height', height);
                streaming = true;
            }
        }, false);
        
        startbutton.addEventListener('click', function(ev){
            takepicture();
        }, false);
        
        clearbutton.addEventListener('click', function(ev){
            clearphoto();
        }, false);
        
        
        clearphoto();
      
        function clearphoto() {
            var context = canvas.getContext('2d');
            context.fillStyle = "#AAA";
            context.fillRect(0, 0, canvas.width, canvas.height);
            
            var data = canvas.toDataURL('image/png');
            photo.setAttribute('src', data);
        }
        
      	function takepicture() {
            var context = canvas.getContext('2d');
            if (width && height) {
                canvas.width = width;
                canvas.height = height;
                context.drawImage(video, 0, 0, width, height);
                var data = canvas.toDataURL('image/png');
                photo.setAttribute('src', data);
            } else {
                clearphoto();
            }
        }
        
    },
    savePhoto: function(component, event, helper) {
       	var image = document.getElementById("photo");
        var action = component.get('c.saveImageFile'); 
       	action.setParams({
            "imageUrl" : photo.getAttribute('src'),
            "recordId" : component.get('v.recordId')
        });
        action.setCallback(this, function(a){
            var state = a.getState(); // get the response state
            if(state == 'SUCCESS') {
                component.set('v.sObjList', a.getReturnValue());
            }
        });
        $A.enqueueAction(action);
	}
})

Sir, do we save hat image in the org?