How to instantly see new video layer after letting go of button?

Question

I have an app where a user can hold a button to take a video. However when they do so and then the new layer, with the video playback, does not appear instantly. Instead, there is a very short delay where you can see the camera still showing what the camera sees after the user has let go of the button. When the delay finishes the video instantly shows up and starts playing. But how can I instead make the first frame of the video appear before its ready to play so that its there just for a moment before it starts playing? See snapchat's video taking functionality to see what I mean

Below is the longTap method I have:

    @objc func longTap(_ sender: UIGestureRecognizer) {
    print("Long tap")

    self.numForVid = numForVid + 1 //shud change this number stuff
    print("\(numForVid)")

    cameraButton.isHidden = true

    if sender.state == .ended {
        print("UIGestureRecognizerStateEnded")

        //stopSession()
        stopRecording()
    }
    else if sender.state == .began {
        print("UIGestureRecognizerStateBegan.")
        //Do Whatever You want on Began of Gesture
        startCapture()
    }
}

Stop recording func:

    func stopRecording() {

    if movieOutput.isRecording == true {
        movieOutput.stopRecording()
    }
}

and the method called after the output URL has all data:

    func fileOutput(_ output: AVCaptureFileOutput, didFinishRecordingTo outputFileURL: URL, from connections: [AVCaptureConnection], error: Error?) {

    if (error != nil) {
        print("Error recording movie11: \(error!.localizedDescription)")
    } else {
        newViewVideoPlayback()

        switchIcon.isHidden = true
        switchWhiteUI.isHidden = true
        switchCamButton.isHidden = true
        camWhiteLine.isHidden = true

        let videoRecorded = outputURL! as URL

        playerQueue = AVQueuePlayer(playerItem: AVPlayerItem(url: videoRecorded))
        self.playerQueue?.play()

        playerLayer = AVPlayerLayer(player: playerQueue)
        playerLayer.frame = (camPreview?.bounds)!
        playerLayer?.layoutIfNeeded()
        playerLayer.videoGravity = AVLayerVideoGravity.resizeAspectFill

        camPreview?.layer.insertSublayer(playerLayer, above: previewLayer)

        playerItem1 = AVPlayerItem(url: videoRecorded)

        playerLooper = AVPlayerLooper(player: playerQueue, templateItem: playerItem1)

        if !captureSession.isRunning {
            DispatchQueue.global(qos: .background).async {
                self.startRunningCaptureSession()
            }
        }
    }
}

Update:

I have tried the below code, but it just continues to run forever making xcode crash, I don't understand why since supposedly at some point the status of the AVPlayer Item should be .readyToPlay

            while playerItem1.status == .unknown {
            print("1111121232432431243123241432143243214324321")
            if playerItem1.status == .readyToPlay {

                playerQueue = AVQueuePlayer(playerItem: playerItem1)
                self.playerQueue?.play()

                playerLayer = AVPlayerLayer(player: playerQueue)
                playerLayer.frame = (camPreview?.bounds)!
                playerLayer?.layoutIfNeeded()
                playerLayer.videoGravity = AVLayerVideoGravity.resizeAspectFill

                camPreview?.layer.insertSublayer(playerLayer, above: previewLayer)
            }
        }
        playerLooper = AVPlayerLooper(player: playerQueue, templateItem: playerItem1)

Answer 1

This can be done in the following way. Set these properties in the viewController for storing the thumbnail of the first frame when video recording starts and a Boolean to store if the photo captured is for a thumbnail or a regular photo capture by single tap:

private var isSettingThumbnail = false
private var thumbImage: UIImage?

and change the implementation of the single tap gesture recognizer target

@objc func normalTap(_ sender: UIGestureRecognizer) {
    //self.numForPic = numForPic + 1
    let settings = AVCapturePhotoSettings()
    isSettingThumbnail = false
    photoOutput?.capturePhoto(with: settings, delegate: self)
}

You also need to remove the preview layer when you stop recording otherwise the captured thumb image cannot be shown on the ImageView. Here the 10 seconds delay is just to check if the thumb image shows. Only for debugging purposes you can get rid of it anytime later.

func stopRecording() {
        if thumbImage != nil {
            camPreview.image = thumbImage!
        }
        previewLayer?.removeFromSuperlayer()
        DispatchQueue.main.asyncAfter(deadline: .now() + 10.0, execute: {
            if self.movieOutput.isRecording == true {
                self.movieOutput.stopRecording()
            }
        })

    }

Now add the delegate function to AVCaptureFileOutputRecordingDelegate to get a callback when the recording starts. At this point, you set the boolean flag.

func fileOutput(_ output: AVCaptureFileOutput, didStartRecordingTo fileURL: URL, from connections: [AVCaptureConnection]) {
    isSettingThumbnail = true
    photoOutput?.capturePhoto(with: AVCapturePhotoSettings(), delegate: self)
}

Now we check with this boolean flag and store and store the thumbnail image or the normal image.

extension ViewController: AVCapturePhotoCaptureDelegate {

    func photoOutput(_ output: AVCapturePhotoOutput, didFinishProcessingPhoto photo: AVCapturePhoto, error: Error?) {

        print("you in this !")

        if let imageData = photo.fileDataRepresentation() {
            print("\(UIImage(data: imageData)) <-- image DALUE FEFE DEDE KEKE LALY")
            if isSettingThumbnail {
                thumbImage = UIImage(data: imageData)
            } else {
                image = UIImage(data: imageData)
            }

            print("\(image) <-- dada dudu creoo IMAGE valu")
        }

    }

}

I have tested the code and is working fine. Also when a recording is in progress the shutter sound does not play by default and we take the photo when the recording has begun so we are doing it as per the Apple guidelines. According to this apple doc. This is one possible way of doing it. Also please change the class of Cam Preview to UIImageView in the storyboard. You can check the working code on github. Have a great day. It was a quite an interesting question. :)