Image Capturer - iOS

This guide provides instructions on capturing images of participants from a video stream.

This capability proves particularly valuable in Video KYC scenarios, enabling the capture of images where users can hold up their identity for verification.

captureImage()

• By using the captureImage() function of the Participant class, you can capture image of a local participant from their video stream.
• You have the option to specify the desired height and width in the captureImage() function; however, these parameters are optional. If not provided, the VideoSDK will automatically use the dimensions of the local participant's webcamStream.
• The captureImage() function returns the image in the form of a base64 string.
• If the image was not captured, nil will be returned.

Swift

class MeetingViewController {
    // Button when tapped will capture image
    @IBAction func captureImageTapped(_ sender: Any) {

        guard let participant = meeting.participants.first(where: { $0.isLocal}) else { return }

        participant.captureImage(height: 200, width: 200) { base64Data in
            // make sure that image was captured
            guard let base64Data = base64Data else {
                print("Image was not captured")
                return
            }

            print("base64: ", base64Data)
        }
    }
}

note

You can only capture an image of local participant. If you called captureImage() function on a remote participant, you will receive an error. If you want to capture an image of a remote participant, check the documentation below.

How to capture image of remote participant ?

• Before proceeding, it's crucial to understand VideoSDK's temporary file storage system and the underlying pubsub mechanism.

• Here's a break down of the steps, using the names Participant A and Participant B for clarity:

Step 1 : Initiate Image Capture Request

• In this step, you have to first send a request to Participant B, whose image you want to capture, using pubsub.
• In order to do that, you have to subscribe to topic called IMAGE_CAPTURE to ParticipantB.
• Here, we will be using sendOnly option inside the options field of the publish() method. Therefore, the request will be sent to that participant only.

Swift

class MeetingViewController {
    // Button when tapped will initiate capture request
    @IBAction func requestCapture(_ sender: Any, _ participant: Participant) {

         let options = ["persist" : false, "sendOnly" : [participant.id]]
          meeting.pubsub.publish(topic: "IMAGE_CAPTURE", message: "Sending Request to capture image", options: options)
    }
​}

Step 2 : Capture and Upload File

• To capture image from remote participant [Participant B], we will filter out request from the onMessageReceived event of the PubSubMessageListener. When a participant receives an image capture request, we will capture image using captureImage function of the Participant class.

• The captured image is then stored in the VideoSDK's temporary file storage system using the uploadBase64File() function of the Meeting class. This operation returns a unique url of the stored image.

• Next, the url is sent back to the participant who initiated the request using the IMAGE_TRANSFER topic. For this, Participant A must be subscribed to the topic IMAGE_TRANSFER.

Swift

extension MeetingViewController: PubSubMessageListener {

    func onMessageReceived(_ message: PubSubMessage) {

        if message.topic == "IMAGE_CAPTURE" {
            print("received image request")
            handleImageCapture(senderId: message.senderId)
            return
        }
    }
}
extension MeetingViewController {

    func handleImageCapture(senderId: String) {
        // Ensure that caller is the local participant (i.e. Participant B).
        guard let participant = self.participants.first(where: {$0.isLocal})  else {
            return
        }
            // capture the image.
            participant.captureImage(height: 100, width: 100) { image in

                // make sure that image was captured
                guard let image = image else {
                    print("Image was not captured)
                    return
                }

                // upload it to the VideoSDK's temporary storage.
                meeting.uploadBase64File(base64Data: image, token: "<Your-Token>", fileName: "screenshot.jpeg") { url in

                    //checking for successful upload
                    guard let url = url else {
                        print("upload failed")
                        return
                    }
                    let options = ["persist" : false, "sendOnly" : senderId]
                    // send url using pubsub back to Participant A.
                    meeting.pubsub.publish(topic: "IMAGE_TRANSFER", message: url ?? "", options: options)
                }
            }
    }
}

Step 3 : Fetch and Display Image

• To fetch the image, you need to be subscribed to the IMAGE_TRANSFER topic, receiving the url associated with the captured image. Once obtained, leverage the fetchBase64File() function from the Meeting class to retrieve the file in base64 String format from VideoSDK's temporary storage.

Swift

extension MeetingViewController: PubSubMessageListener {

    func onMessageReceived(_ message: PubSubMessage) {

        if message.topic == "IMAGE_CAPTURE" {
            print("received image request")
            handleImageCapture(senderId: message.senderId)
            return
        }
        // listen for IMAGE_TRANSFER topic
        if message.topic == "IMAGE_TRANSFER" {

            print("received image response")
            // fetch image from the VideoSDK's temporary storage.
            meeting.fetchBase64File(url: message.message, token: "<Your-Token>", completion: { base64Data in

                    //checking for successful retrieval
                    guard let base64Data = base64Data else {
                        print("retrieval failed")
                        return
                    }
                print("base64Data: ", base64Data!)
                let data = Data(base64Encoded: base64Data ?? "", options: .ignoreUnknownCharacters)
                let image = UIImage(data: data!)
                //<Display this image or upload to your cloud storage>
            })
            return
        }
    }
}

note

The file stored in the VideoSDK's temporary file storage system will be automatically deleted once the current room/meeting comes to an end.

API Reference

The API references for all the methods utilized in this guide are provided below.

• captureImage()
• pubSub()
• uploadBase64File()
• fetchBase64File()