In real time projects, some time we have requirement to capture customer/user image in application processing at real time. In this article we will see, how to capture image using lightning component.
For capturing image, we can use browser’s inbuilt WebRTC functionality to access the camera on a laptop, computer or mobile phone with WebRTC support and take a photo with it.
WebRTC (Web Real-Time Communications) is a technology which enables Web applications and sites to capture and optionally stream audio and/or video media, as well as to exchange arbitrary data between browsers without requiring an intermediary.
We will use Media Capture and Streams API of WebRTC to get streaming audio and video data. MediaDevices.getUserMedia() method will first ask permission to access your WebCam and audio device. If permission is granted to access video camera then it will return stream as promise otherwise it will throw NotAllowedError.
navigator.mediaDevices.getUserMedia({video: true, audio: false}) .then(function(stream) { video.srcObject = stream; video.play(); }) .catch(function(err) { console.log("An error occurred: " + err); });
Once stream is captured it will play in video element using video.play() function.
<video id="video">Video stream not available.</video>
canplay event of above video element alerts that the video is ready to start playing. We can capture video information using this element like video player’s height and width etc.
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); } canvas.setAttribute('width', width); canvas.setAttribute('height', height); streaming = true; } }, false);
We have used canplay event to set canvas properties. Image will be draw in that canvas element from video.
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); }
canvas.toDataURL method returns a data URI containing a representation of the image in the format which we specified in type parameter. This data URI we can save in any salesforce record for application processing.
Complete lightning component Code :
Complete Apex Code :
To save captured image in file or attachement object, we have to use apex. Both type of methods are written in ImageController apex class, to store in file or attachement object. Based on your requirement call appropriate method from lighting component method (savePhoto).
Demo:
Reference:
https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos
Updated: On 8-Apr-2021 for Saving captured image.
View Comments (37)
This is Working on mobile phones but I want to open the back camera of my phone not front
Hello Utkarsh,
You have to use setting { audio: true, video: { facingMode: { exact: "environment" } } } in function navigator.mediaDevices.getUserMedia({video: true, audio: false}).
Refer API link at https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
Thank You,
Dhanik
Hi Dhanik,
This is an excellent post. I was looking at something similar for my Einstein project. I work for the Platforms & Einstein team at Salesforce.
I was trying to use your component but it gives a blank on the screen. Would you know how to debug it?
Regards,
Vineet
vkaul@salesforce.com
Hello Vineet,
Have you checked lightning component version? It should be 39 or you can use VF page for this. Locker service is blocking navigator.mediaDevices so you have to change version to 39.
Thank You,
Dhanik
http://salesforcecodex.com/
I am facing the following error: cannot read property 'getUserMedia' of undefined.can u help?
Hey S,
Have you changed Lightning component version to 39. As after this locker service create issue and you will get undefined or null.
Thank You,
Dhanik
Do we save the image in the org?
Hello Son,
We can save image in any Salesforce record. Check takepicture function, data is having image.You can store it in org as well.
Thank You,
Dhanik
Sir,
DO we save the image in the org?
Thanks,
Hello Sonakshi,
We can save image in any Salesforce record. Check takepicture function, data is having image.You can store it in org as well.
Thank You,
Dhanik
Thnx Bro..
It helps a lot, I mean it.
Thank You Merajul.
Hi Dhanik,
its very helpful to start on this usecase, but i am getting below error do you got any idea.
[Cannot read property 'getUserMedia' of undefined]
Hey Suresh,
Please check API version. It is only supporting till 39.
Thank you,
Dhanik
Does it work on iPhones? I'm using the Salesforce App and it doesn't work on there but it does work on desktop browser.
Yes, it is not working always in mobile. Some time it works for front camera but not with back camera. You can use mobile native code to get camera access.
Thank You,
Dhanik
hi Dhanik. thank you a lot for this article. could you please say if it is possible to use this element (or another one) to record video from the web cam?
Hello Stepan,
You can use video element for this purpose. See documentation https://developers.google.com/web/fundamentals/media/recording-video for this. Only problem will be - you have to use that in lightning aura component and make component api version 39.
Thank You,
Dhanik
Can someone please share the code to save the captured image as attachment to a record?
Hey Urvi,
See post https://salesforce.stackexchange.com/questions/46486/create-attachment-in-apex-to-store-encoded-signature for saving record.
You can use data element (line#74) of captureImageWebCamController.js to store value in record.
Thank You,
Dhanik
Hi,
I tried using this-
Attachment a = new Attachment( ParentId = parentid,Name=name+'.png', Body=EncodingUtil.base64Decode(data), ContentType='image/png');
insert a;
in apex function where data is from line 74, but it doesn't insert record or show the attachment in notes and attachments related list either.