In the app I have a UICollectionView with item size so that about ~20 items are visible on the screen at the same time. The content that I want to display in each cell is Gif image downloaded from Giphy / Tenor.
However, I realized that gif files take much more space (and time to load) than the relative mp4 files that both Tenor and Giphy provide for each animated image, which is actually obvious, cause mp4 file format has a compressing logic and stuff like that. Sorry if I use wrong terms.
In order to have list loaded faster I decided to switch using UIImageView with GIF images to AVPlayerLayer, cause mp4 file is like ~10x lighter than GIF image. But I faced with the performance issue similar to what described HERE. The flow is mostly the same, I have 20+ items visible at the same time, but because of hardware limitations it only shows 16 videos. I couldn't find any workaround or any other frameworks that would allow to have more than 16 AVPlayerLayer showing video at the same time.
I'm wondering how WhatsApp application works and handles this logic. It also has GIF selection from Tenor. I already checked and figured out that WhatsApp downloads small video files and not gif images. That's why it loads very fast. But I have no idea how they can show 20+ items at the same time. HERE is how that works in WhatsApp - https://media.giphy.com/media/33E84h3RAVn0vQWZak/giphy.gif. Also, I notices during scroll the small static previews are showing, but I don't see the app making requests for it. Probably they gets a first frame of the gif on the fly without any delays in main thread.
I also tried that, but even if I make every single stuff in background thread and the only line on the main thread is "self.imageView.image = myImage", it anyway is lugging a little bit if I have 8 items in the row for example and scrolling very fast.
I see only 2 possible solutions to have it loads fast (so we definitely need to load mp4 instead of gifs), and scroll smooth and without lugs:
1. WhatsApp uses its own custom Video Core to display video in the UICollectionViewCell .
2. WhatsApp downloads video to speed up the download process but then encodes mp4 file to gif one on the fly and use regular animated UIImageView to show the output gif file. However I was not able to have this flow working very fast without lugging during 'massive' scrolling
Any thoughts on how to implement the same to make it works fast and smooth as in WhatsApp? I'm unable to check how it handles the downloaded info, but for sure it downloads mp4 files and not gif ones.
Related
I am trying to code a "webpage selector" on my app, using a fancy carousel to display the webpages thumbnails.
However, I don't want to display the webpages thumbnails as webViews on my carousel because I can get quite a large number (20-30) of webpages at the same time and loading all of those can cause a lot of lag.
So, I decided to use screenshots of the webpages and use those images to populate my carousel instead, making the carousel animation much smoother.
Here is my question:
I would like to know if there is any way to take a screenshot of the webpage (without showing it on the app screen) and save the image into a list that I can use to populate the carousel.
I am aware of this question but is quite an old post, so I was wondering if there is another way to do it. Also, I tried to implement the suggested solution, but it did not work.
You can create a WKWebView that is behind your view controller (and thus invisible) and constrained to the size that you want. Once the page finishes loading take a snapshot by using drawHierarchy(in:afterScreenUpdates:) inside of a UIGraphicsImageRender and save the resulting image as your thumbnail.
Among the examples I have seen so far for iMessage-App extensions, I learned that the only way to send GIF is through creating a MSSticker and attaching a gif to it for sending. But, after observing some apps. I saw that GIPHY sends GIF through MSMessageTemplateLayout or MSMessageLayout. I know this because of how MSSticker and MSMessageLayout looks on the screen. You can see that in the images below:
This above image is gif inserted through MSSticker.
This above image is gif inserted through MSMessageLayout.
The problem here is MSMessageLayout doesn't have any method to override. There is no way that I know by which we can insert gif into MSMessageTemplateLayout and make it play. I tried it. The only way I know is to create a custom MSMessageLayout which I don't find any examples for.
The major reason for me trying this method is:
There is 500 kb limit for size of GIF we can send through MSSticker
Through GIPHY, we can send a GIF with size greater than 500 kb. I checked it myself
So, two humble requests to the community:
If anyone already tried sending GIF through MSMessageLayout, please answer how you did it
If anyone succeded in sending GIF of size > 500 kb through MSSticker, please answer how you did it
Usually when you send a MSMessage inside a MSMessageTemplateLayout, the app icon is shown on the top-left corner (in your screenshot, it doesn't appear) so this makes me think that they probably use insertAttachment(_:). In this way the media is handled automatically by iMessage as it has been sent via sharing from any other apps.
I have an cordova ios application where I show a different gif upon swipe up and swipe up.
But when I swipe up the first gif the second gif doesn't start playing properly from it's first frame like it should.
Instead the second gif shows the last frame of the second gif first and then only it starts playing.
Please see the attached gif herewith.
Because of this it creates an ugly flicker on each image swipe up on the ipad app.
Could someone please point me out what I am doing wrong or what should I be doing differently to fix this issue ?.
I am tesing using ios 9.1.
I think I have a partial answer.
My problem resulted from splitting one rendered image sequence from After Effects into multiple animated gifs in Photoshop.
I think it must have something to do with the way the images are referenced in the image sequence that messes up the final animated gif. Possibly because it loses information about which images are first or last in the process.
I fixed the problem by rendering each image sequence separately then opening each image sequence in Photoshop and saving them as animated gifs separately as well.
I'm attempting to create an Instagram styled app and cannot figure out a way to display media in a UITableView the way they do (either video or image in a single view). I know it most likely is a custom implementation of UIWebView or something of the sort, however I have no idea where to even begin writing a subclass like that. Things I've already tried include:
Using a UIWebView (massive memory leak, even when adding/removing the views programmatically).
Adding either UIImageView or UIWebView depending on whether or not it was a video or image (again had a memory leak)
Searching the internet for a possible way to do this
If anyone could help me out that would be awesome! FYI the media I am using is grabbed straight from my server, there is no data being gathered from a popular source such as YouTube, Flickr, etc.
i think they use UICollectionview as it allows for better customization of a table.
In terms of images and videos, use UIImageView to display all your images and MPMoviePlayerController to play videos.
TL:DR
What technique does Apple use to make Photo.app so fast, even with large images?
Long Version
I watched Apple's WWDC 2010 video about scroll views to learn how to replicate Photo.app pagination behavior and low memory utilization (PhotoScroller Demo). It works well, but since images are loaded only when they are needed, when I try to paginate to another image, the app locks while the JPEG is being decompressed.
The same video shows a tiling technique to get better performance, but since I'm using photos taken from the camera and stored in the app, that doesn't seem feasible (having multiple copies of each photo, in different resolutions, would consume too much space - 4MB vs 27MB). Also, using iExplorer I noticed Photo.apps has only a copy of each photo (it doesn't even have a small thumbnail copy for the gallery).
What technique did Apple use to make Photos.app so fast? How can I get that same performance in my app?
I'm a bit confused if this should be here or on Programmers,
since there's no code in the question, but F.A.Q. says that algorithm
questions are part of Stackoverflow, and the tags here match it
better.
So if you just show one image fullscreen you can do this:
In the WWDC11 Session 104 - Advanced Scroll View Techniques they talk about infinite scrolling and how to do it. The basic idea is to scroll the view and after scrolling reposition the (UIImage)view inside the scroll view so it appears centered or whatever you layout constraints are.You could then load the new UIImage into the UIImageView. Since you only have one UIImageView it should be pretty low memory consuming. I am not sure about how the loading times of the images will behave though.
Maybe preload the next UIImage to the left and right to the current image and then load it into the UIImageView after reposition the scrollView can help here.
For anyone who is still looking for simply implementation of scroll view that hold lot's of images.
https://github.com/sumofighter666/ReusableScrollView
It is as simply as implementing UITableView