-
Notifications
You must be signed in to change notification settings - Fork 56
/
index.html
91 lines (86 loc) · 3.08 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jscii</title>
<script src="src/jscii.js"></script>
<style type="text/css">
html, body {
font: normal 12px/18px 'helvetica neue' arial;
color: #333;
}
.section > pre { font: bold 8px/5px monospace; color: #000; clear: left; }
video { width: 200px; }
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix { display: inline-block; }
</style>
</head>
<body>
<a href="https://github.com/EnotionZ/jscii"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>
<div class="container">
<h2>Image to ASCII string</h2>
<div class="section clearfix">
<img width="150" id="jscii-element-image" src="test/fixtures/image.jpg">
<pre id="ascii-container-image"></pre>
</div>
<h2>Webcam Feed to ASCII string <small>(must enable video)</small></h2>
<div class="section clearfix">
<video id="jscii-element-webrtc" controls autoplay>
Your browser does not support video
</video>
<div>
<button id="play-webrtc">Start Render</button>
<button id="pause-webrtc">Pause Render</button>
</div>
<pre id="ascii-container-webrtc"></pre>
</div>
<h2>Video to ASCII string</h2>
<div class="section clearfix">
<video id="jscii-element-video" width="150" height="112" controls loop>
<source src="test/fixtures/movie.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="test/fixtures/movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="test/fixtures/movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
Your browser does not support video
</video>
<div>
<button id="play-video">Start Render</button>
<button id="pause-video">Pause Render</button>
</div>
<pre id="ascii-container-video"></pre>
</div>
</div>
<script>
// example using an image and callback to render ascii string
var imgJscii = new Jscii({
width: 200,
color: true,
el: document.getElementById('jscii-element-image'),
fn: function(str) {
document.getElementById('ascii-container-image').innerHTML = str;
}
});
// example using webrtc media stream in video element
var webcamJscii = new Jscii({
container: document.getElementById('ascii-container-webrtc'),
el: document.getElementById('jscii-element-webrtc'),
webrtc: true
});
// example using normal video element
var videoJscii = new Jscii({
container: document.getElementById('ascii-container-video'),
el: document.getElementById('jscii-element-video')
});
document.getElementById('play-webrtc').addEventListener('click', function() { webcamJscii.play(); });
document.getElementById('pause-webrtc').addEventListener('click', function() { webcamJscii.pause(); });
document.getElementById('play-video').addEventListener('click', function() { videoJscii.play(); });
document.getElementById('pause-video').addEventListener('click', function() { videoJscii.pause(); });
</script>
</body>
</html>