🎉🎉🎉 After years of procrastinating on working on this project, I'm finally proud to launch this platform PortokaLive to public. Hooray! Here's the link
- Web ( https://portokalive.vercel.app/ )
- Mobile ( https://play.google.com/store/apps/details?id=com.portokalive)
🌞 How it started (The origin)
PortokaLive was started off as a coding challenge by one of the company that I was interviewing back in 2019. The company requested me to showcase my coding ability and asked to create a proof-of-concept POC application which can do a live-streaming between Mobile Application and Web.
Since I'm proficient in Javascript, I've done my research and found that https://www.npmjs.com/package/node-media-server (Node Media Server) is a viable option for me to use to implement this kind of feature.
I've checked out their code, forked and changed some styling/navigation to the react-native application which will do the recording and broadcasting as well as the node-media-server using rtmp protocol.
There are lots of tutorials online on how to play the live stream in React web using videojs. Luckily, node-media-server provide option to play the video in flv format which directly suits our needs.
Eventually, after 2 or 3 days of self hackathon, the suite of Mobile Client, Web Client, Media Server and Auth API server written in node.js are completed and demonstrated to them. Anyway, I ended up not accepting their offer and this POC project was left behind as a byproduct hanging in my repository.
💙 Rebranding to another name
When it was created it was given the company's name and logo, which is in Orange and white color theme. Considering to rebrand this project, I've decided to just stick to the original theme and also give the name as "OrangeLive" which I thought was pretty good. However, after searching on the Google, it seems that the name was taken by another company leading me to change it into something else. I tried to use Google Translate to search other names of Orange in other languages.
Finally, I found out Orange in Greek language is called Portokali.
https://translate.google.com/?sl=el&tl=en&text=%CF%80%CE%BF%CF%81%CF%84%CE%BF%CE%BA%CE%AC%CE%BB%CE%B9&op=translate&hl=en
And fortunately, I can omit the "L" and "I" of the Live word if I merged them together. So, there it goes. "PortokaLive"
📚 Tech Stack
The tech stack was initially a rush because I just want to quickly completed in a few days so I just went for my comfort stack which is
- React for Web UI
- Bootstrap for Web theme
- Node.JS (Typescript) for API
- ReactNative for Mobile
- Ui Kitten for Mobile theme
There was a change in media server because media server with rtmp support cannot be deployed on any free backend hosting. (Or maybe at least I don't know, Give a comment below if you know how to 😉)
Therefore, I changed it to using api.video(https://api.video) freemium which is great except the part they put watermark if you want to use it without paying premium charges.
api.video came with a cool REST api and iframe web player which makes my life easier so that I do not need to develop all the wrappers around it.
💅 Illustration Design
To put some aesthetic design in my app, I've used Undraw's free illustrations which are not only attractive but also accurately designed to the context.
Please checkout https://undraw.co/ (❤️ Super cool illustration pack!)
Conclusion
Disclaimer of this application is that it is not meant for production or public use but anyone who are interested in these tech stack can checkout and learn from it for educational purpose.
Stay safe and Thanks for the read! 🙇♂️🙇♂️
Author: Kevin Moe Myint Myat
https://kevinmoemyintmyat.gitlab.io
Top comments (0)