企业官网建设流程全解析

react-native-vision-camera 性能优化：4 个最容易踩的配置坑

【免费下载链接】react-native-vision-camera📸 A powerful, high-performance React Native Camera library.项目地址: https://gitcode.com/GitHub_Trending/re/react-native-vision-camera

react-native-vision-camera 是一个主打高性能的 React Native 相机库，但"默认配置能跑"不等于"跑得最快"。预览掉帧、出片发虚、发热掉帧这些毛病，多半不是库本身的问题，而是几处常见配置踩了坑。下面按"先定位、再修正"的思路，把最容易出错的四处讲清楚，每一处都给出能直接套的配置。

先把会话"实际生效"的配置打印出来

优化之前，先确认你现在到底在跑哪套参数。很多人以为设了 60fps，结果会话为了兼顾多路输出悄悄降到了 30。会话配置真正解析完成后，会回调onSessionConfigSelected，里面给的是最终选中的值，不是你想要的那套。

import { Camera, useCameraDevice, usePreviewOutput } from 'react-native-vision-camera' function Screen() { const device = useCameraDevice('back') const preview = usePreviewOutput() return ( <Camera isActive device={device} outputs={[preview]} onSessionConfigSelected={(config) => { console.log('实际 FPS:', config.selectedFPS) console.log('原生像素格式:', config.nativePixelFormat) console.log('是否 binned:', config.isBinned) }} /> ) }

这段只用来"看清楚现状"：selectedFPS是会话真正协商出来的帧率，nativePixelFormat决定了后续帧处理要不要额外做像素格式转换（转换会抬高延迟、吃掉帧率）。先拿到这组真实值，后面的每一处修正才有对照基准。

别默认写死 60fps，先问设备能不能跑

症状：预览发烫、掉帧，切到 30fps 立刻变稳。

原因：60fps 意味着传感器和管线全程以双倍带宽吞吐。单设备能开 60fps，不代表配上你的输出组合后还撑得住，会话内部会自动降级。

修正：用device.supportsFPS(...)先探一下，不行就落到 30。

const device = useCameraDevice('back') const preview = usePreviewOutput() // 能跑 60 就上 60，否则落到 30 const targetFPS = device?.supportsFPS(60) ? 60 : 30 return ( <Camera isActive device={device} outputs={[preview]} constraints={[{ fps: targetFPS }]} /> )

{ fps: ... }是一个约束（constraint），会话会据此去匹配最接近的工作配置。帧率能开多高，完整说明见 帧率指南。

多路输出时，别让分辨率互相打架

症状：同时挂预览、录像、照片三路，预览开始发糊或帧率下滑。

原因：多路输出共用同一条传感器管线，各自都想要高分辨率时会互相争抢，会话挑一个"折中"配置，谁都不满意。

修正：给每个输出定一个合理的targetResolution（别一路顶到 4K），并用resolutionBias告诉会话"谁更重要"，顺序就是优先级。

import { Camera, useVideoOutput, usePhotoOutput, CommonResolutions, } from 'react-native-vision-camera' const videoOutput = useVideoOutput({ targetResolution: CommonResolutions.FHD_16_9, enableAudio: true, }) const photoOutput = usePhotoOutput({ targetResolution: CommonResolutions.UHD_4_3, }) // 顺序即优先级：视频排在前面，会话会更照顾它的分辨率 const constraints = [ { resolutionBias: videoOutput }, { resolutionBias: photoOutput }, ]

targetResolution让会话知道每路"大概要多大"，resolutionBias让它在冲突时做出取舍而不是随便挑。多输出怎么权衡，可参考 多路输出 与 相机输出。

高级功能按需开，HDR 和防抖不是免费午餐

症状：功能都开着，帧率上不去、延迟偏高。

原因：视频 HDR、电影级防抖、畸变校正都会额外占用 ISP 和管线资源，而它们常常被"顺手"一直开着。

修正：把高级功能当成可选项，平时保持最省（SDR、不加防抖），需要时再加对应约束。

import { CommonDynamicRanges } from 'react-native-vision-camera' const constraints = [ { fps: 30 }, // 普通场景明确要 SDR，别默认走 HDR { videoDynamicRange: CommonDynamicRanges.ANY_SDR }, // 需要更强防抖时才放开这一行 // { videoStabilizationMode: 'cinematic' }, ]

videoDynamicRange约束视频走哪个动态范围，videoStabilizationMode控制防抖等级。按需启用、用完关掉，比长期全开省心得多。相关说明见 性能指南 与 约束配置。

用了帧输出就及时 dispose，否则缓冲会爆

症状：onFrameDropped频繁报out-of-buffers，帧处理明显断流。

原因：CameraFrameOutput的帧缓冲数量有限，上一帧没dispose()就被下一帧堵住，管线直接丢帧。

修正：处理完一帧立刻frame.dispose()，同时把掉帧回调接上用来定位。

import { useFrameOutput } from 'react-native-vision-camera' const frameOutput = useFrameOutput({ onFrameDropped: (reason) => { if (reason === 'out-of-buffers') { console.warn('缓冲耗尽：有 Frame 没及时 dispose') } }, }) frameOutput.addOnFrameListener((frame) => { // ... 处理这一帧（送算法、转图片等） frame.dispose() // 用完立刻释放，别攒着 })

onFrameDropped的reason能直接区分是"缓冲耗尽"还是"处理太慢"（frame-was-late），后者多半是该降帧率或降分辨率。

一张表快速定位问题

最后给两条能落地的习惯：先在一台代表机型上跑一遍，把onSessionConfigSelected打印出的实际帧率、掉帧率记下来当基准；之后每次改动配置——帧率、分辨率、输出数量、高级功能——都复测一遍，确认没有变差再合入。别靠感觉调，用打印出来的真实值说话。仓库里的示例工程 apps/simple-camera/src 也值得翻一翻，看看真实项目是怎么把输出和约束组装起来的。

【免费下载链接】react-native-vision-camera📸 A powerful, high-performance React Native Camera library.项目地址: https://gitcode.com/GitHub_Trending/re/react-native-vision-camera