HOW TO take a screenshot of a video frame
To capture a screenshot of a frame of a video, you can store it in a canvas element using the drawImage() function using JavaScript & display it using img element or download it.
To capture the image using this technique, the video should be served through a <video> tag, not an iframe or object or embed.
// Get handles on the video and canvas elements
var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
// Get a handle on the 2d context of the canvas element
var context = canvas.getContext('2d');
// Define some vars required later
var w, h, ratio;
// if you want to preview the captured image,
// attach the canvas to the DOM somewhere you can see it.
You need to set it to the size at which you want to save the resulting image. You can have a fixed dimension or you can set it to a multiple of the video size. Just make sure you run that inside a 'loadedmetadata' event on the video, because the video dimensions won't be available right away.
// Add a listener to wait for the 'loadedmetadata' state so the video's dimensions can be read
video.addEventListener('loadedmetadata', function() {
// Calculate the ratio of the video's width to height
ratio = video.videoWidth / video.videoHeight;
// Define the required width as 100 pixels smaller than the actual video's width
w = video.videoWidth - 100;
// Calculate the height based on the video's width and the ratio
h = parseInt(w / ratio, 10);
// Set the canvas width and height to the values just calculated
canvas.width = w;
canvas.height = h;
}, false);
// Takes a snapshot of the video
function snap() {
// Define the size of the rectangle that will be filled (basically the entire element)
context.fillRect(0, 0, w, h);
// Grab the image from the video
context.drawImage(video, 0, 0, w, h);
}
The jpg file can be saved as a Data URI or a Base64-encoded JPEG image.
//convert to desired file format
var dataURI = canvas.toDataURL('image/jpeg'); // can also use 'image/png'
It's up to you what to do with it. You can place it directly into an img element by just setting it to the src: myImage.src = dataUri;
For this script to work, the video must be on the same domain, port and protocol to avoid a cross origin browser security issue.
Web pages often make requests to load resources on other servers.
A cross-origin request is a request for a resource (e.g. style sheets, iframes, images, fonts, or scripts) from another domain.
CORS is used to manage cross-origin requests.
CORS stands for Cross-Origin Resource Sharing, and is a mechanism that allows resources on a web page to be requested from another domain outside their own domain. It defines a way of how a browser and server can interact to determine whether it is safe to allow the cross-origin request.
CORS allows servers to specify who can access the assets on the server, among many other things.
The opposite of cross-origin requests is same-origin requests.
crossorigin content attribute on media elements is a CORS settings attribute.
If the value of crossorigin attribute is set to anonymous, request uses CORS headers and credentials flag is set to 'same-origin'. There is no exchange of user credentials via cookies, client-side SSL certificates or HTTP authentication, unless destination is the same origin.
Related:
Comments
Post a Comment