{"version":"1.0","type":"rich","title":"TheatreJS keyframes and WebMMuxer video encoding","description":"TheatreJS animates a scene through keyframed sequences, driving a canvas to render each frame at a fixed simulation time. This example shows how to capture those frames and encode them into a WebM video file using the WebM Muxer library and the browser’s VideoEncoder API with VP9 codec. It uses a rAF driver to tick the animation, a MediaStreamTrackProcessor to read canvas frames, and a file picker to save the output. The capture loop advances the sequence position frame by frame, requesting new canvas frames and writing them as video chunks with periodic keyframes.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-c066717f5f0e77c008e83b3377c8ec31?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}