[Vision] 손동작(Hand Pose)으로 카메라 컨트롤 하기

[사전 지식]

Detect Hand Pose with Vision (1)

[Vision] Detect Hand Pose with Vision (1) - Hand Landmark, VNDetectHumanHandPoseRequest, VNRecognizedPointsObservation

Detect Hand Pose with Vision (2) - ThumbUp & ThumbDown  

[Vision] Detect Hand Pose with Vision (2) - ThumbUp & ThumbDown

위의 두 포스팅을 읽고 오셔야지 이해할 수 있습니다..!

 

 

[1] pinched 손 동작을 인식할수있는 로직 만들기 (HandGestureProcessor)

 

www.history.com/news/the-birth-of-ok-175-years-ago <- 여기 이미지를 사용하였어요-!

 

이렇게 pinched 된 손동작의 특징을 두가지로 잡았습니다. 

 

1) thumb TIP와 index TIP의 distance가 0이다. (y축기준)

 

근데 실험을 해보니까 잘 인식이 안되어서 기준을 널널하게(?) 바꿨어요. 

1번은 distance가 40보다 작으면 thumb TIP와 index TIP가 붙었다고 인식하게 했습니다. (애플프로젝트에서 40이라고 해준거 따라했어요-!)

 

2) index TIP는 middle, ring, little MCP보다 아래있다. (y축기준)

 

1번이 잘 되면 좋은데 distance가 너무 크게 잡힐때가 있어서 방어코드(??) 느낌으로 distance가 200보다 작은데

indexTIP가  middle, ring, little MCP보다 밑에 있다면 pinched로 인식하게 해줬습니다-!

 

	import UIKit
	class HandGestureProcessor {
	enum State {
	case pinched
	case unknown
	}
	func getHandState(thumbTip: CGPoint, indexTip: CGPoint, middleMcp: CGPoint, ringMcp: CGPoint, littleMcp: CGPoint) -> State {
	let distanceY = abs(indexTip.y - thumbTip.y)
	if distanceY < 40 {
	return .pinched
	} else if distanceY < 200 {
	if indexTip.y > middleMcp.y && indexTip.y > ringMcp.y && indexTip.y > littleMcp.y {
	return .pinched
	} else {
	return .unknown
	}
	} else {
	return .unknown
	}
	}
	}

view raw HandGestureProcessor_pinch.swift hosted with ❤ by GitHub

 

[2] AVCaptureSession에 photoOutput 추가하기 + captureImage 기능 구현

사진을 얻어야하니까

AVCaputreSession의 output으로 AVCapturePhotoOutput을 추가해주세요

 

 

그 다음 caputreImage 함수를 만들어줍니다.

session의 ouput 중 AVCapturePhotoOutput 타입인 것을 찾아서 AVCapturePhotoOutput의 capturePhoto함수를 호출해줍니다.

 

capturePhoto의 delegate 파라미터타입은 AVCapturePhotoCaptureDelegate 인데요,

이 delegate를 채택해주고  photoOutput(_:didFinishProcessingPhoto:error:) 를 구현해줄게요-! 

 

caputrePhoto가 불리면 이 delegate 함수가 불리고

찍은 사진(캡쳐한 사진)을 앨범에 추가합니다.  

 

 

info.plist에 앨범 접근 권한 요청하는 것도 잊지 마세요

 

 

[3] 카메라 버튼 추가하기 (옵션)

 

caputreImage 함수를 테스트해보고 사진앱 느낌도 나도록 카메라 버튼을 추가해보겠습니다.

SF symbol을 활용해볼게요-!

 

 

이제 카메라 앱 같아졌어요..! 

 

[4] Timer 관련 뷰랑 함수 만들기

손 동작을 인식하고 3, 2, 1 이 나오고 찰칵! 해야하니까 

3, 2, 1을 보여줄 뷰를 만들고 

 

 

타이머를 실행시켜주는 함수를 만들어줍니다. 

 

 

