kikill95/capture.html

## 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>
	<!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>