DEV Community 👩‍💻👨‍💻

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

Posted on

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

Top comments (0)

Become a Moderator Do you want us to help make DEV a better place?

Fill out this survey and help us by becoming a tag moderator here at DEV.