Creating a video streaming App in Android Using MVVM,RxJava,Pagination Library and the normal stuffs
I was given an assignment to create a video streaming app that plays videos and mimics the working of the famous video streaming app TikTok.
It would be easy right? Just put a VideoView inside recyclerview and set the urls and there, you have your awesome video streaming app. But NO, that's not how it works. There is lot more than that. I will take you through how I created such an app with the above mentioned components. I am,in no way, claiming that this is a well written app and a model for others to follow, consider it more of it like a few steps ahead, so you know where to start and improve from.
This entire article is based of a repo thats available at https://github.com/judeosbert/Video-Streaming-App-with-MVVM-RxJAVA-
Please feel free to clone make changes and if kind enough, raise a PR to my repo, so I can too learn something new and make it better.
Why VideoView With RecyclerView doesn’t work???
Right after searching the reasons I read this article https://medium.com/@v.danylo/implementing-video-playback-in-a-scrolled-list-listview-recyclerview-d04bc2148429
We cannot use usual VideoView in the list. VideoView extends SurfaceView, and SurfaceView doesn’t have UI synchronization buffers. All this will lead us to the situation where video that is playing is trying to catch up the list when you scroll it.
I took some of his ideas and took an approach, that reduces reinventing the wheels a lot. I found codes that did the same thing with lot more of features, but when I had a perfectly working library, It wouldn’t have video callbacks or would be poorly written so that it wouldn’t fit into my app.
To start off, we need a video player. I used BetterVideoPlayer found at https://github.com/halilozercan/BetterVideoPlayer . This is a neat little video player that has all the features I wanted. Using it is as easy just putting it in the recyclerview and accessing it via its APIs.
The Data
I had to take data from the site at https://livestreamfails.com. It was a simple site with no apis or anything. Instead they used reddit as their api, which works for us too. So basically we need to use https://www.reddit.com/r/LivestreamFail/hot.json for data. From this we need to filter out clips that don’t have their domain as twitch.
The links in the reddit api only gives to links to embed them and not to the actual mp4 links to the video. We need to use another api at https://clips.twitch.tv/api/v2/clips/<VideoName>/status , for example, https://clips.twitch.tv/api/v2/clips/PrettyCrepuscularClamBabyRage/status, to get the links to videos with various quality options.
The Implementation
I am using RxJava to get the data from the above two apis and club them to make a Feed Object as my final result.
These functions are directly written in the loadInitial and loadAfter functions of the paging library from Google. Look here
Feed class is
The results are directly taken to viewmodel and then to view which are pretty basic implementations with no surprises.
This is a basic example of using these technologies together. I found it difficult to understand things looking at some repos and articles. I felt I should write this just so others could take reference.
Please leave your thoughts as comments. Any improvements or suggestions, to the app are welcome as issues on Github or as PRs. This is my first article in medium. I apologise for my mistakes.
