一起看电影的web应用 | A private movie theater design

Posted on

COVID-19 has greatly impacted the way of our lives. What’s more, I have been going through a very painful period of quarantine. In the state of being isolated, I am eager to watch a movie with my friends, to get myself involved. Unfortunately, I could not find a satisfying product. There is no other way except I made an online movie theater myself.

Expected features

  • Coplay: Let me watch a movie with my friends
  • Rich resources: I like interesting and in-depth films
  • Broad platform support: It can be accessed from either laptops or computers, since my friends have different devices
  • Availability: It should provide a fluent movie stream from clients in both America and Asia.

I did a simple survey. Long ago iqiyi had the co-play mode but somehow this feature is removed now. Recently bilibili added this mode, but it only works on mobile devices. They both have limited resources due to copyright issues. Zoom and other live streaming are another approach but they cannot guarantee availability due to realtime transferring. There is a Chrome extension called coplay but it seems complex and does not work well for me.

My design

To realize the expected features, today I wrote a simple web application based on django which

  • supports all platforms: it naturally supports all webkit-based browsers, with a HTML5 video element.
  • has a backend recording the timestamp. Now users can synchronize the video time.
  • maintains availability, since all we synchronize is a 4B timestamp.
  • has unlimited video resources, as long as we download and put to the backend first.
  • to make things funny I made a real-time chat room.

Details

  • I use video.js for the video element, supporting playback rate adjustment and picture-in-picture mode. It looks cool.
  • To synchronize the player and chatroom I used AJAX and websocket programming. (simplified by django and channels)
  • I choose Ali cloud to deploy my application, as I believe it supports reasonable bandwidth for clients around the planet.

How it looks

Users synchronize the player by either clicking the buttons manually, or control the player implicitly. The chat box on the right shows the log and messages.

Conclusion

A simple and interesting experience of web app development. I hope someday low-level development can be such easy.

---以上---