---
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>