DEV Community

Cover image for Creating live coding videos right from your browser
technikhil314
technikhil314

Posted on

1 1

Creating live coding videos right from your browser

For those who are lazy in reading my motivation behind creating this small tool just go here and try it out

All this time I was thinking of starting my own youtube channel where I would be share my learnings frequently.

But when I asked a few of my colleagues they told me to use OBS studio to create videos where I had to learn about how to setup OBS studio effectively for better audio quality, video quality. And I immediately got frustrated of trying out different settings.

But then I thought of trying out to create a web based live coding video creator. To my surprise I created whole video recorder (screen and webcam both) just in browser. It leverages latest browser features like MediaRecorder, Picture-in-Picture, Media access and also uses modern machine learning libraries like tensforflow.js and bodypix model.

I have developed the application using next.js and tailwind.css and have deployed to vercel. You can try it here. The code is available to contribute and play around here

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay