Show image preview of video sent in JSQMessagesViewController

Question

I'm trying to show in bubble of video message (JSQVideoMediaItem) an image preview of the video sent by the user but my code only show a black preview. I'm sure the function generateThumbnail() can work perfectly when I use it in order to take the file of the video sent from Firebase. I use Firebase Storage, when a user send a video I store it in Firebase, so the preview choose the right video file from Firebase Storage, I tested it with print(previewImage).

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = super.collectionView(collectionView, cellForItemAt: indexPath) as! JSQMessagesCollectionViewCell
    let message = messages[indexPath.item]

    if !message.isMediaMessage {
        if message.senderId == senderId {
            cell.textView.textColor = UIColor.white
        } else {
            cell.textView.textColor = UIColor.black
        }
    } else if message.isMediaMessage {
        if let media = message.media as? JSQVideoMediaItem {
            var imagePreview = generateThumbnail(url: (media.fileURL)!)
            let imageView = UIImageView(image: imagePreview)
            imageView.backgroundColor = UIColor.clear
            imageView.frame = CGRect(x: 0.0, y: 0.0, width: view.frame.size.width, height: view.frame.size.height)
            imageView.contentMode = .center
            imageView.clipsToBounds = true
            JSQMessagesMediaViewBubbleImageMasker.applyBubbleImageMask(toMediaView: imageView, isOutgoing: false)
        }
    }
    return cell
}

func generateThumbnail(url: URL) -> UIImage? {
    do {
        let asset = AVURLAsset(url: url)
        let imageGenerator = AVAssetImageGenerator(asset: asset)
        imageGenerator.appliesPreferredTrackTransform = true
        let time: CMTime = CMTimeMake(1, 1)
        let cgImage = try imageGenerator.copyCGImage(at: time, actualTime: nil)
        return UIImage(cgImage: cgImage)
    } catch {
        print(error.localizedDescription)
        return nil
    }
}

I hope someone can help me

Has anyone posted an answer of how to achieve this? – justdan0227 Sep 05 '18 at 23:07 — justdan0227, Sep 05 '18 at 23:07

score 1 · Answer 1 · answered Oct 12 '19 at 12:08

I made an extension for this

    extension JSQVideoMediaItem {

    func addThumbnail() {

        var img: UIImage? = nil

        /// create thumbnail

            do {
                let asset = AVURLAsset(url: self.fileURL)
                let imgGenerator = AVAssetImageGenerator(asset: asset)
                imgGenerator.appliesPreferredTrackTransform = true

                let cgImage = try imgGenerator.copyCGImage(at: CMTimeMake(0,1), actualTime: nil)
                img = UIImage(cgImage: cgImage)
            }
            catch let error as NSError {
                print("Image generator error :  \(error.localizedDescription)")
            }

        /// create thumbnail END

        let size:CGSize = self.mediaViewDisplaySize()

        let playIcon = UIImage.jsq_defaultPlay()?.jsq_imageMasked(with: .white)
        let imageView:UIImageView = UIImageView(image: playIcon)
        imageView.frame = CGRect(x: 0.0, y: 0.0, width: size.width, height: size.height)
        imageView.contentMode = UIViewContentMode.center
        imageView.clipsToBounds = true
        JSQMessagesMediaViewBubbleImageMasker.applyBubbleImageMask(toMediaView: imageView, isOutgoing: self.appliesMediaViewMaskAsOutgoing)

        if (img != nil) {
            let thumbnailImageView:UIImageView = UIImageView(image: img)
            thumbnailImageView.frame = CGRect(x: 0.0, y: 0.0, width: size.width, height: size.height)
            thumbnailImageView.contentMode = UIViewContentMode.scaleAspectFill
            thumbnailImageView.clipsToBounds = true
            JSQMessagesMediaViewBubbleImageMasker.applyBubbleImageMask(toMediaView: thumbnailImageView, isOutgoing: self.appliesMediaViewMaskAsOutgoing)

            imageView.backgroundColor = .clear
            thumbnailImageView.addSubview(imageView)
            self.cachedVideoImageView = thumbnailImageView;

        }
        else {
            imageView.backgroundColor = .black
            self.cachedVideoImageView = imageView
        }
    }
}

addThumbnail after created JSQVideoMediaItem

vidItem = JSQVideoMediaItem(fileURL: URL(fileURLWithPath: destPath), isReadyToPlay: true)
vidItem?.addThumbnail()

and you should move this line JSQVideoMediaItem.m to JSQVideoMediaItem.h for public access

@property (strong, nonatomic) UIImageView *cachedVideoImageView;

I hope it will be useful for someone

Show image preview of video sent in JSQMessagesViewController

1 Answers1