Skip to content

Instantly share code, notes, and snippets.

@kikill95

kikill95/capture.html

Created June 12, 2018 13:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kikill95/e2819f42c1328dab91db8955e76c27d6 to your computer and use it in GitHub Desktop.
Save kikill95/e2819f42c1328dab91db8955e76c27d6 to your computer and use it in GitHub Desktop.
Download ZIP
Capture thumbnail on client side and prepare file to upload
Raw
capture.html
<!DOCTYPE html>
<head>
<script type='text/javascript'>
window.onload = function () {
var video = document.getElementById('videoId')
var canvas = document.getElementById('canvasId')
canvas.style.display = 'block'
// fake loading
setTimeout(() => {
// start when video loaded
draw(video, canvas)
}, 2000)
};
function draw(video, canvas) {
var context = canvas.getContext('2d')
context.drawImage(video, 0, 0, canvas.width, canvas.height)
var dataURL = canvas.toDataURL()
var blobBin = atob(dataURL.split(',')[1])
var array = []
for (var i = 0; i < blobBin.length; i++) {
array.push(blobBin.charCodeAt(i))
}
var file = new Blob([new Uint8Array(array)], {type: 'image/png'})
// this is working file
console.log(file)
}
</script>
</head>
<body>
<video id="videoId" autoplay loop controls crossorigin="anonymous">
<source src="http://localhost:3978/test.webm" type="video/webm">
<source src="http://localhost:3978/test.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<canvas id="canvasId"></canvas>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment