feat(ux): update get ready page with new preview screen (#78)

* add preview/hair check screen

* chore(ux): add error log message

* chore(ux): update handling of camera permissions

* chore: reset integration test

* fix build error

* fix build error

* chore: misc ux updates

* chore: update sample and integration app results screen

* chore: update UX

* chore: minor UX tweak on oval dimension

* chore: remove camera permission title

* chore: update UX

* chore: update per review feedback

* chore: update localization strings

* update readme

Author: phantumcode

HostApp/HostApp/Views/LivenessResultContentView+Result.swift

@@ -14,17 +14,19 @@ extension LivenessResultContentView {
         let valueTextColor: Color
         let valueBackgroundColor: Color
         let auditImage: Data?
-
+        let isLive: Bool
+        
         init(livenessResult: LivenessResult) {
             guard livenessResult.confidenceScore > 0 else {
                 text = ""
                 value = ""
                 valueTextColor = .clear
                 valueBackgroundColor = .clear
                 auditImage = nil
+                isLive = false
                 return
             }
-
+            isLive = livenessResult.isLive
             let truncated = String(format: "%.4f", livenessResult.confidenceScore)
             value = truncated
             if livenessResult.isLive {

HostApp/HostApp/Views/LivenessResultContentView.swift

@@ -17,7 +17,10 @@ struct LivenessResultContentView: View {
                 Text("Result:")
                 Text(result.text)
                     .fontWeight(.semibold)
-
+                    .foregroundColor(result.valueTextColor)
+                    .padding(6)
+                    .background(result.valueBackgroundColor)
+                    .cornerRadius(8)
             }
             .padding(.bottom, 12)
 
@@ -42,6 +45,20 @@ struct LivenessResultContentView: View {
                     .frame(maxWidth: .infinity, idealHeight: 268)
                     .background(Color.secondary.opacity(0.1))
             }
+            
+            if !result.isLive {
+                steps()
+                    .padding()
+                    .background(
+                        Rectangle()
+                            .foregroundColor(
+                                .dynamicColors(
+                                    light: .hex("#ECECEC"),
+                                    dark: .darkGray
+                                )
+                            )
+                            .cornerRadius(6))
+            }
         }
         .padding(.bottom, 16)
         .onAppear {
@@ -54,6 +71,31 @@ struct LivenessResultContentView: View {
             }
         }
     }
+    
+    private func steps() -> some View {
+        func step(number: Int, text: String) -> some View {
+            HStack(alignment: .top) {
+                Text("\(number).")
+                Text(text)
+            }
+        }
+
+        return VStack(
+            alignment: .leading,
+            spacing: 8
+        ) {
+            Text("Tips to pass the video check:")
+                .fontWeight(.semibold)
+            step(number: 1, text: "Maximize your screen's brightness.")
+                .accessibilityElement(children: .combine)
+
+            step(number: 2, text: "Avoid very bright lighting conditions, such as direct sunlight.")
+                .accessibilityElement(children: .combine)
+
+            step(number: 3, text: "Remove sunglasses, mask, hat, or anything blocking your face.")
+                .accessibilityElement(children: .combine)
+        }
+    }
 }
 
 

HostApp/README.md

@@ -29,7 +29,7 @@ cd amplify-ui-swift-livenes/HostApp
 
 7. Once signed in and authenticated, the "Create Liveness Session" is enabled.  Click the button to generate and get a session id from your backend.
 
-8. Once a session id is created, the Liveness Check screen is displayed.  Follow the instructions and click on Begin Check button to begin liveness verification.
+8. Once a session id is created, the Liveness Check screen is displayed.  Follow the instructions and click on Start video check button to begin liveness verification.
 
 ## Provision AWS Backend Resources
 

Sources/FaceLiveness/AV/CMSampleBuffer+Rotate.swift

@@ -11,15 +11,34 @@ import AVFoundation
 class LivenessCaptureSession {
     let captureDevice: LivenessCaptureDevice
     private let captureQueue = DispatchQueue(label: "com.amazonaws.faceliveness.cameracapturequeue")
-    let outputDelegate: OutputSampleBufferCapturer
+    let outputDelegate: AVCaptureVideoDataOutputSampleBufferDelegate
     var captureSession: AVCaptureSession?
+    
+    var outputSampleBufferCapturer: OutputSampleBufferCapturer? {
+        return outputDelegate as? OutputSampleBufferCapturer
+    }
 
-    init(captureDevice: LivenessCaptureDevice, outputDelegate: OutputSampleBufferCapturer) {
+    init(captureDevice: LivenessCaptureDevice, outputDelegate: AVCaptureVideoDataOutputSampleBufferDelegate) {
         self.captureDevice = captureDevice
         self.outputDelegate = outputDelegate
     }
 
     func startSession(frame: CGRect) throws -> CALayer {
+        try startSession()
+
+        guard let captureSession = captureSession else {
+            throw LivenessCaptureSessionError.captureSessionUnavailable
+        }
+        
+        let previewLayer = previewLayer(
+            frame: frame,
+            for: captureSession
+        )
+
+        return previewLayer
+    }
+    
+    func startSession() throws {
         guard let camera = captureDevice.avCaptureDevice
         else { throw LivenessCaptureSessionError.cameraUnavailable }
 
@@ -44,17 +63,10 @@ class LivenessCaptureSession {
             captureSession.startRunning()
         }
 
-        let previewLayer = previewLayer(
-            frame: frame,
-            for: captureSession
-        )
-
         videoOutput.setSampleBufferDelegate(
             outputDelegate,
             queue: captureQueue
         )
-
-        return previewLayer
     }
 
     func stopRunning() {
@@ -83,6 +95,11 @@ class LivenessCaptureSession {
         _ output: AVCaptureVideoDataOutput,
         for captureSession: AVCaptureSession
     ) throws {
+        if captureSession.canAddOutput(output) {
+            captureSession.addOutput(output)
+        } else {
+            throw LivenessCaptureSessionError.captureSessionOutputUnavailable
+        }
         output.videoSettings = [
             kCVPixelBufferPixelFormatTypeKey as String: kCVPixelFormatType_32BGRA
         ]
@@ -92,12 +109,6 @@ class LivenessCaptureSession {
             .forEach {
                 $0.videoOrientation = .portrait
         }
-
-        if captureSession.canAddOutput(output) {
-            captureSession.addOutput(output)
-        } else {
-            throw LivenessCaptureSessionError.captureSessionOutputUnavailable
-        }
     }
 
     private func previewLayer(

Sources/FaceLiveness/AV/LivenessCaptureSession.swift

@@ -24,7 +24,7 @@ class OutputSampleBufferCapturer: NSObject, AVCaptureVideoDataOutputSampleBuffer
     ) {
         videoChunker.consume(sampleBuffer)
 
-        guard let imageBuffer = sampleBuffer.rotateRightUpMirrored()
+        guard let imageBuffer = sampleBuffer.imageBuffer
         else { return }
 
         faceDetector.detectFaces(from: imageBuffer)

Sources/FaceLiveness/AV/OutputSampleBufferCapturer.swift

@@ -34,9 +34,9 @@ final class VideoChunker {
 
     func start() {
         guard state == .pending else { return }
-        state = .writing
         assetWriter.startWriting()
         assetWriter.startSession(atSourceTime: .zero)
+        state = .writing
     }
 
     func finish(singleFrame: @escaping (UIImage) -> Void) {
@@ -49,8 +49,8 @@ final class VideoChunker {
 
     func consume(_ buffer: CMSampleBuffer) {
         if state == .awaitingSingleFrame {
-            guard let rotated = buffer.rotateRightUpMirrored() else { return }
-            let singleFrame = singleFrame(from: rotated)
+            guard let imageBuffer = buffer.imageBuffer else { return }
+            let singleFrame = singleFrame(from: imageBuffer)
             provideSingleFrame?(singleFrame)
             state = .complete
         }
@@ -66,10 +66,10 @@ final class VideoChunker {
         if assetWriterInput.isReadyForMoreMediaData {
             let timestamp = CMSampleBufferGetPresentationTimeStamp(buffer).seconds
             let presentationTime = CMTime(seconds: timestamp - startTimeSeconds, preferredTimescale: 600)
-            guard let rotated = buffer.rotateRightUpMirrored() else { return }
+            guard let imageBuffer = buffer.imageBuffer else { return }
 
             pixelBufferAdaptor.append(
-                rotated,
+                imageBuffer,
                 withPresentationTime: presentationTime
             )
         }