Skip to content

Instantly share code, notes, and snippets.

@wibus-wee

wibus-wee/ASCII-CAM.html

Created April 13, 2022 10:11
Show Gist options
  • Save wibus-wee/f0caa78d004f0152e7506b500a536977 to your computer and use it in GitHub Desktop.
Save wibus-wee/f0caa78d004f0152e7506b500a536977 to your computer and use it in GitHub Desktop.
Download ZIP
with ASCII-CAM.js, Fork from @iveseenthedatk
Raw
ASCII-CAM.html
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="author" content="iveseenthedark">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#333333">
<title>A S C I I C A M</title>
<style>#ascii-cam pre,body,html{width:100vw;height:100vh;margin:0}*{box-sizing:border-box}body{overflow:hidden;background-color:#000;color:#eee;font-family:monospace}#logo,#enable-cam-msg{transform:translate(-50%,-50%);position:absolute;left:50%;top:50%}.fade{transition:opacity 0.25s ease-in-out}#logo{line-height:1.5}#ascii-cam{opacity:0}#ascii-cam pre{position:absolute;top:0;left:0;overflow:hidden;line-height:0.6;user-select:none;mix-blend-mode:screen;font-size:1.2em;font-size:2vh}@media (max-height:50em){#ascii-cam pre{font-size:1em}}@media (min-height:60em){#ascii-cam pre{font-size:1.2em}}#ascii-cam #r-output{color:red}#ascii-cam #g-output{color:#0f0}#ascii-cam #b-output{color:#00f}#enable-cam-msg{opacity:0;font-size:3rem;background-color:white;color:black;margin:0;max-width:50vw;white-space:pre-line;text-align:center;font-weight:900}#canvas,#video{display:none}</style>
</head>
<body>
<pre id="logo" class="fade">
_n_|_|_,_
|===.-.===|
| ((_)) |
'==='-'==='
A S C I I C A M
点击“允许”使用摄像头
</pre>
<pre id="enable-cam-msg" class="fade">Allow access to camera to use</pre>
<div id="ascii-cam" class="fade">
<div class="layers">
<pre id="r-output"></pre>
<pre id="g-output"></pre>
<pre id="b-output"></pre>
</div>
</div>
<video id="video" autoplay="true"></video>
<canvas id="canvas" width="640" height="480"></canvas>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment