DEV Community

Cover image for ▢️ Swiftube - Creating videos using React βš›οΈ & AI
Pranav
Pranav

Posted on β€’ Edited on

12 1 1 1 1

▢️ Swiftube - Creating videos using React βš›οΈ & AI

What I built πŸš€

I've built Swiftube, an innovative application that transforms user prompts into animated videos, complete with intro & outro, images, voice-over and table.

My Tech Stack:

Image description

Category Submission: πŸƒ

Wacky Wildcards

App Link 🌐

https://swiftube.vercel.app

Screenshots πŸ–ΌοΈ

  • Video Playback ▢️
    Video Playback

  • Homepage 🏠
    Homepage

  • Creating a new video πŸͺ„
    Creating a new video

  • Explore videos made by others!
    Explore videos made by others

Description

Swiftube generates videos based on the instructions and raw content provided by the user, by leveraging the power of:

This is very useful when you have some talking points and images from a presentation and want to quickly convert it into an engaging video for YouTube, Instagram, or what have you!

Remotion's programmatic approach unlocks many features, including but not limited to:

  • Changing the video host entirely (this is huge!)
  • Changing the Channel Logo in the outro

Watch this example video to see it in action! (try changing the Video Settings)

Given some more time, I'd love to implement:

  • Rendering mp4 videos in the cloud using GitHub Actions and Remotion Lambda!
  • Prettier looking video w/ animations (right now it's just the talking points and images)
  • and many more features...

Link to Source Code πŸ§‘β€πŸ’»

Permissive License 🌟

MIT License

Background πŸ€”

I loved the idea of creating videos with dynamic data using Remotion and started to dabble with it. I had a vague idea that it can be used to make simple videos that convey some text.

Then, after experimenting more with it, I got a basic demo of Remotion with Text-to-speech working.

I realized that the pairing of OpenAI and Remotion can be a huge time saver for many because it eliminates the need for:

  • Fancy & expensive equipment for recording your voice.
  • Video/Audio editing skills

Just bring your own content!

How I built it πŸ€“

After learning about the Text-to-speech APIs, Cloud storage, picking the right databases, facing lots of challenges, and dealing with lots and lots of mathematics on the Remotion size, it finally worked as intended.

Admittedly, it's still in the early stages, and is only good for < 10 mins videos. But I invite members of the Open Source community to criticize, iterate and improve on it, if they find it useful :)

Happy to be a part of this Hackathon!
Thanks for reading this far, appreciate it :)

Additional Resources/Info πŸ“‘

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (5)

Collapse
 
just_moh_it profile image
Mohit Yadav β€’

Killing it with these automated videos, Pranav! The app is so polished and the UI & UX is really nice πŸ”₯

Created this video about video games 🀩: swiftube.vercel.app/video/2580cde4...

Collapse
 
thecmdrunner profile image
Pranav β€’

Thanks for trying it out Mohit! πŸ˜„ Looks like the video took only around 1.5 mins to make!
Not a UI expert myself, but somehow got things aligned πŸ˜‚

Collapse
 
nickparsons profile image
Nick Parsons β€’

Wow! This is awesome. Nice one @thecmdrunner!

Collapse
 
thecmdrunner profile image
Pranav β€’

Thanks a lot Nick! πŸ˜„
I'm glad that you liked it, and that the Clerk video you made turned out well in the first try itself 😁

Collapse
 
nickparsons profile image
Nick Parsons β€’

Heyyy, you saw it? That was so cool haha. Can’t wait to see how the app evolves. Keep me posted!

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Best practices for optimal infrastructure performance with Magento

Running a Magento store? Struggling with performance bottlenecks? Join us and get actionable insights and real-world strategies to keep your store fast and reliable.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❀️