Skip to content

Instantly share code, notes, and snippets.

@dhaniksahni
Last active April 7, 2021 19:56
Show Gist options
  • Save dhaniksahni/dd1b389664530be8d7d940b238f7fc11 to your computer and use it in GitHub Desktop.
Save dhaniksahni/dd1b389664530be8d7d940b238f7fc11 to your computer and use it in GitHub Desktop.
Capture Image using WebRTC in Lightning Component
<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>
<?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>
.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);
}
({
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);
}
})
@sonakshisharma9
Copy link

Sir, do we save hat image in the org?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment