--- title: Convulse description: A screen recorder, with webcam overlay url: toys/convulse/ type: bare --- <!DOCTYPE html> <html> <head> <title>Convulse</title> <link rel="manifest" href="manifest.json"> <link rel="icon" href="convulse.png"> <link rel="stylesheet" href="convulse.css"> <script src="convulse.js"></script> </head> <body> <div id="hello"> <h1>Convulse: it's sorta like Twitch!</h1> <p> I need the following permissions: </p> <dl> <dt>Use your microphone</dt> <dd>So I can record your velvety-smooth voice</dd> <dt>Use your camera</dt> <dd>So I can record your velvety-smooth face</dd> <dt>Share your screen</dt> <dd>So I can record your velvety-smooth computer</dd> </dl> </div> <canvas></canvas> <div id="indicator">⬤</div> <div id="videos" class="hidden"> <video id="webcam"></video> <video id="desktop"></video> </div> <div id="controls"> <div class="hidden"> <button id="rec">⏺️</button> <a id="save">💾</a> </div> <div> <span>🎙️<select id="audio-in"></select></span> <span>🎥<select id="video-in"></select></span> </div> <div id="webcam-controls"> UR FACE <input id="webcam-size" type="range" min="0" max="1" step="0.01" value="0.2"> <button id="webcam-pos">Move</button> </div> <div id="desktop-controls"> Capture Area <input id="desktop-size" type="range" min="1.0" max="3.0" step="0.01" value="0.2"> <button id="desktop-pos">Move</button> </div> </div> <div id="toasts"></div> </body> </html>