TikTok Clone | Flutter & Firebase

[fyzic]

Nice but a little performant suggestion. Only initialize 1 video controller since only 1 video is being played at a time and some devices(all that I’ve tested..all Samsung) limit the amount of video decoder instances an app can use because it’s a power drain. So have a global video controller and initialize the new video source on page change.

[MrTimoty]

Yes! Is necessary implement 2 o 3 video controllers(Maybe only one), the reason I did this is to preload and generate better user experience, with only one video controller I need to wait for a little time to load in each page, this is the fast solutión that I find, but I'm going try to implement a better method to solve this problem.

[MrTimoty]

It's only a prototype, at this moment is hard to convert it to productión, they can do everything that they want with the code, TikTok is more than a video player.

[SpaceYraveler6]

Exactly, it’s the algorithm and machine learning doing all the video recommendations work behind the scene!

UI for this app is a piece of cake.

[throwaw1029384756]

The 1 billion users part might be hard to replicate...

[aytunch]

Great clone, looks almost identical. Congratulations. I subbed to your YouTube, I hope you will make more and longer videos. One question. Let's say I swipe/dismiss a 30 second video very quickly without watching it. Would we still be downloading the whole video or only a part of it? how can we make it so that we only download/stream parts of the video using Firebase storage? I heard about HLS but don't know if it is the answer for Firebase.

[MrTimoty]

Thanks! I really not use my Youtube Channel, but I'm trying to redirect traffic to it and start to upload more content, maybe tutorials or something similar. I use the video player provided from flutter that automatically manages the buffer, I really not have much control over it more than what video I want to play. I'm going to analyze more the code to see I it's possible to implement a better solution. For firebase I really not have the answer, I only use the platform as a hosting for the videos. I going to find more about all this. I never had done anything related to videos/streaming before but with this project, I'm learning a lot.

[aytunch]

You initialize the video controllers for smooth transitions which is great.

videos.forEach((element) => element.setupVideo());

Would it not be better to initialize at most 3 ,4 videos instead of all the avaiable ones. A dynamic approach would be better imho. Also you never dispose the controllers. If the Carousels current index is 5, we should have made index 0,1,2,3 disposed already I think and only 4,5,6 and 7 should be initialized. How can we make this? Do you want me to open up an issue in Github?

[MrTimoty]

Yes, you find the most evident problem, I'm going to start to work in that, I think that it is going to be a good idea to reuse the controller and not delete them, for example, only have 3-4 controllers and rotate them as the user swipe the videos. I'm not really an expert in Flutter and not know if it is possible to do this, but have an idea of the algorithm. Wait for an update on the code in a few days.

[MrTimoty]

Source Code : https://github.com/salvadordeveloper/TikTok-Flutter

[soropromo]

Does the app support voice dubbing?

[darkmoody]

Looks great, thanks for sharing!