<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Hanish Keloth</title>
    <description>The latest articles on DEV Community by Hanish Keloth (@hanish_keloth_f8366c78838).</description>
    <link>https://dev.to/hanish_keloth_f8366c78838</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2721377%2F1464d431-d206-40f5-8856-275ba45a6381.jpg</url>
      <title>DEV Community: Hanish Keloth</title>
      <link>https://dev.to/hanish_keloth_f8366c78838</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/hanish_keloth_f8366c78838"/>
    <language>en</language>
    <item>
      <title>Create a narrated video presentation locally with OpenVid</title>
      <dc:creator>Hanish Keloth</dc:creator>
      <pubDate>Mon, 28 Sep 2026 06:01:00 +0000</pubDate>
      <link>https://dev.to/hanish_keloth_f8366c78838/create-a-narrated-video-presentation-locally-with-openvid-5a32</link>
      <guid>https://dev.to/hanish_keloth_f8366c78838/create-a-narrated-video-presentation-locally-with-openvid-5a32</guid>
      <description>&lt;p&gt;A video presentation is easier to revise when the source is still a set of editable scenes. In this tutorial, we'll run OpenVid locally, open a four-scene example with narration and music, make a small edit, and render an MP4 on our own computer.&lt;/p&gt;

&lt;p&gt;I'm OpenVid's maintainer. The application is open source under AGPL-3.0-only. The first workflow below needs no AI provider account: the repository includes six complete example projects and their media. Optional AI steps use your own provider accounts and can incur charges.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/hanishkeloth/OpenVid" rel="noopener noreferrer"&gt;Source and setup&lt;/a&gt; · &lt;a href="https://hanishkeloth.github.io/OpenVid/#examples" rel="noopener noreferrer"&gt;Finished examples&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Install the local app
&lt;/h2&gt;

&lt;p&gt;You'll need Python 3.13 or newer, Node.js 22 or newer, Git, and FFmpeg/ffprobe. HyperFrames also needs its supported Chromium installation. LibreOffice is optional; install it if you want to import PowerPoint files.&lt;/p&gt;

&lt;p&gt;The following commands use a macOS/Linux-style shell:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git clone https://github.com/hanishkeloth/OpenVid.git
&lt;span class="nb"&gt;cd &lt;/span&gt;OpenVid
python3 &lt;span class="nt"&gt;-m&lt;/span&gt; venv .venv
.venv/bin/pip &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;-r&lt;/span&gt; requirements.txt
npm ci
npx hyperframes browser ensure
npm run dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;On macOS, &lt;code&gt;brew install ffmpeg&lt;/code&gt; supplies FFmpeg and ffprobe. Check your prerequisites with &lt;code&gt;python3 --version&lt;/code&gt;, &lt;code&gt;node --version&lt;/code&gt;, and &lt;code&gt;ffmpeg -version&lt;/code&gt; before troubleshooting the application itself.&lt;/p&gt;

&lt;p&gt;Open &lt;code&gt;http://127.0.0.1:7795/vids&lt;/code&gt; in your browser. Keep the terminal running while editing or rendering.&lt;/p&gt;

&lt;p&gt;The browser receives a private workspace cookie. Keep using the same browser profile: another profile creates a separate workspace, with separate example copies and provider connections.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Start with the press-announcement example
&lt;/h2&gt;

&lt;p&gt;Open the press-announcement project from the video library. It contains four editable scenes, narration clips, a shared music track, photographs, and an existing finished export.&lt;/p&gt;

&lt;p&gt;Before editing, choose &lt;strong&gt;File → Make a copy&lt;/strong&gt;. Rename your copy to something recognizable, such as &lt;code&gt;My first OpenVid presentation&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Press &lt;strong&gt;Play&lt;/strong&gt; to understand the starting sequence. The scene cards at the bottom let you jump between sections. Select a text layer and use &lt;strong&gt;Format options&lt;/strong&gt; to change its appearance. For a first experiment, change a headline's colour or font size while keeping the script unchanged. That lets you verify the editing and rendering path without creating mismatched narration.&lt;/p&gt;

&lt;p&gt;The examples use fictional businesses and illustrative metrics. Replace those with your own material before publishing a business presentation.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Keep scene timing and narration aligned
&lt;/h2&gt;

&lt;p&gt;Open &lt;strong&gt;Scene → Duration and transition&lt;/strong&gt; to inspect a scene's timing. &lt;strong&gt;View → Layers and timing&lt;/strong&gt; exposes individual layer timing.&lt;/p&gt;

&lt;p&gt;A useful check is:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;scene duration &amp;gt;= narration start + narration duration
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Leave a little time after the final sentence so the next scene does not feel rushed. A scene's text, visual layers, and narration should also agree about what is being presented. Changing an on-screen number does not rewrite an existing voice recording.&lt;/p&gt;

