Unveiling the Power of WebRTC: Transforming Communication on the Web — Part II

In part I of this series, we covered the architecture of webrtc and a code to show webcam output on the browser using webrtc API.

Let’s learn about how to take a profile picture using webrtc API.

Here, the goal is to create an ability to take a picture of the video stream from a webcam programmatically and display it in the image tag. Here is the functionality in action

Let's take a look at the code.

Let's first create a button called “Create Profile Picture” in an index.ejs

<button id="getProfilePic" type="button" autofocus="true">
    Create Profile Picture
</button>

We also need canvas element on which we’ll draw the temporary image.

<canvas id="profileCanvas" style="display: none;"></canvas>

Then we need <Img> element in which we’ll display the image captured and drawn on the canvas.