This is a journal of my first web application development using Django framework. I’m going to explain the process of the development as I build this app. So far, as I am writing this entry, I have already completed about 70% of the application. In this first entry, I will explain what this web app does and technologies that I use.
Here is a list of entries for this journal series.
Part III — Comment
Part IV — Deployment with HTTPS, PostgreSQL, Nginx
Part V — Video Chat
Part VI — UI/UX
Part VII — Misc and Conclusion
VidU — Video With You
Intimate Video Sharing with Your Friends
This application is all about sharing YouTube video with your friends and watch it together while you can comment, chat, video-chat, and even sync the playback. I aim it to be simple and intuitive to use.
First, I will explain key features of the web application. Then, I will talk about technologies that I use to build.
Key Features
1. Create Room
From navigation bar on top, you can create your room in which you share YouTube video with your friends to watch it together.
2. Invite Friends
In your room, invite friends by adding there username. Once Your friend accepts your invitation, your friend can enter the room and make comments on the video.
3. Comments Flow on Top of Video
If you have ever used NicoNico, a video service popular in Japan, or BiliBili, a video sharing service in China, you know how the comments user made flow on top of the video. This web app also does the same thing. It’s quite easy to read comments without interfering watching the video.
By clicking the comments sidebar, you can see all comments on the video. You can click on the comment to jump to position where the comment is posted. The comments are updated real time as another user posts on the video.
4. Sync Mode So You Can Be Intimate
This is one of the coolest features in this app. You can sync the playing state with your friend so that you can watch the video “together”. It’s as if you are watching the video in the same room virtually. If you skip/pause in the video, your friend also gets the same update.
5. You can chat
In the same room, you can chat with your friends who have access to the room. If you want to talk with particular friend instead of everyone in the room, you can also open up individual chat. This is like Facebook messenger.
6. Video Chat Makes It Even More Intimate
Now, this is pretty cool. You can directly talk with your friend by video chat. So you can really watch the video together and see your friends reactions.
Key Technologies
- Django — Python based framework. It’s really easy to use. I will use version 1.11.
- Pusher — Realize realtime features simply. This is used to send messages among users real time.
- Pubnub/WebRTC — This is used to realize video chat. Really simple API on top of WebRTC (Web Real Time Communication)
- Bootstrap/MDBootstrap — Frontend UI made with very easy-to-use material design bootstrap.
- YouTube javascript API — Control YouTube videos programmatically
That is it for this entry. Next time, I will explain how I implemented sync feature using Pusher.
Thank you for reading!