Add support for onCaptureButtonPressIn and onCaptureButtonPressOut events on Android

This commit is contained in:
Jameson Lapp 2024-12-19 14:35:28 -05:00
parent 55bdd972f5
commit 40794948bc
5 changed files with 82 additions and 3 deletions

View File

@ -196,8 +196,8 @@ Additionally, the Camera can be used for barcode scanning
| `resizeMode` | `'cover' / 'contain'` | Determines the scaling and cropping behavior of content within the view. `cover` (resizeAspectFill on iOS) scales the content to fill the view completely, potentially cropping content if its aspect ratio differs from the view. `contain` (resizeAspect on iOS) scales the content to fit within the view's bounds without cropping, ensuring all content is visible but may introduce letterboxing. Default behavior depends on the specific use case. |
| `scanThrottleDelay` | `number` | Duration between scan detection in milliseconds. Default 2000 (2s) |
| `maxPhotoQualityPrioritization` | `'balanced'` / `'quality'` / `'speed'` | [iOS 13 and newer](https://developer.apple.com/documentation/avfoundation/avcapturephotooutput/3182995-maxphotoqualityprioritization). `'speed'` provides a 60-80% median capture time reduction vs 'quality' setting. Tested on iPhone 6S Max (66% faster) and iPhone 15 Pro Max (76% faster!). Default `balanced` |
| `onCaptureButtonPressIn` | Function | Callback when iPhone capture button is pressed in. Ex: `onCaptureButtonPressIn={() => console.log("volume button pressed in")}` |
| `onCaptureButtonPressOut` | Function | Callback when iPhone capture button is released. Ex: `onCaptureButtonPressOut={() => console.log("volume button released")}` |
| `onCaptureButtonPressIn` | Function | Callback when camera capture or volume button is pressed in. Ex: `onCaptureButtonPressIn={() => console.log("volume button pressed in")}` |
| `onCaptureButtonPressOut` | Function | Callback when camera capture or volume button is released. Ex: `onCaptureButtonPressOut={() => console.log("volume button released")}` |
| **Barcode only** |
| `scanBarcode` | `boolean` | Enable barcode scanner. Default: `false` |
| `showFrame` | `boolean` | Show frame in barcode scanner. Default: `false` |

View File

@ -115,6 +115,8 @@ class CKCamera(context: ThemedReactContext) : FrameLayout(context), LifecycleObs
LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_PARENT
)
viewFinder.setFocusableInTouchMode(true)
viewFinder.requestFocusFromTouch()
installHierarchyFitter(viewFinder)
addView(viewFinder)
@ -139,6 +141,22 @@ class CKCamera(context: ThemedReactContext) : FrameLayout(context), LifecycleObs
cameraProvider?.unbindAll()
}
override fun dispatchKeyEvent(event: KeyEvent?): Boolean {
val keyCode = event?.getKeyCode()
val action = event?.getAction()
if (keyCode == KeyEvent.KEYCODE_CAMERA || keyCode == KeyEvent.KEYCODE_VOLUME_DOWN || keyCode == KeyEvent.KEYCODE_VOLUME_UP) {
if (action == KeyEvent.ACTION_DOWN) {
onCaptureButtonPressIn(keyCode)
return true
} else if (action == KeyEvent.ACTION_UP) {
onCaptureButtonPressOut(keyCode)
return true
}
}
return super.dispatchKeyEvent(event)
}
// If this is not called correctly, view finder will be black/blank
// https://github.com/facebook/react-native/issues/17968#issuecomment-633308615
private fun installHierarchyFitter(view: ViewGroup) {
@ -490,6 +508,21 @@ class CKCamera(context: ThemedReactContext) : FrameLayout(context), LifecycleObs
?.dispatchEvent(PictureTakenEvent(surfaceId, id, uri))
}
private fun onCaptureButtonPressIn(keyCode: Int) {
val surfaceId = UIManagerHelper.getSurfaceId(currentContext)
UIManagerHelper
.getEventDispatcherForReactTag(currentContext, id)
?.dispatchEvent(CaptureButtonPressInEvent(surfaceId, id, keyCode))
}
private fun onCaptureButtonPressOut(keyCode: Int) {
val surfaceId = UIManagerHelper.getSurfaceId(currentContext)
UIManagerHelper
.getEventDispatcherForReactTag(currentContext, id)
?.dispatchEvent(CaptureButtonPressOutEvent(surfaceId, id, keyCode))
}
fun setFlashMode(mode: String?) {
val imageCapture = imageCapture ?: return
val camera = camera ?: return

View File

@ -55,7 +55,9 @@ class CKCameraManager : SimpleViewManager<CKCamera>(), CKCameraManagerInterface<
ReadCodeEvent.EVENT_NAME, MapBuilder.of("registrationName", "onReadCode"),
PictureTakenEvent.EVENT_NAME, MapBuilder.of("registrationName", "onPictureTaken"),
ZoomEvent.EVENT_NAME, MapBuilder.of("registrationName", "onZoom"),
ErrorEvent.EVENT_NAME, MapBuilder.of("registrationName", "onError")
ErrorEvent.EVENT_NAME, MapBuilder.of("registrationName", "onError"),
CaptureButtonPressInEvent.EVENT_NAME, MapBuilder.of("registrationName", "onCaptureButtonPressIn"),
CaptureButtonPressOutEvent.EVENT_NAME, MapBuilder.of("registrationName", "onCaptureButtonPressOut")
)
}

View File

@ -0,0 +1,22 @@
package com.rncamerakit.events
import com.facebook.react.bridge.Arguments
import com.facebook.react.bridge.WritableMap
import com.facebook.react.uimanager.events.Event
class CaptureButtonPressInEvent(
surfaceId: Int,
viewId: Int,
private val keyCode: Int,
) : Event<CaptureButtonPressInEvent>(surfaceId, viewId) {
override fun getEventName(): String = EVENT_NAME
override fun getEventData(): WritableMap =
Arguments.createMap().apply {
putInt("keyCode", keyCode)
}
companion object {
const val EVENT_NAME = "captureButtonPressIn"
}
}

View File

@ -0,0 +1,22 @@
package com.rncamerakit.events
import com.facebook.react.bridge.Arguments
import com.facebook.react.bridge.WritableMap
import com.facebook.react.uimanager.events.Event
class CaptureButtonPressOutEvent(
surfaceId: Int,
viewId: Int,
private val keyCode: Int,
) : Event<CaptureButtonPressOutEvent>(surfaceId, viewId) {
override fun getEventName(): String = EVENT_NAME
override fun getEventData(): WritableMap =
Arguments.createMap().apply {
putInt("keyCode", keyCode)
}
companion object {
const val EVENT_NAME = "captureButtonPressOut"
}
}