ajiteshsingh/extract_video_frames_using_pixi.html

## extract_video_frames_using_pixi.html
<!-- Using pixi 6.0.0 -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pixi Demo</title>
    <script src="pixi/pixi.min.js"></script>
</head>

<body>
    <button onclick="clicked()">Click me</button>
    <script>
        function clicked() {
            const app = new PIXI.Application();
            document.body.appendChild(app.view);
            const texture = PIXI.Texture.from('https://invideo-uploads-ap-south-1.s3.ap-south-1.amazonaws.com/input1615538794880IRWMJBRR.mp4');
            texture.autoplay = false;
            const videoSprite = new PIXI.Sprite(texture);
            const videoControler = videoSprite._texture.baseTexture.resource.source;

            videoControler.oncanplaythrough = () => {
                videoControler.pause();
            }
            videoControler.onseeked = () => {
                console.log('seeked')
                texture.update();
                download_sprite_as_png(app.renderer, videoSprite, 'hello.png');
            }
            const interval = setInterval(() => {
                console.log('current time', videoControler.currentTime);
                videoControler.currentTime = videoControler.currentTime + 1
            }, 100);

            setTimeout(() => {
                clearInterval(interval);
            }, 1000)

            app.stage.addChild(videoSprite);
        }

        function download_sprite_as_png(renderer, sprite, fileName) {
            renderer.extract.canvas(sprite).toBlob(function (b) {
                var a = document.createElement('a');
                document.body.append(a);
                a.download = fileName;
                a.href = URL.createObjectURL(b);
                a.click();
                a.remove();
            }, 'image/png');
        }
    </script>
</body>

</html>
	<!-- Using pixi 6.0.0 -->

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Pixi Demo</title>
	<script src="pixi/pixi.min.js"></script>
	</head>

	<body>
	<button onclick="clicked()">Click me</button>
	<script>
	function clicked() {
	const app = new PIXI.Application();
	document.body.appendChild(app.view);
	const texture = PIXI.Texture.from('https://invideo-uploads-ap-south-1.s3.ap-south-1.amazonaws.com/input1615538794880IRWMJBRR.mp4');
	texture.autoplay = false;
	const videoSprite = new PIXI.Sprite(texture);
	const videoControler = videoSprite._texture.baseTexture.resource.source;

	videoControler.oncanplaythrough = () => {
	videoControler.pause();
	}
	videoControler.onseeked = () => {
	console.log('seeked')
	texture.update();
	download_sprite_as_png(app.renderer, videoSprite, 'hello.png');
	}
	const interval = setInterval(() => {
	console.log('current time', videoControler.currentTime);
	videoControler.currentTime = videoControler.currentTime + 1
	}, 100);

	setTimeout(() => {
	clearInterval(interval);
	}, 1000)

	app.stage.addChild(videoSprite);
	}

	function download_sprite_as_png(renderer, sprite, fileName) {
	renderer.extract.canvas(sprite).toBlob(function (b) {
	var a = document.createElement('a');
	document.body.append(a);
	a.download = fileName;
	a.href = URL.createObjectURL(b);
	a.click();
	a.remove();
	}, 'image/png');
	}
	</script>
	</body>

	</html>