Classroom authoring & export
Taking an interactive classroom beyond the browser.
Adapting classroom authoring and video-export workflows so scenes, narration and assets can become a rendered lesson.
- My contribution
- Product integration & export engineering
- Context
- Classroom authoring & video export
- My responsibility
- Integrated classroom editing with video export, resolving timeline, asset and rendering issues.
- The key decision
- Compile classroom scenes into a timeline and self-contained render package, then run MP4 rendering in a separate service.
- What changed
- An export path with scene and narration timing, packaged assets, asynchronous render progress and downloadable output.
The problem & my responsibilities
An interactive classroom can coordinate slides, narration, cursor actions and media while it runs in a browser. Exporting it to video requires those actions to become an explicit timeline, with assets and geometry that the renderer can reproduce outside the live classroom.
I worked on classroom editor and video-export integration. I resolved mismatches between scene data and export inputs, adjusted timeline and asset handling, and fixed rendering configuration so the authoring and export workflows could work together.
Constraints that shaped the work
- Live classroom state must become an explicit export timeline
- Narration duration affects scene and action timing
- Assets need to remain available outside the authoring session
- Chromium and FFmpeg rendering have different runtime needs from the web app
How the system fits together
- 01CollectRead classroom scenes, actions, narration and referenced assets
- 02CompileNormalise timing and geometry into a video timeline
- 03PackageEmit a self-contained Hyperframes project and collect its assets
- 04RenderSubmit the package, poll job progress and download the completed MP4
The consequential decisions
| Decision | Choice | Alternative | Trade-off |
|---|---|---|---|
| Export representation | An intermediate video timeline | Capture the live classroom directly as it runs | A timeline makes scene duration, narration, actions and assets explicit before rendering. Compilation passes can handle normalization and geometry separately from frame capture. |
| Asset delivery | A self-contained render project | Depend on the authoring browser’s live URLs and state | Collecting the render inputs into a package gives the rendering process a defined set of files. The same package can also be downloaded for local rendering. |
| Rendering runtime | A separate asynchronous render service | Run Chromium and FFmpeg inside a normal Next.js request | Frame capture and encoding are long-running, resource-intensive work. Submission, progress polling, cancellation and output retrieval fit a job lifecycle better than a single request. |
| Editor and export compatibility | Align scene types, normalization and settings across both workflows | Assume independently developed editor and export changes fit together unchanged | The editor and renderer need to interpret the same scene consistently. Compatibility fixes connect editing behaviour, scene normalization and export settings so a change in one workflow does not leave the other with incompatible inputs. |
Where the work got difficult
Keep narration and visuals together
Audio duration, action timing and scene boundaries all influence the rendered lesson. Fixes in timeline compilation need to preserve their relationship rather than adjust one duration in isolation.
Keep exports consistent with the editor
Geometry, assets and scene normalization cross the authoring and rendering boundary. Integration fixes addressed cases where the classroom representation and export inputs did not line up.
Operating considerations
Rendering resources
Render jobs need queue limits, bounded concurrency and deadlines. Uploaded project archives also need extraction limits before their contents reach the rendering process.
Job lifecycle
Queued, running, failed, cancelled and successful jobs should remain distinguishable. Output download belongs to the successful state, with artifact cleanup governed by retention settings.
Integration testing
Checks need to follow a lesson from edited scene data through timeline compilation and rendering, including narration timing, asset availability and the final frame geometry.
Outcomes & lessons
The integrated export path converts classroom content into a timeline and packaged render project, with an asynchronous service for MP4 output. My contributions focused on the integration and rendering fixes that connect the authoring experience to that export path.
Export is another product experience: it needs its own state model, resource boundaries and a faithful interpretation of what the author created.