How I can get screenshot from html video tag

Question

Can somebody give me an idea of how to grab a photo from an HTML video tag?

I have an aspx page with a video tag.

<div id="container">
    <video autoplay="true" runat="server" id="videoElement">
    </video>
</div>

I want to take a screenshot of it on the button click.

I will be really grateful if I can get any lead.

Answer 1

I have found the solution for how to grab a screenshot.

First Solution

//Create a new bitmap.
var bmpScreenshot = new Bitmap(Screen.PrimaryScreen.Bounds.Width,
                               Screen.PrimaryScreen.Bounds.Height,
                               PixelFormat.Format32bppArgb);

// Create a graphics object from the bitmap.
var gfxScreenshot = Graphics.FromImage(bmpScreenshot);

// Take the screenshot from the upper left corner to the right bottom corner.
gfxScreenshot.CopyFromScreen(Screen.PrimaryScreen.Bounds.X,
                            Screen.PrimaryScreen.Bounds.Y,
                            0,
                            0,
                            Screen.PrimaryScreen.Bounds.Size,
                            CopyPixelOperation.SourceCopy);

// Save the screenshot to the specified path that the user has chosen.
bmpScreenshot.Save("Screenshot.png", ImageFormat.Png);

Second Solution:

Here's a reference-style link on codepen.io.

Visit this link, works on both desktop and mobile browsers.