html snapshot控件,javascript - HTML - How to take snapshot from video stream? - Stack Overflow

I am trying to add a button to a webpage that takes a snapshot of a video stream, shows it on the same webpage, and also saves it to a local directory.

The video is streaming from a server and is shown using an img tag. I can see the video but the capture button doesn't do anything:

Capture

Camera Footage

Captured Image

// The button to capture the image

var btnCapture = document.getElementById( "btn-capture" );

// The stream & capture

var stream = document.getElementById( "stream" );

var capture = document.getElementById( "capture" );

var photo = document.getElementById("photo");

// Attach listeners

btnCapture.addEventListener( "click", captureSnapshot );

// Capture Snapshot

function captureSnapshot() {

var ctx = capture.getContext( "2d" );

ctx.drawImage( stream, 0, 0);

photo.src = capture.toDataURL('image/png');

}