HTML/video.html at main · LopenaFollower/HTML · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html>
	<head>
		<title>vid</title>
		<meta name="viewport"content="width=device-width,initial-scale=1">
		<style>
			*{
				margin:0;
			}
			body{
				color:#000;
				background-color:#fff;
			}
			input{
				font-size:18px;
			}
			pre{
				font-family:"Courier New","monospace";
				margin:1rem auto;
				font-size:1px;
				font-weight:900;
				line-height:1;
				letter-spacing:-.1px;
			}
			video,canvas{
				opacity:1;
				z-index:-1;

			}
		</style>
	</head>
	<body>
		<canvas id="canvas"style="opacity:0;position:fixed;"></canvas>
		<input type=file id=in /><br>
		<input value=150 oninput="!isNaN(this.value)&&this.value>0&&setMax(parseInt(this.value).toFixed())"placeholder="display size"/><br>
		<video width=200 height=200 id="video"src=""type="video/mp4"controls autoplay></video><br>
		<button onclick="navigator.clipboard.writeText(out.textContent)">copy frame</button>
		<center>
			<pre id=out></pre>
		</center>
		<script>
var canvas=document.getElementById("canvas"),
	ctx=canvas.getContext("2d"),
	video=document.querySelector("video"),
	output=document.getElementById("out"),
	input=document.getElementById("in"),
	chars="$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/|()1{}[]?-_+~<>i!lI;:,\"^`'. ",
	max=165;
let rfs=false;
let frames=[];
function setMax(v){return max=v}
function capture(){
	let[width,height]=resize(video.videoWidth,video.videoHeight);
	if(!width||!height)return requestAnimationFrame(capture);;
	canvas.width=width;
	canvas.height=height;
	ctx.drawImage(video,0,0,width,height);
	let data=ctx.getImageData(0,0,width,height),gss=[];
	for(let i=0;i<data.data.length;i+=4){
		let gs=(data.data[i]+data.data[i+1]+data.data[i+2])/3;
		data.data[i]=data.data[i+1]=data.data[i+2]=gs;
		gss.push(gs);
	}
	output.textContent=gss.reduce((a,g,i)=>{
		let c=chars[Math.ceil((chars.length-1)*g/256)];
		if((i+1)%width===0)c+="\n";
		return a+c;
	},"");
	requestAnimationFrame(capture);
}
function resize(w,h){
	let nw=Math.floor(fr*w);
	return h>max?[Math.floor(nw*max/h),max]:w>max?[max,Math.floor(h*max/nw)]:[nw,h];
};
let fr=(()=>{
	let pr=document.createElement("pre");
	pr.style.display="inline";
	pr.textContent=" ";
	document.body.appendChild(pr);
	let{width,height}=pr.getBoundingClientRect();
	document.body.removeChild(pr);
	return height/width;
})()
input.onchange=e=>{
	video.load()
	video.src=URL.createObjectURL(e.target.files[0])
}
capture()
		</script>
	</body>
</html>