Skip to content

ASCILINE v0.1.2-alpha — Codec fix ,Vertical Video Optimization & Sync improvements

Choose a tag to compare

View all tags
@YusufB5 YusufB5 released this 03 Sep 12:29
· 27 commits to main since this release
v0.1.2
a4ad4ff

This patch release fixes a critical frame corruption bug in the SDK's inlined codec, restores standalone showcase stability, and introduces automatic aspect ratio optimization for vertical videos (YouTube Shorts, Instagram Reels, TikTok).
(The standalone showcase page (index.html) will migrate to the SDK once it reaches full stability.)

What's New in v0.1.2

  • Resolved "The Void" (Delta Frame Corruption): Replaced the faulty inlined delta decoder in asciline-player with the verified, bit-accurate codec.js engine. Fixed a 4-byte index misalignment that previously caused black rectangular voids and frozen scene fragments during playback.
  • Smart Vertical Video (Shorts/Reels) Optimization: stream_server.py now automatically detects vertical video aspect ratios (vid_h > vid_w) and dynamically scales columns to 96 (down from 200). This reduces per-frame character count from 35,600 to ~8,160, eliminating canvas text overcrowding and ensuring a solid 30 FPS playback with zero startup lag.
  • Showcase Independence: app.js and codec.js in the core repository remain decoupled and standalone as the production-grade golden benchmark.
  • Synced Unmuting: Calling player.unmute() now computes the exact video timestamp and seeks the backend audio stream in real-time, preventing audio/video desync when starting unmuted.
  • Auto Play Overlay: Added playOverlay: true to the SDK to seamlessly handle browser autoplay restrictions via user gestures without custom DOM boilerplates.

Quickstart

npm install asciline-player
<canvas id="ascii-canvas"></canvas>

<script type="module">
  import { AsciiPlayer } from 'asciline-player';

  new AsciiPlayer('#ascii-canvas', { 
    url: 'ws://localhost:8000/ws?codec=adaptive' 
  }).play();

</script>

Setup with Synced Audio & Play Button

<!-- Wrapper container with relative positioning -->
<div id="player-box" style="position: relative; width: 100%; max-width: 900px; aspect-ratio: 16/9; background: #000;">
  <canvas id="ascii-canvas"></canvas>
</div>

<script type="module">
  import { AsciiPlayer } from 'asciline-player';

  // Automatically renders a sleek ▶ overlay.
  // Clicking it provides the user gesture required by modern browsers,
  // starting audio and video in rock-solid synchronization!
  const player = new AsciiPlayer('#ascii-canvas', {
    url: 'ws://localhost:8000/ws?codec=adaptive',
    container: '#player-box',
    audio: true,          // Automatic cross-origin audio stream
    selectionLayer: true, // Copyable text overlay
    playOverlay: true     // Auto-managed play button (defaults to true)
  });
</script>

Modern browsers block unmuted audio without a direct user interaction.

  • Recommended: Keep playOverlay: true (default). Clicking the built-in play button satisfies browser autoplay policies, keeping audio and video locked in sync from t = 0.

  • Custom UI / Headless: If managing your own playback buttons, set playOverlay: false and call player.play() inside your click event handler.

  • Unmuting on the fly: If starting muted, call await player.unmute() at any point; the player automatically syncs the audio stream to the exact ongoing video timestamp.

Assets 2
Loading