DEV Community

loading...
Cover image for Creating live coding videos right from your browser

Creating live coding videos right from your browser

technikhil314
Eating. Playing drums. Making mistakes. Trying to give my experience. Failing to explain and making new mistakes. All while coding. All for learning
・1 min read

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

Discussion (0)