-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
122 lines (106 loc) · 4.13 KB
/
index.html
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ASCII Video Player</title>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
#ascii-video {
font-family: monospace;
white-space: pre;
font-size: 0.1em;
}
@media (max-width: 768px) {
#ascii-video {
font-size: 0.6em;
}
}
</style>
</head>
<body>
<div id="ascii-video"></div>
<div id="video-controls">
<input type="file" id="video-file" accept="video/*">
<label for="video-fps">FPS:</label>
<input type="number" id="video-fps" min="1" max="30" value="30">
<label for="ascii-font-size">Size:</label>
<input type="number" id="ascii-font-size" min="0.1" max="0.3" value="0.1">
<label for="video-width">Video Size:</label>
<input type="number" id="video-width" min="1" max="1000" value="200" style="width: 60px;">
<span>x</span>
<input type="number" id="video-height" min="1" max="1000" value="65" style="width: 60px;">
<label for="video-mute">Mute Video:</label>
<input type="checkbox" id="video-mute">
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const videoElement = document.createElement('video');
videoElement.style.display = 'none';
const asciiContainer = document.getElementById('ascii-video');
let asciiWidth = parseInt(document.getElementById('video-width').value, 10);
let asciiHeight = parseInt(document.getElementById('video-height').value, 10);
let asciiFPS = parseInt(document.getElementById('video-fps').value, 10);
let frameDelay = 1000 / asciiFPS;
let asciiFontSize = parseFloat(document.getElementById('ascii-font-size').value);
function updateAscii() {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = asciiWidth;
canvas.height = asciiHeight;
ctx.drawImage(videoElement, 0, 0, asciiWidth, asciiHeight);
let asciiFrame = '';
const imageData = ctx.getImageData(0, 0, asciiWidth, asciiHeight).data;
for (let i = 0; i < imageData.length; i += 4) {
const brightness = (imageData[i] + imageData[i + 1] + imageData[i + 2]) / 3;
asciiFrame += '@%#*+=-:. '[Math.floor(brightness / 255 * 8)];
if ((i / 4 + 1) % asciiWidth === 0) {
asciiFrame += '\n';
}
}
asciiContainer.textContent = asciiFrame;
asciiContainer.style.fontSize = asciiFontSize + 'em';
setTimeout(updateAscii, frameDelay);
canvas.remove();
}
document.getElementById('video-width').addEventListener('input', () => {
asciiWidth = parseInt(document.getElementById('video-width').value, 10);
updateAscii();
});
document.getElementById('video-height').addEventListener('input', () => {
asciiHeight = parseInt(document.getElementById('video-height').value, 10);
updateAscii();
});
document.getElementById('video-fps').addEventListener('input', () => {
asciiFPS = parseInt(document.getElementById('video-fps').value, 10);
frameDelay = 1000 / asciiFPS;
});
document.getElementById('ascii-font-size').addEventListener('input', () => {
asciiFontSize = parseFloat(document.getElementById('ascii-font-size').value);
});
document.getElementById('video-mute').addEventListener('change', () => {
videoElement.muted = document.getElementById('video-mute').checked;
});
document.getElementById('video-file').addEventListener('change', () => {
const file = document.getElementById('video-file').files[0];
if (file) {
videoElement.src = URL.createObjectURL(file);
}
});
videoElement.addEventListener('loadeddata', () => {
videoElement.play();
updateAscii();
});
document.body.appendChild(videoElement);
});
</script>
</body>
</html>