React Native Vision Camera 视频录制停止时异常问题解析

问题现象

在使用React Native Vision Camera进行视频录制功能开发时，开发者遇到了一个典型问题：当用户手动停止视频录制时，系统会抛出"com.mrousavy.camera.core.NoRecordingInProgressError"异常，提示"没有正在进行的视频录制活动"，而自动停止录制时则不会出现此问题。

问题背景

该问题出现在一个视频录制页面中，主要功能包括：

1. 用户点击录制按钮开始录制
2. 系统自动设置90秒的录制时长限制
3. 用户也可以手动提前停止录制

技术分析

异常触发机制

异常的核心在于stopRecording()方法被多次调用。从日志分析可以看出：

1. 当手动停止录制时，系统首先正常完成了视频文件的写入和保存
2. 随后又尝试再次停止录制，此时由于录制已经结束，触发了"NoRecordingInProgressError"

根本原因

经过深入排查，发现问题出在组件的动画系统设计上：

1. 组件使用了AnimatedCircularProgress来显示录制进度
2. 当组件卸载(unmount)时，动画系统会自动触发onAnimationComplete回调
3. 这导致stopRecording被意外调用两次：
   • 第一次：用户手动点击停止按钮
   • 第二次：组件卸载时动画系统自动触发

解决方案

修复方法

1. 移除冗余的状态更新：在onRecordingFinished回调中，避免立即更新录制状态，而是让停止操作自然完成状态更新

2. 优化动画组件使用：确保动画完成回调不会在组件生命周期外被意外触发

3. 添加防护性编程：在调用stopRecording前检查录制状态

最佳实践建议

1. 状态管理：确保录制状态的单一数据源，避免多路径更新

2. 生命周期管理：在组件卸载时，清理所有可能的后台操作和回调

3. 错误边界：对可能出现的异常进行捕获和处理，提供更好的用户体验

经验总结

这个案例展示了React Native开发中常见的几个关键点：

1. 副作用管理：组件卸载时的清理工作至关重要

2. 动画系统行为：第三方动画组件的回调机制需要充分理解

3. 异步操作协调：视频录制这类异步操作需要精心设计状态流转

通过这个问题的解决，开发者可以更深入地理解React Native组件的生命周期管理和状态同步机制，避免类似问题的发生。