Capture Image using WebCAM in Lightning Component

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.