&lt;p&gt;The included soundtrack is shared across the document. Select its audio track to adjust volume and fades. Lower the music until narration remains clear, and use a fade at the end. Listen across each scene boundary, not just from the opening.&lt;/p&gt;

&lt;p&gt;For this first export, keeping the bundled narration is the simplest way to test the full workflow without an API key.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Optionally record or generate new narration
&lt;/h2&gt;

&lt;p&gt;To use your own recording, use &lt;strong&gt;Record&lt;/strong&gt; or upload an audio file through &lt;strong&gt;Uploads&lt;/strong&gt;. Recording requires your browser's microphone permission.&lt;/p&gt;

&lt;p&gt;For AI narration, open &lt;strong&gt;Connections&lt;/strong&gt;, configure a supported speech provider, and select it as the speech default. Then open &lt;strong&gt;Voiceover&lt;/strong&gt;, enter the scene's script, and choose a voice supported by that provider. Generate the clip and add the completed result to the intended scene.&lt;/p&gt;

&lt;p&gt;Remove or mute the old narration before inserting its replacement. Play the scene again and check its duration; avoid leaving two voices speaking at once. Reuse the same voice across scenes when you want a consistent narrator.&lt;/p&gt;

&lt;p&gt;Provider model names, account access, and costs vary. A saved connection is not a guarantee that every model is available. OpenVid's &lt;a href="https://github.com/hanishkeloth/OpenVid/blob/main/docs/PROVIDERS.md" rel="noopener noreferrer"&gt;provider notes&lt;/a&gt; describe the supported adapters and their limits.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Render an MP4 locally
&lt;/h2&gt;

&lt;p&gt;Wait for the editor to show &lt;strong&gt;All changes saved&lt;/strong&gt;. Select &lt;strong&gt;Download&lt;/strong&gt;, choose &lt;strong&gt;MP4&lt;/strong&gt;, &lt;strong&gt;720p&lt;/strong&gt;, and &lt;strong&gt;30 fps&lt;/strong&gt; for a first render, then select &lt;strong&gt;Render video&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Follow the job in &lt;strong&gt;Activity&lt;/strong&gt;. When it completes, open the result and download the finished video. HyperFrames renders the saved scenes and mixes their media on the machine running OpenVid. Optional AI generation is separate from this local rendering step.&lt;/p&gt;

&lt;p&gt;Check the exported file itself, including the last scene. A successful job status doesn't tell you whether a headline is too small or music is too loud.&lt;/p&gt;

&lt;p&gt;If you want a technical file check:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;ffprobe &lt;span class="nt"&gt;-v&lt;/span&gt; error &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;-show_entries&lt;/span&gt; &lt;span class="nv"&gt;stream&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;codec_type,width,height,duration &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;-of&lt;/span&gt; json your-video.mp4

ffmpeg &lt;span class="nt"&gt;-v&lt;/span&gt; error &lt;span class="nt"&gt;-i&lt;/span&gt; your-video.mp4 &lt;span class="nt"&gt;-f&lt;/span&gt; null -
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The first command reports the streams and dimensions. The second decodes the entire file and reports decoding errors; neither replaces watching and listening.&lt;/p&gt;

&lt;h2&gt;
  
  
  Troubleshooting and current limits
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Rendering fails immediately:&lt;/strong&gt; check FFmpeg and run &lt;code&gt;npx hyperframes browser ensure&lt;/code&gt; from the repository directory.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Your projects seem to disappear:&lt;/strong&gt; confirm you are using the same browser profile and local server data directory.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Speech overlaps or cuts off:&lt;/strong&gt; inspect the audio layers, their start times, and the scene duration; remove the replaced clip.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Fonts differ:&lt;/strong&gt; install the fonts used by your document, or choose fonts present on the rendering machine.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;A generation job is interrupted:&lt;/strong&gt; inspect its provider status before submitting another paid request. Don't restart the server during an active render or generation.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;OpenVid does not currently include Google Drive integration or live collaboration across workspaces. PDF/PPTX pages import as images. Exporting project JSON does not package its media files, so retain the assets when moving an editable project.&lt;/p&gt;

&lt;p&gt;Application code and sample media have different licence terms. The repository includes the media notices and credits; preserve them when redistributing the examples.&lt;/p&gt;

&lt;p&gt;If you try this workflow, the most useful feedback is a reproducible issue with your operating system, the step that failed, and any non-sensitive error text. Never include API keys or your private workspace cookie in an issue.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;This tutorial was prepared with AI assistance and checked against OpenVid's source and local export workflow.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>opensource</category>
      <category>tutorial</category>
    </item>
  </channel>
</rss>