[5] captureOutput 함수에서 필요한 손가락 랜드마크(포인트)들을 얻어서 processPoints함수에 넘겨주기

 

	extension CameraViewController: AVCaptureVideoDataOutputSampleBufferDelegate {
	func captureOutput(_ output: AVCaptureOutput, didOutput sampleBuffer: CMSampleBuffer, from connection: AVCaptureConnection) {
	let handler = VNImageRequestHandler(cmSampleBuffer: sampleBuffer, orientation: .up, options: [:])
	do {
	try handler.perform([handPoseRequest])
	guard let observation = handPoseRequest.results?.first as? VNRecognizedPointsObservation else {
	return
	}
	let thumbPoints = try observation.recognizedPoints(forGroupKey: .handLandmarkRegionKeyThumb)
	guard let thumbTipPoint = thumbPoints[.handLandmarkKeyThumbTIP] else {
	return
	}
	let indexPoints = try observation.recognizedPoints(forGroupKey: .handLandmarkRegionKeyIndexFinger)
	guard let indexTipPoint = indexPoints[.handLandmarkKeyIndexTIP] else {
	return
	}
	let middlePoints = try observation.recognizedPoints(forGroupKey: .handLandmarkRegionKeyMiddleFinger)
	guard let middleMcpPoint = middlePoints[.handLandmarkKeyMiddleMCP] else {
	return
	}
	let ringPoints = try observation.recognizedPoints(forGroupKey: .handLandmarkRegionKeyRingFinger)
	guard let ringMcpPoint = ringPoints[.handLandmarkKeyRingMCP] else {
	return
	}
	let littlePoints = try observation.recognizedPoints(forGroupKey: .handLandmarkRegionKeyLittleFinger)
	guard let littleMcpPoint = littlePoints[.handLandmarkKeyLittleMCP] else {
	return
	}
	self.processPoints(thumbTipPoint: thumbTipPoint,
	indexTipPoint: indexTipPoint,
	middleMcpPoint: middleMcpPoint,
	ringMcpPoint: ringMcpPoint,
	littleMcpPoint: littleMcpPoint)
	} catch {
	print(error)
	}
	}
	}

view raw captureoutput.swift hosted with ❤ by GitHub

 

[6] processPoints함수에서 pinched state일 때, 타이머 + 사진찍기를 실행시켜주기

 

우선 적정한 confidence를 넘으면 실행시켜줍니다. (저는 0.3으로 했어요)

그다음 VNRecognizedPoint -> AVFoundationPoint -> UIKitPoint 로 컨버팅해줍니다.

컨버팅해준 포인트들을 가지고 1번에서 만든 handGestureProcessor의 getHandState함수를 호출해줍니다.

리턴값으로 얻은 hand state가 pinched면 타이머 + 사진찍기를 실행시켜주세요-!

 

 

	extension VNRecognizedPoint {
	var toAVFoundationPoint: CGPoint {
	return CGPoint(x: self.location.x, y: 1 - self.location.y)
	}
	}
	private func processPoints(thumbTipPoint: VNRecognizedPoint, indexTipPoint: VNRecognizedPoint, middleMcpPoint: VNRecognizedPoint, ringMcpPoint: VNRecognizedPoint, littleMcpPoint: VNRecognizedPoint) {
	// Ignore low confidence points.
	guard thumbTipPoint.confidence > 0.3 && indexTipPoint.confidence > 0.3 && middleMcpPoint.confidence > 0.3 && ringMcpPoint.confidence > 0.3 && littleMcpPoint.confidence > 0.3 else {
	return
	}
	guard let thumbTipUIKitPoint = videoPreviewLayer?.layerPointConverted(fromCaptureDevicePoint: thumbTipPoint.toAVFoundationPoint) else {
	return
	}
	guard let indexTipUIKitPoint = videoPreviewLayer?.layerPointConverted(fromCaptureDevicePoint: indexTipPoint.toAVFoundationPoint) else {
	return
	}
	guard let middleMcpUIKitPoint = videoPreviewLayer?.layerPointConverted(fromCaptureDevicePoint: middleMcpPoint.toAVFoundationPoint) else {
	return
	}
	guard let ringMcpUIKitPoint = videoPreviewLayer?.layerPointConverted(fromCaptureDevicePoint: ringMcpPoint.toAVFoundationPoint) else {
	return
	}
	guard let littleMcpUIKitPoint = videoPreviewLayer?.layerPointConverted(fromCaptureDevicePoint: littleMcpPoint.toAVFoundationPoint) else {
	return
	}
	let state = handGestureProcessor.getHandState(thumbTip: thumbTipUIKitPoint, indexTip: indexTipUIKitPoint, middleMcp: middleMcpUIKitPoint, ringMcp: ringMcpUIKitPoint, littleMcp: littleMcpUIKitPoint)
	switch state {
	case .pinched:
	if isTimerRunning == false {
	runTimer(seconds: 3, completion: {
	self.captureImage()
	})
	}
	case .unknown:
	break
	}
	}

view raw processPoints.swift hosted with ❤ by GitHub

 

오른손일때,

 

왼손일때, 

 

 

[ 잘안되는 것 ]

 

1) 처음부터 손동작을 하고 카메라를 실행시키면 hand detection를 시작안하는 것 같다. 손까지 내 얼굴, 배경이랑 한세트로 인식해서 그런건가...?! 손움직임이 있어야 인식을 시작하는 것 같다. 

 

2) 손이 아예 카메라 화면에 안나올때도 가끔씩 시작되는 3, 2, 1, 찰칵...🤯

 

 

[ 소스 코드 ]

github.com/eunjin3786/HandPoseCamera

eunjin3786/HandPoseCamera

(HandPose는 iOS14부터 추가된거라서 min target이 iOS 14입니다-!)