Javascript

VIDEO Tag Capture by Base64

AJ Styles 2021. 11. 2. 09:26

<html>

<head>
 <title>Express</title>
 <link rel="stylesheet" href="/stylesheets/style.css">
 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- <script src="javascripts/3.js"></script>-->
<!-- <script src="javascripts/test.js"></script>-->
 <script src="javascripts/download.js"></script>
</head>

<body>

<video id="video" width="900" height="800" muted autoplay controls>
 <source src="resource/test.mp4" type="video/mp4">
</video>
<button id="down">다운로드</button>
<canvas id="canvas" hidden></canvas>
<script>

 const video = document.querySelector('video');
 const btn = document.querySelector('#down');
 btn.onclick = () => {
 downloadCapture2();
 }

 function downloadCapture2() {

 const canvas = document.getElementById('canvas');
 canvas.width = 1920;
 canvas.height = 1080;
 canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
 const scale = 0.7;
 const canvasValue = canvas.toDataURL('image/jpeg', scale); // Base64 저장 - 0 ~ 1 퀄리티 범위
 console.log(canvasValue);

 }

</script>

</body>

</html>