I am trying to grab the video element of a webpage and save the image locally.
In my code I have in my C# project:
this.webView.Source = new Uri( localhost:4000/watcher.html );
I'm running a local node server with javascript to display a video of a camera feed and in my watcher.html it looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Viewer</title>
<meta charset="UTF-8" />
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div class="controls">
<button id="button" onClick="changeCamera(0)">Camera One</button>
<button id="button2" onClick="changeCamera(1)">Camera Two</button>
</div>
<video playsinline autoplay muted></video>
<script src="/socket.io/socket.io.js"></script>
<script src="watch.js"></script>
</body>
</html>
My c# project loads the webpage fine, but How can I grab a picture of the video element and not get the entire screen? I created the following function below to take a picture of the entire screen just to test, it works, but I have no clue on how I can manipulate the webView2 to get my image. Any input on how to achieve this would be amazing. Thanks.
private void TakePicture(string fileName)
{
Bitmap screenGrab = new Bitmap( Screen.PrimaryScreen.Bounds.Width, Screen.PrimaryScreen.Bounds.Height, System.Drawing.Imaging.PixelFormat.Format32bppArgb );
Graphics g = Graphics.FromImage( screenGrab );
g.CopyFromScreen( Screen.PrimaryScreen.Bounds.Left, Screen.PrimaryScreen.Bounds.Top, 0, 0, screenGrab.Size, CopyPixelOperation.SourceCopy );
screenGrab.Save( fileName + ".jpg", ImageFormat.Jpeg );
}
P.S. I already explored trying to export the jpeg directly from my node server, I spent many many hours trying to get it to work and now I'm exploring other options.