jsplay 🌌

reinhard@finalmedia.de cafeface
Wed Jul 15 20:14:40 PM CEST 2026
Public Domain

Nutzt websockets, um den pigz komprimierten output eines rgba binary (video)streams live und hochperformant in Javascript im Browser darzustellen.
Kann z.B. mit fdraw genutzt werden. Es handelt sich dabei um eine minimalistische Implementierung in Javascript.

Variante Frontend

HTML+Javascript 2D Canvas
HTML+Javascript WebGL
HTML+Javascript WebGPU

Backend

Setup


	mkdir jsplay
	cd jsplay
	wget https://finalmedia.de/code/js/jsplay/index.html
	wget https://finalmedia.de/code/js/jsplay/index.canvas.html
	wget https://finalmedia.de/code/js/jsplay/index.webgl.html
	wget https://finalmedia.de/code/js/jsplay/index.webgpu.html

Example Usage

Alle Beispieldaten herunterladen


	apt-get install websocketd pigz gawk
	wget -O /usr/bin/fdraw https://finalmedia.de/code/fdraw/fdraw

	cd jsplay

	wget https://finalmedia.de/code/js/jsplay/torus.sh
	wget https://finalmedia.de/code/js/jsplay/raytracer.sh
	wget https://finalmedia.de/code/js/jsplay/torus.awk
	wget https://finalmedia.de/code/js/jsplay/raytracer.awk

Gewünschtes Beispiel Backend starten:

torus:
	websocketd --staticdir=. --port=8080 --binary ./torus.sh

raytracer:
	websocketd --staticdir=. --port=8080 --binary ./raytracer.sh

View

Dann deinen Browser öffnen auf http://127.0.0.1:8080

torus.sh

torus.sh sieht dabei wie nachfolgend aus und setzt die fdraw binary und gawk voraus um torus.awk anzuwenden:

#!/bin/sh
export SCREEN_WIDTH=320
export SCREEN_HEIGHT=240
export SCREEN_FPS=60
gawk -v width=320 -v height=240 -f torus.awk 2>/dev/null | fdraw 2>/dev/null | pigz -b 32 -i -z -c